首页 > 代码库 > jQuery选择器之过滤选择器

jQuery选择器之过滤选择器

2024-08-23 00:36:18   214人阅读

     

 

过滤选择器类似于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.子元素过滤器

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

jQuery选择器之过滤选择器


联系
我们