首页 > 代码库 > JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

  总的来说,选择器引擎规则就是: $(‘查询字符串‘)。

  最常用最基本的就是:1、标签选择器(以文档元素作为选择符):$("div"); 2、id选择器(以ID作为选择符): $("#demo1"); 3、类选择器(以class作为选择符): $(".selected"); 4、群组选择器: $(".class1, .class2, .class3"); 5、后代选择器: $("p span")

  多种规则的组合将是我们工作得得力助手,下面就举些例子:

  一、层级选择器: 它是通过DOM的嵌套关系来进行元素匹配的

    A、包含选择器:$("#contain div")——匹配id为contain的元素下的所有的div,就是在给定的祖先元素下匹配所有后代元素,不一定非要是子元素。

    B、子选择器:$("#contain > .class1") ——匹配id为contain的元素所有有class1类的子元素,这在给定的父元素下匹配所有子元素,一定要是子元素,隔代就不行了。

    C、相邻选择器:$(".contain + div") ——匹配所有.contain元素的下一个紧相连的.class1兄弟元素,相当于使用next。

    D、兄弟选择器:$(".contain ~ div")——匹配.contain元素之后的所有同辈div元素,注意.contain元素之前的同辈元素不算。

  二、通过伪类来进行过滤选择

    (1)、特定位置选择器

      :first——匹配找到的第1个元素,例如:$(‘li:first‘)

      :last——匹配找到的最后一个元素,例如:$(‘li:last‘)

      :eq——匹配一个给定索引值的元素,例如:$("tr:eq(1)")

    (2)、指定范围选择器

      :even——匹配所有索引值为偶数的元素,例如:$("tr:even")

      :odd——匹配所有索引值为奇数的元素,例如:$("tr:odd")

      :gt(index)——匹配所有大于给定索引值的元素,例如:$("tr:gt(0)")

      :lt(index)——匹配所有小于给定索引值的元素,例如:$("tr:lt(2)")

    (3)、排除选择器

      :not——去除所有与给定选择器匹配的元素,例如:$("input:not(:checked)")

    (4)、可见性过滤

      :hidden——匹配所有不可见元素,或者type为hidden的元素,例如:$("input:hidden")

      :visible——匹配所有的可见元素,例如:$("tr:visible")

    (5)、内容过滤

      :contains(text)——匹配包含给定文本的元素,例如查找所有包含 "John" 的 div 元素:$("div:contains(‘John‘)")(第一次见到,先备忘一下)

      :empty——匹配所有不包含子元素或者文本的空元素,例如:$("td:empty")

      :parent——匹配含有子元素或者文本的元素,例如:$("td:parent"),与前一个相对

      :has(selector)——匹配含有选择器所匹配的元素的元素,是用于筛选的选择器,$("div:has(p)").addClass("test");给所有包含p元素的 div 元素添加一个text类

    (6)、属性过滤

      [attribute]——匹配包含给定属性的元素,例如:查找所有含有id属性的div元素 -> $("div[id]")

      [attribute=value]——匹配给定的属性是某个特定值的元素,例如:查找所有name属性是newsletter的input元素 -> $("input[name=‘newsletter‘]"),用的蛮多的

      [attribute!=value]——匹配所有不含有指定的属性,或者属性不等于特定值的元素。用法同上

      [attribue^=value]——匹配给定的属性是以某些值开始的元素,感觉有点像正则匹配,$("input[name^=‘news‘]") 

      [attribue$=value]——匹配给定的属性是以某些值结尾的元素,用法同上

      [attribute*=value]——匹配给定的属性是以包含某些值的元素,$("input[name*=‘man‘]"),name="man-news"和name="milkman"都能匹配

      [selector1][selector2][selectorN]——复合属性选择器,需要同时满足多个条件时使用。$("input[id][name$=‘man‘]")

    (7)、子选择器

      :first-child——匹配第一个子元素,例如:$("ul li:first-child"),在每个ul中查找第一个li

      :last-child——匹配最后一个子元素,用法同上

      :nth-child()——匹配其父元素下的第N个子或奇偶元素,:nth-child从1开始的(:eq()是从0算起,例如:$("ul li:nth-child(2)"),在每个ul查找第2个li。

        :nth-child(2)

        :nth-child(even)

        :nth-child(odd)

        :nth-child(3n)

参考:1、http://www.cnblogs.com/xuxiuyu/p/5989278.html#3552284

   2、http://hemin.cn/jq/nthChild.html

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)