JQuery知识总结之选择器

jQuery拥有着强大的选择器，允许开发者使用从css1-css3几乎所有的选择器，以及自己独创的高级而复杂的选择器，因此对css掌握熟练的开发者可以很容易的切入到jQuery的学习中来，但我的脑容量实在不允许我记下所有的选择器，所以本篇文章整理了一下jQuery常用的选择器及其使用方法，以备以后查阅。

jQuery选择器之id选择器---根据元素id进行查找

id选择器是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话首选这个选择器。

<div id="testdemo">
</div>
<script type="text/javascript">
    $("#testdemo").text("id选择器");</script>复制代码

jQuery选择器之类选择器---根据元素class进行查找

类选择器，顾名思义，通过class样式类名来获取节点，同样的jQuery在实现上，对于类选择器，如果浏览器支持（IE8及较低的版本，浏览器不支持getElementsByClassName）

，jQuery使用JavaScript的原生getElementsByClassName()函数来实现的。

类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选。

而且如果我们想移除元素的某个class，用原生js与jQuery分别实现

<body>   
    <div class="one two">
    </div>   
    <div class="one two">
    </div>
    <div class="one">
    </div>
    <div class="one two">
    </div>

    <script type="text/javascript">
        //通过原生方法处理
        var divs = document.getElementsByClassName('one');
        for (var i = 0; i < divs.length; i++) {
            divs[i].classList.remove("two");
        }
    </script>

    <script type="text/javascript">
        //通过jQuery
        var a = $(".one")
        a.removeClass("two");
    </script>
</body>复制代码

可以看到$(".one").removeClass()方法，其内部其实是自带隐式循环的，不需要再进行遍历，比原生js更加简单。

jQuery选择器之元素选择器---根据元素标签名进行查找

就是css里的标签选择器，搜索指定元素标签名的所有节点，返回一个合集。同样的也有原生方法getElementsByTagName()函数支持。

借助元素选择器把上面移除元素的某个class的方法，用原生js与jQuery分别实现一下

<body>   
    <div class="two">
    </div>   
    <div class="two">
    </div>
    <div class="one">
    </div>
    <div class="two">
    </div>

    <script type="text/javascript">
        //通过原生方法处理
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            divs[i].classList.remove("two");
        }
    </script>

    <script type="text/javascript">
        //通过jQuery
        var a = $("div")
        a.removeClass("two");
    </script>
</body>复制代码

jQuery选择器之*选择器

就是css里的全选择器了，看到这个猛然就想起了刚开始用css和html写界面时用

*{padding:0;margin:0}清除浏览器默认样式的菜鸡儿时代了（当然，现在也还是捞的一批）。。。。

$( "*" )复制代码

用法如上，返回页面所有元素的合集，不多赘述了。

嘿嘿，其实不难发现，id、class、tag都可以通过原生的方法获取到对应的节点，但是前端需要考虑兼容性问题，如

IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
getElementById的参数在IE8及较低的版本不区分大小写
IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A
IE8及较低的版本，浏览器不支持getElementsByClassName

真让人头大，还好有jQuery

jQuery选择器之层级选择器---根据元素间关系进行查找

文档中的所有的节点之间都是有这样或者那样的关系。如果把节点之间的关系用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点就会存在父子，兄弟，祖孙的关系。依据这些关系可以限定查找范围，实现精确查找。

1.子元素选择器 $('parent > child')

顾名思义，父子局，parent是父元素必须要有层级选择器都必须有参照元素，child是子元素，不写默认是*，选择全部子元素,空格是为了代码可读性。

此选择器会查找给定父元素的下一级元素，也就是儿子辈，孙子辈就不归他管了

如

<div class="testone">
    <article>
        <p class="demo">div下的article下的p元素</p>
        <p>div下的article下的p元素</p>
    </article>
</div>
<div class="testtwo">
    <p class="demo">div下的第一个p元素</p>
    <p>div下的article下的p元素</p>
</div>
<script type="text/javascript">
    //子选择器
    //选择第一个div元素里面class为demo的p元素
    console.log($('.testone > .demo'));//只能查到第二个div里的
    console.log($('.testone > article > .demo'));//这样可以查到第一个div里的了</script>复制代码

2.后代选择器 $('ancestor descendant')

与子元素选择器最大的区别是，后代选择器不只查找下一级子元素，而是查找ancestor祖先元素的所有descent后代元素。

<div class="testone">
    <article>
        <p class="demo">div下的article下的p元素</p>
        <p>div下的article下的p元素</p>
    </article>
</div>
<div class="testtwo">
    <p class="demo">div下的第一个p元素</p>
    <p>div下的article下的p元素</p>
</div>
<script type="text/javascript">
    //子选择器
    //选择第一个div元素里面class为demo的p元素
    console.log($('.testone  .demo'));
</script>复制代码

3.相邻兄弟选择器 $(".prev + next")

选择prev所代表的元素后紧接的相邻元素，next不写默认就第一个

<body>    
    <div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div class="test">兄弟节点div
            <div>子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>
    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
       console.log($("span + div"));//会分别选择span后紧邻的第一个div，共两个
       console.log($(".prev + .test"));//选不到，范围限定是紧邻的第一个
    </script>
</body>复制代码

4.一般兄弟选择器 $(".prev ~ siblings")

选择prev所代表的元素后指定的相邻元素，siblings不写就默认选所有同辈元素

<body>    
    <div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div class="test">兄弟节点div
            <div>子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>
    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
      //会选择span后的同辈中所有class为test的div，共两个
     console.log($("span ~ .test"));      //会选择span后的所有同辈元素
      //第一个span后的同辈元素包含第二个span,所以所以第二个span也会被选到       console.log($("span ~ "));
    </script>
</body>复制代码

jQuery选择器之基本筛选选择器---根据指定条件进行查找

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器。

$(".div:first")复制代码

$(".div:last")复制代码

$(".div:even")复制代码

$(".div:odd")复制代码

$(".aaron:eq(2)")复制代码

$(".aaron:gt(3)")复制代码

$(".aaron:lt(2)")复制代码

$("input:not(:checked) + p")复制代码

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
gt是一个段落筛选，从指定索引的下一个开始，如指定gt(1) 实际是从2开始

jQuery选择器之内容筛选选择器---根据元素包含内容进行查找

基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。

$(".div:contains(':contains')")复制代码

$(".div:has(span)")复制代码

$("a:parent")复制代码

$("a:empty")复制代码

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素。
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点。

jQuery选择器之可见性筛选选择器---根据元素可见性进行查找

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden。

这2个选择器都是 jQuery 延伸出来的，看起来比较简单，但是元素可见性依赖于适用的样式

我们有很多种方式可以隐藏一个元素：

CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0
设置z-index,或是absolute把元素放在屏幕外等

但实际上只有前三种情况能被$(":hidden")选中，这说明并不是视觉上不可见就可以被$(":hidden")选择器认定为不可见，如果元素占据文档中一定的空间,则元素被认为是可见的。所以元素设置visibility: hidden 、 opacity: 0、z-index或absolute等还是会被认为是可见的，因为他们仍然占用空间布局。

jQuery选择器之属性筛选选择器---根据元素标签中的属性进行查找

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能定位不同类型的元素，特别是表单form元素,如input[type="text"],input[type="checkbox"]等，[attr*="value"]能在网站中帮助我们匹配不同类型的文件。

另外，字符串匹配都是区分大小写的。

jQuery选择器之子元素筛选选择器---查找元素父元素下的子元素

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点

<body>
    <h2>子元素筛选选择器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一个a元素
        //针对所有父级下的第一个
        $('.first-div a:first-child').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最后一个a元素
        //针对所有父级下的最后一个
        //如果只有一个元素的话，last也是第一个元素
        $('.first-div a:last-child').css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一个子元素的a元素
        $('.first-div a:only-child').css("color", "blue");
    </script>
    <script type="text/javascript">
        //查找class="last-div"下的第二个a元素
        $('.first-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒数第二个a元素
        $('.first-div a:nth-last-child(2)').css("color", "red");
    </script>

</body>复制代码

注意事项：

:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个
:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

jQuery选择器之表单元素选择器与表单对象属性筛选选择器

---根据表单元素的类型和属性进行选择

无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素。

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换，比如 $(':password') 和 $('[type=password]')一样的效果。

$(':input')复制代码

$('input:text')复制代码

$('input:password')复制代码

$('input:radio')复制代码

$('input:checkbox')复制代码

$('input:submit')复制代码

$('input:image')复制代码

$('input:button')复制代码

表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。