• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.8 本章总结

伪类选择器,可以看成是一种特殊的选择器。伪类选择器都是以英文冒号“:”开头。jQuery伪类选择器是参考CSS3伪类选择器的形式来设计的。

在jQuery中常见的伪类选择器分为以下6种:

  • (1)简单伪类选择器;
  • (2)子元素伪类选择器;
  • (3)可见性伪类选择器;
  • (4)内容伪类选择器;
  • (5)表单伪类选择器;
  • (6)表单属性伪类选择器;

一、简单伪类选择器

在jQuery中,最常用的伪类选择器,我们称为“简单伪类选择器”。

jQuery简单伪类选择器
伪类选择器 说明
:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素(非子元素)
:last或last() 选择某元素的最后一个元素(非子元素)
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素,索引值index是一个整数,从0开始
:lt(index) 选择所有小于索引值的元素,索引值index是一个整数,从0开始
:gt(index) 选择所有大于索引值的元素,索引值index是一个整数,从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素(锚点)

二、子元素伪类选择器

子元素伪类选择器,就是选择某一个元素下面的子元素的方式。在jQuery中,子元素伪类选择器分为2大类。

子元素伪类选择器(1)
选择器 说明
:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素,n的值为“整数|odd|even”
:only-child 选择父元素中唯一的子元素(该父元素只有一个子元素)
子元素伪类选择器(2)
选择器 说明
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)

其中,第1类选择器不分元素类型,第2类选择器区分元素类型。第2类选择器只是比第1类选择器多了一层“type(元素类型)”的限制。

三、可见性伪类选择器

可见性伪类选择器,就是根据元素的“可见”与“不可见”这2种状态来选取元素。

jQuery可见性伪类选择器
选择器 说明
:hidden 选取所有不可见元素
:visible 选取所有可见元素,与:hidden相反

“:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。

在jQuery中,可见性伪类选择器用得比较少,了解一下即可。

四、内容伪类选择器

内容伪类选择器,就是根据元素中的文字内容或所包含的子元素特征来选择元素,其文字内容可以模糊或绝对匹配进行元素定位。

jQuery内容伪类选择器
选择器 说明
:contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素(跟:empty相反)

五、表单伪类选择器

表单伪类选择器,指的是根据“表单类型”来选择的伪类选择器。

jQuery表单伪类选择器
选择器 说明
:input 选择所有input元素
:button 选择所有普通按钮,即type="button"的input元素
:submit 选择所有提交按钮,即type="submit"的input元素
:reset 选择所有重置按钮,即type="reset"的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域

六、表单属性伪类选择器

表单属性伪类选择器,就是根据表单元素的标签属性来选取某一类表单元素。

jQuery表单属性伪类选择器
选择器 说明
:checked 选择所有被选中的表单元素,一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素,一般用于input、select和textarea
:disabled 选择所有不可用元素,一般用于input、select和textarea
:read-only 选择所有只读元素,一般用于input和textarea
:focus 选择获得焦点的元素,常用于input和textarea

【后话】:jQuery伪类选择器非常多,我们不要求大家在第1遍的学习中全部掌握(也不可能做到),但是要求大家至少要认真去理解一遍,等到以后真正需要的时候再回来翻一翻。我们只有在实战中大量锻炼,才有可能彻底掌握伪类选择器。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部