Jquery初级

51 阅读 0 评论 34 点赞

我是靠谱客的博主自然鞋垫，最近开发中收集的这篇文章主要介绍Jquery初级，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一章初识jQuery
一、jQuery简介
1.什么是jQuery？

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

2.常见的javascript库?

Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。
二、jQuery的特性
jQuery能做以下事情：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
三、jQuery介绍
1.jQuery的使用方式
下载后引入

<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('Hello World');
});
</script>
</head>
</html>

3.jQuery函数
jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：

1）选择器（字符串）
jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。

2）DOM对象（即Node实例）
jQuery函数将该DOM封装成jQuery对象并返回。

3）HTML文本字符串
jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
$("<div class="one">one</div>");

4）一个匿名函数
$(function(){});
当文当加载完毕之后jQuery函数调用匿名函数。

4.jQuery对象

jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。

对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。

jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");

四、jQuery选择器
1.基本选择器：

所有选择器 *
标签选择器标签名
ID选择器 #id
类选择器 .className
群组选择器 .one,.two 多个选择器使用都好分隔，取并集
复合选择器 .one.two 多个选择器组合使用，取交集

2.层次选择器：

后代选择器 .one .two
两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
子代选择器 .one>.two
两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。

3.兄弟选择器：

下一个兄弟选择器 .one+.two
两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
之后所有子代选择器 .one~.two
两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.t

五、jQuery过滤器
jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。是建立在前面选择器已经选择到的元素的基础之上。语法：selector:过滤器

1.基本过滤器：

selector:first 获取所有已选择到的元素中的第一个元素
selector:last 获取所有已选择到的元素中的最后一个元素
selector:even 获取所有已选择到的元素中的索引为偶数的元素
selector:odd 获取所有已选择到的元素中的索引为奇数的元素
selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
selector:lt(num) 获取所有已选择到的元素中的索引值小于num的元素
selector:gt(num) 获取所有已选择到的元素中的索引值大于num的元素
selector1:not(selector2) 获取所有已选择到的元素中的除了selector2的元素
selector:header 获取所有已选择到的元素中的标题元素(h1~h6)

2.内容过滤器：

selector:contains(text)
获取所有已选择到的元素中文本包含text的元素
selector:empty
获取所有已选择到的元素中的空元素(没有子节点)
selector:parent
获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent");
selector1:has(selector2)
获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')");

3.可见性过滤器：
隐藏类型分两种：

1）不占据屏幕空间
display:none;
<input type="hidden">
2）占据屏幕空间
visibility:hidden;
opacity:0;//透明度为0
使用：
:visible 选择所有占据屏幕空间的元素
:hidden 选择所有不占据屏幕空间的元素

4.属性过滤器：

selector[attrKey]
获取所有已选择到的元素中具有属性attrKey的元素
selector[attrKey=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
selector[attrKey^=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
selector[attrKey$=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
selector[attrKey*=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
selector[attrKey!=attrVal]
获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有

5.后代选择器：

selector:nth-child(index)
获取每个selector元素中索引为index的子元素。【注意】index从1开始
selector:first-child
获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素）
selector:last-child
获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素）
selector:only-child
获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素）
selector:first-of-type
获取每个selector元素中每种类型子元素中的第一个
selector:last-of-type
获取每个selector元素中每种类型子元素中的最后一个

6.表单过滤器：

:checked 选取所有被选中的元素，用于复选框、单选框、下拉框
:selected 选取所有被选中的元素，该选择器只适用于<option>
:focus 选取当前获取焦点的元素
:text 选取所有的单行文本框(<input type="text">)
:password 选取所有的密码框
:input 选取所有的<input>,<textarea>,<select>,<button>元素。
*注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。*
:enable 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disable 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的input类型为image的表单元素
:reset 选取所有的input类型为reset的表单元素
:button 选取所有的input类型为button的表单元素
:file 选取所有的input类型为file的表单元素

六、jQuery中的Dom操作
1.查找节点
通过jQuery选择器来完成