十二、内容过滤器，可见性过滤器，属性过滤器，子元素过滤器，表单类别过滤器，表单属性过滤器...

所有内容过滤器列表如下：

名称	说明	举例
: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最有用的选择器之一。

转载于:https://www.cnblogs.com/tomkillua/archive/2012/08/08/2627730.html