02-jQuery选择器

第二节：选择器

选择器引擎规则：

1、css选择器的规则：标签选择器、id选择器、类选择器、混合选择器
2、css3选择器规则
3、状态和伪类：:even/ :odd/ :first/ :last/ :eq(index)
4、属性：(attr==value)

层级选择器：通过DOM的嵌套关系匹配关系

JQuery层级选择器：包含选择器、子选择器、相邻选择器、兄弟选择4种
1、包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。（不受层级限制）
2、子选择器：$("parent>child")在给定的父元素下匹配所有子元素
3、相邻选择器：$("prev+next")匹配所有紧凑在prev元素后的next元素
4、兄弟元素：$("prev~siblings"）匹配prev元素之后的所有sibling元素。

基本过滤器：

:first:匹配找到的第一个元素
:last:匹配找到的最后一个元素
:eq:匹配一个给定索引值的元素
:even:匹配所有索引值为偶数的元素
：odd：匹配所有索引值为奇数的元素
：gt（index）:匹配所有大于给定给定索引值的元素
：lt（index）：匹配所有小于给定索引值的元素
：not：去除所有与给定选择器匹配的所有元素
：animated：选取正在执行动画的所有元素
focus：选择正在获取焦点的元素

内容过滤选择器：

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

可见过滤选择器

:hidden选择所有不可见的元素 集合元素
:visible选取所有可见的元素 集合元素

属性过滤选择器

[attribute]选取拥有此属性的元素 集合元素
[attribute=value] 选取属性值为value值的元素 集合元素
[attribue^=value] 选取属性的值以value开始的元素 集合元素
[attribue$=value] 选取属性的值以value结束的元素 集合元素

子元素过滤选择器

:nth-child(index/even/odd)选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） 集合元素
:first-child 选取每个元素的第一个子元素 集合元素
:last-child 选取每个元素的最后一个子元素 集合元素
:nth-child()选择器是很常用的子元素过滤选择器，如下
:nth-child(even)选择每个父元素下的索引值是偶数的元素
:nth-child(odd)选择每个父元素下的索引值是奇数的元素
:nth-child(2)选择每个父元素下的索引值是2的元素
:nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始

选择器优化

使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
1、多用ID选择器，少直接使用class选择器
2、多用父子关系，少用嵌套关系
3、缓存jQuery对象

使用过滤器

jQuery提供了2种选择文档元素的方式：选择器和过滤器
1、类过虑器：根据元素的类属性来进行过滤操作。
hasClass(className)：判断当前jQuery对象中的某个元素是否包含指定类名，包含返回true，不包含返回false
2、下标过滤器：精确选出指定下标元素
eq(index)：获取第N个元素。index是整数值，下标从0开始
3、表达式过滤器
filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。
功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式
映射 map(callback)：将一组元素转换成其他数组
清洗 not(expr)：删除与指定表达式匹配的元素
截取 slice(start,end)：选取一个匹配的子集

查找

向下查找后代元素
children():取得所有元素的所有子元素集合（子元素）
find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
查找兄弟元素 siblings()查找当前元素的兄弟