码迷,mamicode.com
首页 > Web开发 > 详细

jQuery选择器之过滤选择器

时间:2016-11-24 18:37:21      阅读:176      评论:0      收藏:0      [点我收藏+]

标签:匹配   new   动画   body   显示   查找表   display   对象   idt   

     

 

过滤选择器类似于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选择器之过滤选择器

标签:匹配   new   动画   body   显示   查找表   display   对象   idt   

原文地址:http://www.cnblogs.com/wyy-cn/p/6098765.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!