基本选择器
- 通配符选择器:匹配所有
console.log($('*'));
- 组合选择器:多个选择器之间使用逗号分隔(并集)
console.log($('#d1,.cls'));
- 组合选择器:多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
层级选择器
- 指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
- 指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
- siblings()方法:获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
基本过滤选择器
- 在指定范围匹配的元素中进行筛选
//找到div里第一个元素
console.log($('div:first'));
//找到div里最后一个元素
console.log($('div:last'));
- 索引值为偶数时:奇数元素;索引值奇数时:偶数元素
//指定div中的偶数元素
console.log($('div:even'));
//指定div中的奇数元素
console.log($('div:odd'));
- :eq(index):index表示索引值
//指定div元素索引值为0的元素
console.log($('div:eq(0)'));
//指定div元素索引值大于2的元素
console.log($('div:gt(2)'));
//指定div元素索引值小于2的元素
console.log($('div.lt(2)'));
- :header:匹配h1~h6元素
- :animated: 只能匹配由jQuery实现的动画
- :not:不是not里面的元素
内容过滤选择器
- :contains:元素只要包含此文本即可
- :empty:匹配所有不包含子元素或者文本的空元素
- :parent:匹配含有子元素或者文本的元素
- :has():匹配含有选择器所匹配的元素的元素
可见性过滤选择器
- :hidden选择器
不能匹配css样式属性visibility设置为hidden的隐藏元素
还能匹配HTML页面中不做任何显示效果的元素
尽量确定元素类型或指定范围
- :visible选择器
匹配CSS样式属性visibility设置为hidden的隐藏元素
当visibility设置为hidden时的元素,依旧占有页面空间
还能匹配HTML页面中HTML和body元素
属性过滤选择器
- [attr]过滤选择器:匹配包含给定属性的元素
- [attr=value]过滤选择器:匹配给定的属性是某个特定值的元素
- [attr!=value]过滤选择器:匹配所有不含有指定的属性,或者属性不等于特定值的元素
- [attr^=value]过滤选择器:匹配给定的属性是以某些值开始的元素
- [attr$=value]过滤选择器:匹配给定的属性是以某些值结尾的元素
- [attr*=value]过滤选择器:匹配给定的属性是以包含某些值的元素
- 组合属性过滤选择器:匹配元素需要同时满足多个属性过滤选择器
子元素过滤选择器
- :nth-child()过滤选择器:匹配其父元素下的第N个子或奇偶元素,它的index位置是从1开始,表示第几个
- :first-child过滤选择器:匹配第一个子元素
- :last-child过滤选择器:匹配最后一个子元素
- :only-child过滤选择器:如果某个元素是父元素中唯一的子元素,那将会被匹配
表单选择器
- :enabled过滤选择器:匹配所有可用元素
- :disabled过滤选择器:匹配所有不可用的元素
- :checked过滤选择器:匹配所有选中的被选中元素(复选框、单选框)
- :selected过滤选择器:匹配所有选中的<option>元素
由于jQuery对象是类数组对象,即使匹配的元素只有一个,返回的结果依旧是类数组对象