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

jquery选择器

时间:2016-08-16 23:42:37      阅读:581      评论:0      收藏:0      [点我收藏+]

标签:

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


 

jquery选择器

标签:

原文地址:http://www.cnblogs.com/jyybeam/p/5773247.html

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