jQuery选择器之过滤选择器

 

过滤选择器类似于CSS中的伪类选择器，以冒号开头。过滤选择器根据其过滤规则分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、以及表单对象属性过滤选择器。

1.基本过滤选择器

名称	说明	举例
：first	匹配到第一个元素	查找表格的第一行：$("tr:first")
:last	匹配到最后一个元素	查找表格的最后一行:$("tr:last")
:not(selector)	去除所有与给定选择器相匹配的元素	查找所有未选中的input元素：$("input:not(:checked)")
:even	匹配所有索引值为偶数的元素，从0开始计数	查找表格的1,3,5.....行：$("tr:even")
:odd	匹配所有索引值为奇数的元素，从0开始计数	查找表格的2,4,6.....行：$("tr:odd")
:eq(index)	匹配一个给定索引值得元素，从0开始计数	查找第二行：$("tr:eq(1)")
:gt(index)	匹配所有大于给定索引值的元素，从0开始计数	查找第二行，第三行：$("tr:gt(0)")
:lt(index)	匹配所有小于给定索引值的元素，从0开始计数	查找第一行，第二行：$("tr:lt(2)")
:header	选择所有h1,h2,h3一类的header标签	给页面内所有标题加上背景色:$(":header").css("background","")
：animated	匹配所有正在执行动画效果的元素	$("#fun").click(function(){$("div:not(:animated)")}).animated({left:"+=20"},1000);});

 

 

 

 

 

 

 

 

 

 

在日常工作中，基本过滤选择器通常用在表格中。

2.内容过滤选择器

    主要用于对html文本进行过滤选择。

名称	说明	举例
：contains(text)	匹配包含给定文本的元素	查找所有包含John的div元素：$("div:contains('John')")
:empty	匹配所有不包含子元素或者文本的元素	查找所有不包含子元素或者文本的td元素：$("td:empty")
:has(selector)	匹配所有选择器匹配的元素的元素	查找所有包含p元素的div元素：$("div:has(p)")
:parent	匹配所有子元素或者文本的元素	查找所有子元素或者文本的td元素： $("td:parent")

3.可见性过滤选择器

      主要查找隐藏的元素和可见的元素

名称	说明	举例
：hidden	匹配所有不可见的元素	查找所有不可见的tr元素：$("tr:hidden")
:visible	匹配所有可见的元素	查找所有可见的tr元素：$("tr:visible")

   :hidden匹配如下几种格式的元素：

• 具有CSS属性display属性值为none的值
• HTML表单元素中的隐藏域
• 宽度和高度被显示的设置为0
• 由于祖先元素为隐藏而导致无法显示在页面上

：visible是指在屏幕上占用布局空间的元素，可见性元素的宽度和高度大于0

注意：CSS属性visibility:hidden或者是opactity被认为可见。

4.属性过滤选择器

   基于HTML元素的属性，可以是不同的属性，也可以是相同属性的不同值

名称	说明	举例
[attibute]	匹配包含给定属性的元素	查找所有包含id属性的div元素：$("div[id]")
[attibute=value]	匹配给定的属性是某个特定值得元素	查找所有name属性是newsletter的input元素：$("input[name='newsletter']")
[attribute!=value]	匹配给定的元素不包含某个特定值得元素	查找所有name属性不是newsletter的input元素：$("input[name!='newsletter']")
[attribute^=value]	匹配给定的属性是以某个特定值开始的元素	$("input[name^='news']")
[attribute$=value]	匹配给定的属性是以某个特定的值结尾的元素	$("input[name$='letter']")
[attribute*=value]	匹配给定的属性是包含某个特定值的元素	$("input[name*='man']")
[attributeFilter1] [attributeFilter2] [attributeFilter3]	复合属性选择器，需要同时满足多个条件使用	找到所有包含id属性，并且它的name属性是以man结尾的input元素： $("input[id][name$='man']")

5.子元素过滤器

    这个过滤器是指根据父元素中的某些过滤规则来选择子元素的，选择父元素中特定的子元素

名称	说明	举例
：nth-child(index/ even/odd/ equation)	匹配其父元素下的子元素，从1开始 ：nth-child(even) ：nth-child(odd) ：nth-child(3n) ：nth-child(2) ：nth-child(3n+1)	在每个ul中查找第二个li: $("ul li:nth-child(2)")
:first-child	为每个父元素匹配第一个子元素	在每个ul中查找第一个li: $("ul li:first-child")
:last-child	为每个父元素匹配最后一个子元素	在每个ul中查找最后一个li: $("ul li:last-child")
:only-child	如果某个元素是父元素中的唯一子元素，那将会被匹配；如果不是，将不会被匹配	在ul中查找唯一的子元素li:$("ul li:only-child")

注意：子元素过滤器与基本过滤器的区别就是基本过滤器只为一个父元素匹配元素；而子元素过滤器会为每个父元素匹配相符合的子元素。

6.表单对象属性过滤器

表单元素的属性enabled、disabled、selected以及checked

名称	说明	举例
:enabled	匹配所有可用元素	查找所有可用的input元素：$("input:enabled")
:disabled	匹配所有不可用元素	查找所有不可用的input素：$("input:disabled")
:checked	匹配所有被选中的元素	查找所有选中的复选框元素:$("input:checked")
:selected	匹配所有被选中的option元素	查找所有选中的选项元素：$("select option:selected")

 

转载于:https://www.cnblogs.com/wyy-cn/p/6098765.html