JQuery知识总结之选择器

时间 2019-12-04

原文原文链接

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

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

id选择器是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持老是很是高效的，因此在操做DOM的获取上，若是能采用id的话首选这个选择器。css

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

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

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

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

类选择器，相对id选择器来讲，效率相对会低一点，可是优点就是能够多选。java

并且若是咱们想移除元素的某个class，用原生js与jQuery分别实现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更加简单。
css3

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

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

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

<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')复制代码

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

注意事项：

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到<option>元素，因此保险起见换用选择器input:checked，确保只会选取<input>元素

jQuery选择器之特殊选择器this

在刚接触jQuery的时候，常常对$(this)和this的区别模糊不清，那么这二者有什么区别呢？

this，表示当前的上下文对象是一个html对象，能够调用html对象所拥有的属性和方法。

$(this),表明的上下文对象是一个jquery的上下文对象，能够调用jQuery的方法和属性值。

1. JQuery知识快览之一—选择器
2. jQuery选择器总结
3. jquery选择器总结
4. --jquery选择器总结
5. jQuery的选择器总结
6. Jquery选择器总结
7. jQuery 选择器总结
8. jQuery选择器总结[转]
9. JQuery选择器总结
10. (转)jQuery选择器总结
更多相关文章...
• jQuery Mobile 表单选择菜单 - jQuery Mobile 教程
• XQuery 选择和过滤 - XQuery 教程
• 算法总结-双指针
• 算法总结-回溯法