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 : 匹配所有的文件域