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