【网站建设】jQuery支持的CSS选择器有哪些？

jQuery支持大多数CSS3.0中的选择器，并自定义了一些选择器，包括以下几类。

1.基本选择器

基本选择器包括标记选择器、类选择器、ID选择器、通配符、交集选择器、并集选择器。写法就是把原来的CSS选择器写在$("")内，如$("p")、$(".cl")、 $("#one")、$("*")、$("p.c1")、$("hl，#one")。

如果选择器选择的结果是元素的集合，则可以用eq(n)来选择集合中的第n+l个元素。

2.位置选择器

位置选择器包括后代选择器、子选择器、相邻选择器、弟妹选择器。

其中，弟妹选择器如$("hl～p")是jQuery新增的，用于选择hl元素后面的所有同辈P元素，而相邻选择器如$("hl+P)只能选择紧邻在hl元素后面的一个同辈P元素。这是它们的区别。另外，jQuery中的方法siblings()与前后位置无关，只要是同辈元素就可以选取。

提示:jQuery中没有动态伪类选择器(如E:hover)，因为它提供了hover()方法模拟该功能。

3、过滤选择器

使用jQuery基本选择器后，返回的jQuery对象通常会包含一组DOM元素。但在实际中，往往还需要根据特定的条件从获取的元素集合中筛选出一部分DOM元素，在这种情况下，可以在基本选择器的基础上添加过滤选择器来完成筛选任务。根据具体情况，在过滤选择器中可以使用元素的索引值、内容、属性、子元素位置、表单域属性以及可见性等作为筛选条件。

1.位置过滤选择器

jQuery支持的CSS 3位置选择器可以看成是CSS伪对象选择器的一种扩展，如它也有:first-child这样的选择器，但能选择的某个位置上的元素更多了。

(1)下面是几个位置过滤选择器的示例。

①改变第一个div元素的背景色为#bbffaa。

②改变id不为one的所有P元素的对齐属性为居中对齐。

③改变索引值为偶数的tr元素的背景色为#bbffaa。

④改变索引值为大于3且为奇数的p元素的文本颜色为红色。

⑤选取表格中除第一行和最后一行外的所有行，并设置背景颜色。

⑥选取input元素中的所有非radio元素。

⑦选中页面中除第一个p元素外的所有P元素。

注意:not(filter)的参数filter只能是位置选择器或过滤选择器，而不能是基本选择器。

(2)有了位置选择器，使制作表格的隔行变色效果变得非常简单，只需要一行代码就能实现，下面是实现表格隔行变色的代码。

2.内容过滤选择器

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

下面是一些jQuery内容过滤选择器用法的示例。

(1)改变含有文本“不”的#test元素的背景色为#bfa。

(2)改变不包含子元素(或者文本元素)的div空元素的背景色为#bfa。

(3)改变含有class为mini元素的P元素的背景色为#bfa。

(4)改变含有子元素(或者文本元素)的div元素的背景色为#bfa。

包含选择器"E:has(F)"，它和后代选择器“E F"的区别是后代选择器选中的是后面一个元素F，而包含选择器选中的是前面这个元素E。

3.属性过滤选择器

在HTML文档中，元素的开始标记中通常包含多个属性，在CSS或jQuery中，除了使用id和class属性作为选择器外，还可以根据各种属性对由选择器查询得到的元素进行过滤。属性选择器用于选中具有某个属性或属性的属性值匹配给定值的元素集合。属性选择器包含在方括号内，而不是以冒号开头。

下面是属性选择器的一些应用举例。

1)含有属性title的P元素:

2)属性title值等于"test"的div元素:

3)属性title值不等于"test"的div元素(没有属性title的也将被选中):

4)属性title值以"te"开始的div元素:

5)属性title值含有"es"的div元素:

6)属性class值包含单词"lone"的p元素:

7)含有id属性且name属性以"es"结尾的input元素:

4.表单域属性过滤选择器

表单域过滤选择器是jQuery自定义的，不是CSS 3中的选择器，它用来处理更复杂的选择。

说明:hidden选择器可选中两种元素:一种是CSS属性设置为display: none或visibility:hidden的元素，另一种是表单中的文本隐藏域(<input type="hidden"/>)元素。

有时希望判断用户当前选中的复选框和单选按钮，这可以通过:checked选择器判断，而不能通过checked属性的值来判断，那样只能获得初始状态下的选中情况，而不是当前的选择情况。如果要判断用户在列表框中选中哪几项，则可通过:selected选择器得到。