[分享]jQuery的各种选择器

基本选择器

• 通配符选择器：匹配所有

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对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象