jQuery选择器

　　jquery中的选择器共分为四大类。其简单结构如下：

　　基本选择器

　　　　　　  |-----ID选择器

　　　　　　  |-----类选择器

　　　　　　  |-----元素选择器

　　　　　　  |-----*选择器

　　　　　　  |-----联合选择器

　　层级选择器

　　　　　　  |-----祖先-后代选择器

　　　　　　  |-----父辈-字辈选择器

　　　　　　  |-----同辈选择器

　　过滤选择器

　　　　　　  |-----基本过滤选择器

　　　　　　  |-----内容过滤选择器

　　　　　　  |-----可见性过滤选择器

　　　　　　  |-----属性过滤选择器

　　　　　　  |-----子元素过滤选择器

　　　　　　  |-----表单对象属性过滤选择器

　　表单选择器

　　对于jquery选择器的详细描述如下：

　　一.  基本选择器

　　1.  ID选择器

　　$('#idName'):返回一个封装了指定id的dom元素的jQuery对象。

　　注：如果有多个相同的id值，则以第一个id为准。若没有这个id，则返回空的jquery对象

　　2.  类选择器（class）

　　$('.className'):返回封装了带有指定css类名的所有DOM元素的jQuery对象，可能有一个或多个。若没有这个class则返回空jquery对象。

　　3.  元素选择器（element）

　　$('span'):返回封装了指定标签名称的DOM元素的jQuery对象。若没有这个标签名称则返回空jquery对象。

　　4.  *选择器

　　$('*'):选择文档中的所有元素。

　　5.联合选择器

　　(′div,p,span′):选择div,p,span标签的元素。在这种选择器中，可以在">(′div,p,span′):选择div,p,span标签的元素。在这种选择器中，可以在(′div,p,span′):选择div,p,span标签的元素。在这种选择器中，可以在()中添加多个选择器，而每个选择器也可以很复杂，比如：

　　$('div p:first-child,p>span:nth-child(3),span:not(.one,.two)')等。

　　二.  层级选择器

　　1.  祖先-后代选择器

　　$('div p'):查找div中所有后代中的p元素 

　　2.  父辈-子辈选择器

　　$('div>p'):查找div中所有的子代中的p元素

　　3.  同辈选择器

　　a.  $('h2 + p'):查找和h2相邻的p元素，并且h2和p必须是同级元素且相邻的,如


    
title

    
content




outer

　　这段代码的结果是content。

　　b.  $('h2~p'):查找h2后面的所有的p元素，并且h2和p必须是同级元素,但是不需要是相邻的，如


    
p1

    span1
    
p2

    span2
    
p3

    span3

　　 这段代码中查找的是class为a的后面所有的同级的span元素，将其内容改为11111，可见结果是三个span的内容都为11111。

　　三.  过滤选择器

　　1.  基本过滤选择器

　　a.  首尾元素选择器

　　$('div:first'):查找第一个div元素

　　$('div:last'):查找最后一个div元素
　　注：这两个选择器值选择一个元素，因此从上到下只要找到一个符合条件的元素就立即返回


    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
    

    
    
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    •

　　上述代码的结果是第一个ul的第一个li中的1。

　　b.  非选择器

　　$('span:not(#d)'):选择ID不是d的span元素

　　注：:not()括号内也为选择器，比如:not(ul li:first-child))或者更加复杂的选择器都可以组合。

    
    
  • 222
    • 
    
  • 222
    • 
    
  • 222
    • 
    
  • 222
    • 
    
  • 222
    • 
    
  • 222
    •

　　这段代码的结果是第2，3的text为111。

　　c.  奇偶选择器

　　$('div:even'):查找dom中索引值为基数的div元素

　　注：对于$('div:even')来说，这种选择方式是不区分父辈还是字辈的，是统一进行索引编号的。但是这种情况基本使用不到的。另外索引值使用0开始的，因为0也算偶数，所以第一个都是被选择的。

0                    -------index = 0 even
    
1                -------index = 1
        
1.1
  -------index = 2 even
    

    
2
         -------index = 3



3
             -------index = 4 even

　　这段代码就说明了当出现使用(′div:even′)时的情况，其结果是将class为one,three,five的div的test输出。但是倘若我们不希望将子类的子类中的元素也进行编码，只对最外围的div进行选取，那么选择器就要改成为父辈−子辈选择器（当前是祖先−后代选择器):">(′div:even′)时的情况，其结果是将class为one,three,five的div的test输出。但是倘若我们不希望将子类的子类中的元素也进行编码，只对最外围的div进行选取，那么选择器就要改成为父辈?子辈选择器（当前是祖先?后代选择器):(′div:even′)时的情况，其结果是将class为one,three,five的div的test输出。但是倘若我们不希望将子类的子类中的元素也进行编码，只对最外围的div进行选取，那么选择器就要改成为父辈?子辈选择器（当前是祖先?后代选择器):('document>div:even')，那么此时的输出结果就是将class为one的div元素中的内容输出。

　　$('div:odd'):查找dom中索引值为偶数的div元素。

　　d.  范围选择器

　　$('li:eq(0)'):选取索引值为0的li元素。

　　这种选择器和奇偶选择器一样，是不区分父辈还是子辈的，都是统一进行索引编号。如下：

    
    
  • 
        
      
            
    • 1.1
      • 
            
    • 1.2
      • 
            
    • 1.3
      • 
            
    • 1.4
      • 
        
    
    
    • 
    
  • 2
    • 
    
  • 3
    • 
    
  • 4
    • 
    
  • 5
    •

　　上述的代码中寻找的是class为list的ul中的第2个li（因为索引是从0开始），由于第一个li中嵌套了一个ul，这个ul中又有四个li，那么最终的结果就将是1.1。倘若不希望将li的子代的ul中的li也进行编码索引，就将其改为父辈-子辈选择器：$('ul.list>li:eq(1)')，那么此时的结果就是2了。

　　$('ul li:gt(3)):在ul中查找索引值大于3的li。

　　$('ul li:lt(4)):在ul中查找索引值小于4的li。

　　e.  标题元素选择器

　　$(':header')：查找h1-h6的元素。

　　2.  内容过滤选择器

　　$('p:contains("text")')：选择p标签中包含‘text'字符串的元素。

1111


2222


1122


3333


4444


3344

　　这段代码选择内部文本包含’22‘的p标签元素，并将其文本设置为’5555‘。结果是第2、3个p标签元素被选择。

　　$('.p:empty'):选择不包含文本并且不包含子元素的元素；

　　$('div:has(p:contains("text")'):选择包含p标签且这个p含有’text字符串的div元素。

　　一开始我把这个形式的选择器和祖先-后代选择器弄混了，但二者的区别是祖先-后代选择器的返回结果是后代元素，而:has返回的是祖先元素


    

        123

　　在这段代码中，(′div:has(.one)′)最终选择的就是div，但是倘若写成这样的话：">(′div:has(.one)′)最终选择的就是div，但是倘若写成这样的话：(′div:has(.one)′)最终选择的就是div，但是倘若写成这样的话：('div :has(.one)')，最终选择的就是p了，因为中间加了空格之后就变成了选择div中其后代元素class为one的元素，那么可想而知最终选择结果可以为多个。

　　$('div:parent'):选择div中有内容的元素，就是包含子元素或文本内容的元素。(一开始以为是父元素......)。




    
    Document
    


    

        

            

                123

　　上面的代码是完整的html代码，那么使用了$(':parent')之后，共有9个元素被选择：html,head,title,body,div(class=two),div,p,span,script。注意这个选择器和:has选择器的空格问题。这个和:empty选择器是相反的。

　　3.  可见性过滤选择器

　　$(':hidden')：匹配不可见元素。

　　$(':visible'): 匹配可见元素。

　　对于隐藏元素，这里要提到display:none 和 visibility:hidden。而要理解这两个的区别从三个方面考虑：

　　　　空间占据：设置隐藏后受否还占据空间；

　　　　回流与渲染：这部分知识在http://www.cnblogs.com/jyybeam/p/5776667.html

　　　　株连性 ：若祖先元素发生改变，后代元素是否也会发生改变。

　　对于display:none，由于被设置为这一样式的容器不会占据空间，因此会发生重绘，而且其后代元素也会被设置为display:none，被株连。

　　而visibility:hidden，容器依旧会占据空间，因此不会发生重绘，而对于后代元素如果应用了visibility:visible，则依旧会显示出来，不会被株连。如下：

　　此时虽然span的祖先元素div被设置为visibility:hidden，但是由于span本身被设置为visibility:visible，所以span依旧会显示出来。

　　那么，言归正传。这个:hidden，到底指的是哪个呢？看下面的代码：




    
    Document

　　最后的答案是5个：head，meta,title,script,script，看到并没有div，说明:hidden并不适用于visibility。接下来：

　　答案是9个！，那么问题来了，即便算上div不是应该6个吗？答案就是犹如display的“株连性”，他的后代元素也被设定为display:none了，因此在上面的基础上又增加了div(.two),div,p,span这四个，总共加起来是9个。ok！

　　4.  属性过滤选择器

　　$('[class]'):选择有class属性的元素。

　　$('[class][id][d]'):选择有class、id、d属性的元素。

　　注：在这种选择器中支持自定义的属性

　　$('[class=one]'):选择class属性为one的元素。

　　$('[class!=one]'):选择class属性不为one的元素。

　　$('[class^=one]'):选择class属性以one开头的元素。

　　$('[class$=one]'):(′[class">选择class属性以one结尾的元素。

　　$('[class|=one]'):选择class属性为one或以one-开头的元素

　　注：是以‘one-’开头，而不是‘one'开头


    

        

            123
            222
            333
            444

　　上面的代码的结果是2，也就是class分别为one和one-two的元素。

　　$('[class~=one]')：选择clss属性值为one或包含’one‘字符串的元素。

　　注：这种选择器表示属性值必须以空格分割，或者属性值等于one。


    

        

            123
            222
            333
            444

　　结果是2，选择到的是class分别为one和‘one two’的元素。

　　$('[class*=one]'):选择属性值包含one的元素。

　　5.  子元素过滤选择器
　　$('div p:first-child):查找div中的第一个p元素。

　　注：用到first-child时p必须是div的第一个子元素，因此这个选择器是选择第一个子元素，如果这个子元素不是p的话就返回空jquery对象


    span1
    
p1

    
p2

    span2
    
p3

    span3

　　这段代码会使第一个span的text为222222。而div中的第一个p的text不会是11111，因为它不是div的第一个子元素。

　　$('div p:last-child):查找div中最后一个为p标签的子元素。

　　注：last-child和first-child一样，last-child必须是div中的最后一个子元素，如果它不是p的话，返回空对象

　　$('p:nth-child(2)'):选择第二个p元素。

　　注：此处的序号不是以0开始的，而是从1开始的。


    
1

    
2

    
3

    
4

　　这段代码的结果就是2，选择的就是第二个p元素。

　　$('p:nth-child(2n+1):选择第2n+1(n = 0,1,2,3....)个p元素

　　在这里n是从0开始的自然数，可以选择多个元素。


    
1

    
2

    
3

    
4

    
5

    
6

　　这段代码的结果是3个，选择到的是第1、3、5个p元素。

　　$('span:only-child'):选择父节点只有一个span子节点的那个子节点。


    
1
　　
    
2

    
3

    
4

    
5

    span
    
6





    span

　　结果是span，选择的是第二个div中的那个span元素。

　　$('p:nth-last-child(2)'):选择倒数第二个p元素。

　　在nth-last-child的括号中可以添加数字、数学表达式（2n+3等）、event/odd等。

　　$('p:first-of-type'):选择子元素中第一个类型是p标签的子元素。


    
1

    
2

    
3

    
4

    
5

    span
    
6

　　这段代码的结果是span，选择到的是div中唯一的一个span元素。可以看到这个选择器与first-child的不同是first-child选择的必须是第一个子元素。同样的如果选择器是$('p:first-of-type')，那么结果就是1，选择到的就是div中类型为p的第一个p元素。

　　$('p:last-of-type'):选择到的类型为p元素的最后一个p元素。

　　$('p:only-of-type'):选择到是父元素中唯一一个类型的p元素。


    1
    2
    3
    
3434

    4

　　上述代码的结果是3434，选择到的是div中唯一一个p元素。

　　$('p:nth-of-type(2)'):选择父元素中的第2个元素。

　　$('p:nth-of-type(2)'):选择父元素中的倒数第2个元素。

　　6.  表单对象属性过滤器

　　(′:disabled′)和">(′:disabled′)和(′:disabled′)和(':enabled')：选择可用或不可用元素。匹配范围包括input,textarea,select。

　　$(':checked'):选择选中的单选框或复选框元素。

　　$(':selected'):选择下拉框中被选择的option元素。

　　四.  表单元素选择器

　　包括:input,:select,:file,:password,:button,:reset,:submit,:checkbox,:text,:raido。这些都比较简单，不再详述。

　　五.  其他

　　之所以命名为其他，是因为在网上好多的关于jquery选择器的文章并没有将一些不常见的选择器进行描述，但是我在一些源代码中却看到了一些。因此，就多加了一类这样的选择器。在http://www.365mini.com/page/jquery-select-nth-of-type-selector.htm这个网站有中文手册，比较详细。

　　$(':focus'):选择当前获得焦点的元素

　　$(':root'):选择文档的根目录，实际上就是html标签。

　　$(':target'):匹配id属性值等于当前文档URI的锚点名称的元素。如URI为http://www.365mini.com/#top，则选择ID为top的元素。

　　$(':lang(en)'):选择指定语言的所有元素。

javascrtip知识点

相关

标签