jquery

Posted 2020-11-17 javajavac

1、jQuery

1）什么是jQuery？

jQuery是一个快速、简洁的javascript框架，简单来讲，就是一个js的库

2）jQuery的好处是什么？

最大的特点是：写的少，做的多。

3）jQuery对象

①jQuery对象就是通过$()包装DOM对象后产生的对象
②jQuery对象是jQuery独有的，如果有一个对象是jQuery对象，那么它就可以使用jQuery里面的方法：
$("#d").html();
③jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法
④约定：如果获取的是jQuery对象，那么要在变量前面加上$，
例如：var $aa = jQuery对象
var aa = DOM对象

4）jQuery对象转成DOM对象

①jQuery对象不能使用DOM中的方法，但如果jQuery对象没有封装想要的方法，不得不使用DOM对象的时候
有如下两种处理方式：
1）jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象
2）使用jQuery中的get(index)方法得到相应的DOM对象

5）DOM对象转jQuery对象

①对于一个DOM对象，只需要用$()把DOM对象包装起来，jQuery对象就是通过jQuery包装DOM对象后产生的对象，
就可以获取一个jQuery对象，转换后就可以使用jQuery中的方法了

6）jQuery选择器

选择器是jQuery的根基，在jQuery中，对事件处理，遍历DOM和Ajax操作都依赖于选择器

选择器的优点：

①简洁的写法
②完善的事件处理机制

1）基本选择器

基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找
DOM元素（在网页中id只能使用一次，class允许重复使用）

①#id 根据给定的id匹配一个元素
②.class 根据给定的类名去匹配元素
③element 根据给定的元素名匹配元素（就是标签名）
④* 匹配所有元素
⑤selector1，selector2.....selectorN 将每一个选择器匹配到的元素合并后一起返回

2）层次选择器

如果想通过DOM元素之间的层次关系来获取特定的元素，例如后代元素，相邻元素，兄弟元素等，则需要使用层次选择器

$("ancestor descendant") 选取ancestor的所有的descendant（后代）元素
$("parent > child") 选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")
选择的是后代元素
$("prev + next") 选取紧接在prev元素后的下一个next元素
$("prev ~ siblings") 选取prev元素后面的所有的siblings元素

注意：（prev ~ div）选择器只能选择"#prev"元素后面的同辈元素；而jQuery中的方法siblings()与前后的位置无关，只要是同辈节点
就可以选取

3）过滤选择器

过滤选择器主要是通过待定的过滤规则来筛选出所需要的DOM元素，该选择器都以":"开头

按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤器，子元素过滤和表单对象属性过滤器

①基本过滤选择器
1）:first 选择第一个元素
2）:last 选择最后一个元素
3）:not(selector) 去除所有与给定选择器匹配的元素
4）:even 选取索引时偶数的所有元素，索引是从0开始
5）:odd 选取索引时奇数的所有元素，索引是从0开始
6）:eq(index) 选取索引等于index的元素，索引从0开始
7）:gt(index) 选取索引大于index的元素，索引从0开始
8）:lt(index) 选取索引小于index的元素，索引从0开始
9）:header 选取所有的标题元素 如：h1 h2等
10）:animated 选取当前正在执行动画的所有元素

②内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

1）:contains(text) 选取含有文本内容为text的元素
2）:empty 选取不包含子元素或者文本的空元素
3）:has(selector) 选取含有选择器所匹配的元素的元素
4）:parent 选取含有子元素或者文本的元素

③可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

1）:hidden 选取所有不可见的元素
2）:visible 选取所有可见的元素

注意：可见选择器:hidden不仅包含样式属性display和none的元素，也包含文本
隐藏域(<input type="hidden"/>)和visible:hidden之类的元素

④属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

1）[attribute] 选取拥有此属性的元素
2）[attribute = value] 选取指定属性的值为value的元素
3）[attribute != value] 选取指定属性的值不等于value的元素
4）[attribute ^= value] 选取指定属性的值以value开始的元素
5）[attribute $= value] 选取指定属性的值以value结束的元素
6）[attribute *= value] 选取指定属性的值含有value的元素
7）[selector1][selector2][selectorN] 用属性选择器合并成为一个符合属性选择器，
满足多个条件，每选择一次，缩小一次范围

⑤子元素过滤选择器

:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index 从1算起)
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中的唯一的子元素，那么将被匹配

nth-child()选择器详解：
1）:nth-child(even/odd) 能选取每个父元素下的索引值为偶(奇)数的元素
2）:nth-child(2) 能选取每个父元素下的索引值为2的元素
3）:nth-child(3n) 能选取每个父元素下的索引值为3的倍数的元素
4）:nth-child(3n+1) 能选取每个父元素下的索引值是3n+1的元素

⑥表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤

:enabled 选取所有的可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素（单选框，复选框）
:selected 选取所有被选中选项元素（下拉列表）