jQuery支持所有css选择器，只要jQuery允许使用的css选择器，都屏蔽了兼容性问题

1.基本选择器：

1.$("id") id选择器

2.$(".className") class选择器

3.$("tagName")标签选择器

4.$("*")所有元素选择器

5.$("selector1,selector2,...") 组合选择，把符合条件的都找到

2.层次选择器：

1.$("select1 select2") 查找select1的所有后代select2

2.$("select1>select2") 查找select1的直接子代select2

3.$("select1+select2") 查找select1紧邻的下一个兄弟select2

4.$("elect1~select2") 查找select1之后所有符合条件的select2兄弟元素

3.过滤选择器:

3.1位置过滤: 根据元素在结果集中的下标位置选择

:first/last : 在结果集中选择第一个和最后一个元素

*以下选择器下标从0开始！*

:even/odd: 选择结果集中下标为偶数/奇数的元素

:eq/gt/lt(i): 选择下标=,>或

子元素过滤: 选择在父元素下指定位置的子元素

强调: 参照的不是在结果集合中的位置,而是在父元素下的位置

:first-child/last-child

*以下选择器下标从1开始*

:nth-child(n/odd/even/2n/2n+1)

:not(selector): 否定选择器,可否定一切选择器

例子：比较:first和:first-child的区别

:first-child

上图通过css选择器设置id为tabs下的第一个li的颜色为红色，参照的是父元素下的位置，所以结果为"言情" "三国演义"字体为红色

:first

上图通过jQuery设置id为tabs下的第一个li的颜色为红色，根据元素在结果集中的下标位置，展示结果为"言情"字体为红色

css和jQuery选择器的区别

内容过滤: 根据元素的内容查找

:contains(text)： 查找内容中包含指定文本的元素

span:contains("购物车"): 找内容中包含"购物车"的span

:empty : 查找不包含任何内容的空元素

:parent : 查找只要包含内容的父元素

:has(selector) : 选择包含满足selector要求的子元素的父元素

比如: div:has(.active) 包含class为active的子元素的div

:可见性过滤

:visible : 匹配所有可见的元素

:hidden : 匹配所有不可见的元素display:none和type="hidden"的

属性过滤选择器:

[属性] : 查找拥有该属性的元素

[属性="值"] : 查找指定属性的值为"值"的元素

[属性!="内容"] : 查找指定属性的值不为"值"的元素

[属性^="内容"] : 查找指定属性的值以"内容"开头的

[属性$="内容"] : 查找指定属性的值以"内容"结尾的

[属性*="内容"] : 查找指定属性的值包含"内容"的

[条件1][条件2]... : 查找同时满足条件1,2...的元素

按节点间关系查找:

1. 父子关系:

$(parent).children() 查找parent下所有直接子元素

.children(selector) 查找parent下符合条件的元素

$(parent).find(selector) 查找parent下所有后代元素中符合条件的

$(child).parent() 获得child的父元素

2. 兄弟关系:

$(...).next/prev([selector]) 获得下/前一个兄弟元素

$(...).nextAll/prevAll([selector]) 获得之后/之前所有的兄弟元素

$(...).siblings([selector]) 获得前后所有的兄弟元素

表单过滤:

利用表单中的元素名和type属性来选择表单中元素

强调: 只能选择表单元素

何时: 今后只要在表单中查找表单元素时

包括: :input 可匹配: input textarea select button

如果希望单独匹配select input textarea...

可用元素选择器

按type属性选择:

:text :password :radio :checkbox

:submit :reset :button

:image :file

状态选择器: :enabled :disabled :checked :selected