所有内容过滤器列表如下:
名称 |
说明 |
举例 |
:contains(text) |
匹配包含给定文本的元素 |
$(“div:contains(‘john’)”)查找所有包含JOHN的div |
:empty |
匹配所有不包含子元素或者文本的空元素 |
$(“td:empty”) |
:has(selector) |
匹配含有选择器所匹配的元素的元素 |
$(“div:has(p)”).addClass(“test”)给所有包含p元素的div元素添加一个text类 |
:parent |
匹配含有子元素或者文本的元素 |
$(“td”:parent)查找所有含有子元素或者文本的td元素 |
内容过滤器使用要点:
内容过滤器中的contains和has是经常使用的过滤器。一个用来查找包含“指定文本”的元素,一个用来查找包含“指定元素”的元素。
如果contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
has是在已经选中的元素内部查找子元素。可以将not过滤器和has组合使用,查找“不含有img元素的div”。$(div:not(:has(img)));
可见性过滤器:
名称 |
说明 |
举例 |
:hidden |
匹配所有的不可见元素 |
$(“tr:hidden”)查找所有display为none的tr元素 |
:visible |
匹配所有的可见元素 |
$(“tr:visible”)查找所有display不为none的tr元素 |
可见性过滤器根据元素的display属性选择元素,特别需要注意的是css的visibility属性也能控制元素的实现。但是仍然占据页面空间,可以理解为visibility样式与可见性过滤器无关。
属性过滤器
名称 |
说明 |
举例 |
[attribute] |
匹配包含给定属性的元素 |
$(“div[id]”)查找所有含有ID属性的div元素 |
[attribute=value] |
匹配给定的属性是特定值的元素 |
$(“input[name=’letter’]”).attr(“checked”,true)查找所有name属性是letter的input元素。 |
[attribute!=value] |
匹配给定的属性不包含某个特定值的元素 |
$(“input[name!=’letter’]”).attr(“checked”,true)查找name属性不是letter的input元素 |
[attribute^=value] |
匹配给定的属性是以某些值开始的元素 |
$(“input[name^=’’]”) |
[attribute$=value] |
匹配给定的属性是以某些值结尾的元素 |
$(“input[name$=’letter’]”)查找所有name以letter结尾的input元素 |
[attribute*=value] |
匹配给定的属性是以包含某些值的元素 |
$(“input[name*=’man’]”)查找所有name包含‘man’的input元素 |
[atttibutefilter1] [atttibutefilter2] [atttibutefilterN] |
复合属性选择器,需要同时满足多个条件时使用 |
$(“input[id][name$=’man’]”)找到所有含有id属性,并且他的name属性是以man结尾的 |
属性过滤器是最常使用的过滤器,所以如果记不住花样繁多的jQuery选择器,那么记住基础选择器和属性过滤器就可以完成大部分的任务。在使用属性过滤器时尤其要注意,尽量在过滤前缩小范围,否则默认*在所有元素中查找元素。
子元素过滤器
名称 |
说明 |
举例 |
:nth-child(index/even/odd/qeuation) |
匹配其父元素下的第N个子或奇偶元素 Eq()从0开始 Nth-child从1开始 |
$(“ul li:nth-child(2)”)在每个ul查找第二个li |
:first-child |
匹配第一个元素 |
$(“ul li:first-child”)在每个ul中查找第一个li |
:last-child |
匹配最后一个元素 |
$(“ul li:last-child”)在每个ul中查找最后一个li |
:only-child |
如果某个元素是父元素中唯一的子元素,那么会被匹配 |
$(“ul li:only-chlid”)在ul中查找是唯一子元素的li |
子元素过滤器不常使用。使用时需要注意nth-child过滤器是从1开始的,而eq是从0开始的。
表单类别过滤器
名称 |
说明 |
举例 |
:input |
匹配所有input,textarea,select和button元素 |
$(“:input”)查找所有的form元素 |
:text |
匹配所有文本框 |
$(“:text”) |
:password |
匹配所有密码框 |
$(“:password”) |
:radio |
匹配所有单选按钮 |
$(“:radio”) |
:checkbox |
匹配所有复选框 |
$(“:checkbox”) |
:submit |
匹配所有提交按钮 |
$(“:submit”) |
:image |
匹配所有图像域 |
$(“:image”) |
:reset |
匹配所有重置按钮 |
$(“:reset”) |
:button |
匹配所有按钮 |
$(“:button”) |
:file |
匹配所有文件域 |
$(“:file”) |
除了input过滤器,几乎每个表单类别过滤器都对应一个input元素的type值。大部分表单类别过滤器可以使用属性过滤器替换。
button是没有浏览器默认行为的表单元素。
表单属性过滤器
名称 |
说明 |
解释 |
:enabled |
匹配所有可用元素 |
$(“input:enabled”)查找可用的input元素 |
:disabled |
匹配所有不肯用元素 |
$(“input:disabled”)查找所有的不可用的input元素 |
:checked |
匹配所有的被选中元素 复选框单选框包括select中的option |
$(“input:checked”)查找所有选中的复选框元素 |
:selected |
匹配所有选中的option元素 |
$(“select option:selected”)查找所有选中选项的元素 |
表单属性过滤器使用要点:
表单属性过滤器能够快速选中页面上特殊属性值的表单元素,这是jQuery最有用的选择器之一。