zoukankan      html  css  js  c++  java
  • 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: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必须是同级元素且相邻的,如

    <div>
        <h2>title</h2>
        <p>content</p>
    </div>
    <p>outer</p>
    <script>
        alert($('div+p').text());
    </script>

      这段代码的结果是content。

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

    <div>
        <p class = 'a'>p1</p>
        <span>span1</span>
        <p>p2</p>
        <span>span2</span>
        <p>p3</p>
        <span>span3</span>
    </div>
    <script>
        $(function(){
            $('.a+span').text('11111');
        });
    </script>

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

      三.  过滤选择器

      1.  基本过滤选择器

      a.  首尾元素选择器

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

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

    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <script>
        $(function(){
            alert($('ul li:first').html());
        });
    </script>

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

      

      b.  非选择器

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

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

    <ul>
        <li class = 'd'>222</li>
        <li class = 'd'>222</li>
        <li class = 'd'>222</li>
        <li>222</li>
        <li>222</li>
        <li class = 'd'>222</li>
    </ul>
    <script>
        $(function(){
            $('.d:not(ul>li:first-child):not(ul>li:last-child)').text('111');
        });
    </script>

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

      c.  奇偶选择器

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

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

    <div class = 'one'>0                    -------index = 0 even
        <div class = 'two'>1                -------index = 1
            <div class = 'three'>1.1</div>  -------index = 2 even
        </div>
        <div class = 'four'>2</div>         -------index = 3
    </div>
    <div class = 'five'>3</div>             -------index = 4 even
    <script>
        $(function(){
            $('div:even').each(function(){
                alert($(this).text());
            });
        });
    </script>

      这段代码就说明了当出现使用$('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元素。

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

    <ul class = 'list'>
        <li>
            <ul>
                <li>1.1</li>
                <li>1.2</li>
                <li>1.3</li>
                <li>1.4</li>
            </ul>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        $(function(){
            alert($('ul.list li:eq(1)').html());
        });
    </script>

      上述的代码中寻找的是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'字符串的元素。

    <p>1111</p>
    <p>2222</p>
    <p>1122</p>
    <p>3333</p>
    <p>4444</p>
    <p>3344</p>
    <script>
        $(function(){
            $('p:contains("22")').text("5555");
        });
    </script>

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

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

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

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

    <div>
        <p>
            <span class = 'one'>123</span>
        </p>
    </div>
    <script>
        $(function(){
            alert($("div:has(.one)").html());
        });
    </script>

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src = 'zhongjian/js/jquery-1.11.2.min.js' type = 'text/javascript'>1</script>
    </head>
    <body>
        <div class = 'two'>
            <div>
                <p>
                    <span class = 'one'>123</span>
                </p>
            </div>
        </div>
        <script>
            $(function(){
                alert($(':parent').html());
            });
        </script>
    </body>
    </html>

      上面的代码是完整的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,则依旧会显示出来,不会被株连。如下:

    <div class = 'two' style = 'visibility:hidden'>
        <div>
            <p>
                <span class = 'one' style = 'visibility:visible'>123</span>
            </p>
        </div>
    </div>

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src = 'zhongjian/js/jquery-1.11.2.min.js' type = 'text/javascript'>1</script>
    </head>
    <body>
        <div class = 'two' style = 'visibility:hidden'>
            <div>
                <p>
                    <span class = 'one'>123</span>
                </p>
            </div>
        </div>
        <script>
            $(function(){
                alert($(':hidden').length);
            });
        </script>
    </body>
    </html>

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

    <div class = 'two' style = 'display: none'>
        <div>
            <p>
                <span class = 'one'>123</span>
            </p>
        </div>
    </div>
    <script>
        $(function(){
            alert($(':hidden').length);
        });
    </script>

      答案是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属性以one结尾的元素。

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

      注:是以‘one-’开头,而不是‘one'开头

    <div class = 'two'>
        <div>
            <p>
                <span class = 'one' id = 'id_span' d = 'dat'>123</span>
                <span class = 'one two'>222</span>
                <span class = 'one-two'>333</span>
                <span class = 'onetwo'>444</span>
            </p>
        </div>
    </div>
    <script>
        $(function(){
            alert($('[class|=one]').length);
        });
    </script>

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

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

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

    <div class = 'two'>
        <div>
            <p>
                <span class = 'one' id = 'id_span' d = 'dat'>123</span>
                <span class = 'one two'>222</span>
                <span class = 'two one-two'>333</span>
                <span class = 'onetwo'>444</span>
            </p>
        </div>
    </div>
    <script>
        $(function(){
            alert($('[class~=one]').length);
        });
    </script>

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

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

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

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

    <div>
        <span>span1</span>
        <p class = 'a'>p1</p>
        <p>p2</p>
        <span>span2</span>
        <p>p3</p>
        <span>span3</span>
    </div>
    <script>
        $(function(){
            $('div p:first-child').text('11111');
            $('div span:first-child').text('22222');
        });
    </script>

      这段代码会使第一个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开始的。

    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>
    <script>
        $(function(){
            alert($('p:nth-child(2)').html());
        });
    </script>

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

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

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

    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
    <script>
        $(function(){
            alert($('p:nth-child(2n+1)').length);
        });
    </script>

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

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

    <div>
        <p>1</p>  
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <span>span</span>
        <p>6</p>
    </div>
    <div>
        <span>span</span>
    </div>
    <script>
        $(function(){
            alert($('span:only-child').html());
        });
    </script>

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

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

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

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

    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <span>span</span>
        <p>6</p>
    </div>
    <script>
        $(function(){
            alert($('span:first-of-type').html());
        });
    </script>

      这段代码的结果是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元素。

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <p>3434</p>
        <span>4</span>
    </div>
    <script>
        $(function(){
            alert($('p:only-of-type').html());
        });
    </script>

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

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

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

      6.  表单对象属性过滤器

      $(':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)'):选择指定语言的所有元素。


  • 相关阅读:
    简明Python3教程 12.问题解决
    简明Python3教程 11.数据结构
    【SPOJ 694】Distinct Substrings
    【codeforces Manthan, Codefest 17 C】Helga Hufflepuff's Cup
    【CF Manthan, Codefest 17 B】Marvolo Gaunt's Ring
    【CF Manthan, Codefest 17 A】Tom Riddle's Diary
    【SPOJ 220】 PHRASES
    【POJ 3261】Milk Patterns
    【POJ 3294】Life Forms
    【POJ 1226】Substrings
  • 原文地址:https://www.cnblogs.com/jyybeam/p/5773247.html
Copyright © 2011-2022 走看看