(2)jQuery篇 —— jQuery选择器

1. 基本选择器

(1) id选择器: $( '#div1' )  // 选择id为div1的元素

(2) 标签选择器: $( 'a' )  // 选择所有的a标签

(3) 类选择器: $( '.wrap' )  // 选择class为wrap的元素

(4) 通配符选择器: $( '*' )  // 选择所有的页面元素

(5) 组合选择器: $( '#div1 , a , .wrap' )  // 中间需要用逗号隔开

2. 层次选择器

(1) 后代选择器: $( '.wrap img' )  // 选择class为wrap的元素下的所有img标签,注意中间的空格哦

(2) 父子选择器: $( '.div1 > li' )  // 选择class为div1下面的直接子节点li标签,注意,不是太懂的可以参考CSS选择器

(3) 相邻选择器: $( '.div2 + p' )  // 选择class为div2后面相邻的p标签

(4) 同级选择器: $( '.div3 ~ p' )  // 选择class为div3后同级的p标签

对于这里有不懂或不清楚的地方,我推荐两本书《图解CSS3核心技术与案例实战》和《CSS3专业网页开发指南》,可以加深对CSS选择器的理解。

如果有需要PDF版本的,可以留言留下邮箱,我这里有高清的版本,可以免费发给你。

3. 过滤选择器

基本选择器:

(1) :first : 匹配找到的第一个元素

(2) :last : 匹配找到的最后一个元素

(3) :not(selector) : 去除所有与给定选择器匹配的元素

(4) :odd : 匹配所有索引值为奇数的元素,从0开始计数

(5) :even : 匹配所有索引值为偶数的元素,从0开始计数

(6) :eq : 匹配一个给定索引值的元素

(7) :gt : 匹配所有大于给定索引值的元素

(8) :lt : 选择结果集中索引小于N的elements

(9) :header : 匹配h1、h2、h3...的header标签

(10) :animated : 匹配所有正在执行动画效果的元素

内容过滤选择器

(11) :contains(text): 匹配包含给定文本的元素

(12) :empty : 匹配所有不包含子元素或者文本的空元素

(13) :has : 匹配含有选择器所匹配的元素的元素  例如:$( 'div:has(p)' ).addClass('test')  // 给所有包含p元素的div添加一个text类

(14) :parent : 匹配含有子元素或者文本的元素

可见性过滤选择器

(12) :hidden : 匹配所有的不可见元素

(13) :visible : 匹配所有的可见元素

属性过滤选择器

(14) [attribute] : 匹配包含给定属性的元素

(15) [attribute=value] : 匹配包含给定属性是某个特定值的元素

(16) [attribute!=value] : 匹配包含给定属性不包含某个特定值的元素

(17) [attribute^=value] : 匹配包含给定属性是以某个特定值开头的元素

(18) [attribute$=value] : 匹配包含给定属性是以某个特定值结尾的元素

(19) [attribute*=value] : 匹配包含给定属性是包含某些值的元素

(20) [attributeFilter1][attributeFilter2][attributeFilterN] : 复合属性选恶气,需要同时满足多个条件时使用

子元素过滤选择器

(21) :nth-child() : 匹配其父元素下第N个子元素或奇偶元素

(22) :first-child : 匹配第一个子元素

(23) :last-child : 匹配最后一个子元素

(24) :only-child : 如果某个元素是父元素中唯一的子元素,则匹配;否则,不匹配

表单对象属性过滤器

(25) :enabled : 匹配所有可用元素

(26) :disabled : 匹配所有不可用元素

(27) :checked : 匹配所有被选中元素(不包括select下的option)

(28) :selected : 匹配所有选中的option元素

表单选择器

(29) :input  : 匹配所有input、textarea、select和button元素

(30) :text : 匹配所有的文本框

(31) :password : 匹配所有的密码框

(32) :radio : 匹配所有的单选按钮

(33) :checkbox : 匹配所有的复选按钮

(34) :submit : 匹配所有的提交按钮

(35) : image :匹配所有图像域

(36) :reset : 匹配所有的重置按钮

(37) :button : 匹配所有的按钮

(38) :file : 匹配所有的文件域

原文地址:https://www.cnblogs.com/luohaoran/p/6051224.html