jQuery——选择器

基本选择器

基本选择器是jquery中最常见的选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。在网页中，每一个id名称只能使用一次，class允许重复使用。

示例HTML与CSS：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
</head>
<style>
    div,
    span,
    p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
    }

    div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
    }

    div.hide {
        display: none;
    }

    h1 {
        color: red;
    }
</style>

<body>
    <div class="one" id="one">
        ID为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div class="none" style="display: none">
        style的display为"none"的div
    </div>
    <div class="hide">class为"hide"的div</div>
    <div>
        包含input的type为"hidden"的div
        <input type="hidden" size="8">
    </div>
    <span id="mover">正在执行动画的span元素</span>
</body>
<script src="./js/js.js"></script>

</html>

初始效果：

初始效果

#id

$("#one").css("background","#bbffaa");

功能描述：改变id为one的元素的背景色

$("#one").css("background","#bbffaa")

.class

$(".mini").css("background","#bbffaa");

功能描述：改变class为mini的所有元素的背景色

$(".mini").css("background","#bbffaa")

element

代码示例：

$("div").css("background","#bbffaa");

功能描述：改变元素名是<div>的所有元素的背景色

$("div").css("background","#bbffaa")

*

代码示例：

    $("*").css("background","#bfa");

功能描述：改变所有元素的背景色

$("*").css("background","#bfa");

selector1,selector2,.......,selectorN

将每一个选择器匹配到的元素合并后一起返回

代码示例：

    $("span, #two").css("background","#bbffaa");

功能描述：改变所有的<span>元素和id为two元素的背景色

$("span, #two").css("background","#bbffaa");

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

$("ancestor descendant")

选择ancestor元素里的所有descendant（后代）元素。（递归的选取子代，子子代）

    $("body div").css("background","#bbffaa");

功能描述：改变<body>内所有<div>元素的背景色

$("body div").css("background","#bbffaa");

$("parent > child")

选取parent元素下的child（子元素）元素。（仅子元素，无递归）

   $("body > div").css("background","#bbffaa");

功能描述：改变<body>内子元素<div>的背景色

$("body > div").css("background","#bbffaa");

类比W3C的CSS选择器示例：

element>element 选择器用于选取带有特定父元素的元素。注释：如果元素不是父元素的直接子元素，则不会被选择。

$("parv + next")

选取紧接在prev元素后的next元素

       $(".one + div").css("background","#bbffaa");

功能描述：改变class为one的下一个<div>同辈元素背景色

$(".one + div").css("background","#bbffaa");

可以类比W3C的CSS选择器示例：

element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

$("prev ~ siblings")

选取prev元素之后的所有siblings元素

    $("#two ~ div").css("background","#bbffaa");

功能描述：改变id为two的元素后面的所有<div>同辈元素的背景色。

$("#two ~ div").css("background","#bbffaa");

类比CSS选择器示例：

element1~element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

在层次选择器中，第一个和第二个比较常用，后面两个因为在jquery里可以用更加简单的方法代替，所以使用的机率相对少些。

可以使用next()方法来代替$("prev + next")选择器

                $("prev + next")选择器与next()方法的等价关系
                
                    选择器                            方法
等价关系        $(".one + div");             $(".one").next("div")

可以使用nextAll()方法来代替$("prev ~ siblings")选择器

                $("#prev ~ div")选择器与nextAll()方法的等价关系

                    选择器                            方法
等价关系        $("#prev ~ div");             $("#prev").nextAll("div");

siblings()

这里多提一个siblings()方法：

$("#two").siblings("div").css("background","#bbffaa");

功能描述：选取id为two元素的所有同辈div元素，无论前后位置

$("#two").siblings("div").css("background","#bbffaa");

siblings()方法与前后位置无关，只要是同辈节点就都能匹配。
而$("#prev ~ div")和$("prev").nextAll()匹配到的DIV元素都是在#prev元素之后的。

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见
性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

:first

$("div:first").css("background","#bbffaa");

功能描述：改变第一个<div>元素的背景色

$("div:first").css("background","#bbffaa");

:last

$("div:last").css("background","#bbffaa");

功能描述：改变最后一个<div>元素

$("div:last").css("background","#bbffaa");

:not(selector)

$("div:not(.one)").css("background","#bbffaa");

功能描述：去除所有与给定选择器匹配的元素，即取反。

$("div:not(.one)").css("background","#bbffaa");

:even

选取索引是偶数的所有元素，索引从0开始。

$("div:even").css("background","#bbffaa");

功能描述：改变索引值为偶数的<div>元素的背景色

$("div:even").css("background","#bbffaa");

:odd

选取索引是奇数的所有元素，索引从0开始。

$("div:odd").css("background","#bbffaa");

功能描述：改变索引值为奇数的<div>元素的背景色

$("div:odd").css("background","#bbffaa");

:eq(index)

选区索引等于index的元素，index从0开始

$("div:eq(3)").css("background","#bbffaa");

功能描述：改变索引值等于3的<div>元素的背景色。

$("div:eq(3)").css("background","#bbffaa");

:gt(index)

选区索引大于index的元素，index从0开始

$("div:gt(3)").css("background","#bbffaa");

功能描述：改变索引值大于3的<div>元素的背景色。

$("div:gt(3)").css("background","#bbffaa");

:lt(index)

选区索引小于index的元素，index从0开始

$("div:lt(3)").css("background","#bbffaa");

功能描述：改变索引值小于3的<div>元素的背景色。

$("div:lt(3)").css("background","#bbffaa");

:header

选取所有的标题元素，例如h1,h2,h3等

$(":header").css("background","#bbffaa");

功能描述：改变所有的标题元素的背景色。

$(":header").css("background","#bbffaa");

:animated

选取当前正在执行动画的所有元素

$(":animated").css("background","#bbffaa");

功能描述：改变当前正在执行动画的元素的背景色

:focus

选取当前获取焦点的元素

$(":focus").css("background","#bbffaa");

功能描述：改变当前获取焦点的元素的背景色

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

:contains(text)

选取含有文本内容为"text"的元素

$("div:contains(di)").css("background","#bbffaa");

功能描述：选取含有文本内容为"di"的的元素

$("div:contains(di)").css("background","#bbffaa");

:empty

选取不包含子元素或者文本的空元素。（空格符也不许有哦）

$("div:empty").css("background","#bbffaa");

功能描述：改变不包含子元素（包括文本元素）的<div>空元素的背景色。

:has(selector)

选取含有选择器所匹配的元素的元素。

$("div:has('.mini')").css("background","#bbffaa");

功能描述：改变，含有class为mini元素的<div>元素的背景色。

$("div:has('.mini')").css("background","#bbffaa");

:parent

选取含有子元素或者文本的元素。（含有空格符也会被选中）

$("div:parent").css("background","#bbffaa");

功能描述：改变含有子元素的<div>元素的背景色

$("div:parent").css("background","#bbffaa");

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态选择相应的元素。

:hidden

选取所有不可见的元素

$("div:hidden").show(2000);

功能描述：显示隐藏的<div>元素

$("div:hidden").show(2000);

:visible

选取所有可见的元素

$("div:visible").css("background","#ff6500");

功能描述：改变所有可见的<div>元素的背景色

$("div:visible").css("background","#ff6500");

**在可见性选择器中，需要注意:hidden，它不仅包括样式属性display为"none"的元素，也包括文本隐藏域（<input type="hidden" />）和visibility:hidden之类的元素。

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

[attribute]

选取拥有此属性的元素

    $("div[title]").css("background","#bbffaa");

功能描述：改变含有属性title的<div>元素的背景色。

$("div[title]").css("background","#bbffaa");

[attribute=value]

选取属性的值为value的元素

$("div[title=test]").css("background","#bbffaa");

功能描述：改变属性title值等于“test”的<div>元素的背景色

$("div[title=test]").css("background","#bbffaa");

[attribute!=value]

选取属性的值不等于value的元素

    $("div[title!=test]").css("background","#bbffaa");

功能描述：改变属性title值不等于"test"的<div>元素

$("div[title!=test]").css("background","#bbffaa");

[attribute^=value]

选取属性的值以value开始的元素

    $("div[title^=te]").css("background","#bbffaa");

功能描述：改变属性title值以"te"开始的<div>元素的背景色

$("div[title^=te]").css("background","#bbffaa");

[attribute$=value]

选取属性的值以value结束的元素

    $("div[title$=est]").css("background","#bbffaa");

功能描述：改变属性title值以"est"结束的<div>元素的背景色

$("div[title$=est]").css("background","#bbffaa");

[attribute*=value]

选取属性的值含有value的元素

    $("div[title*=es]").css("background","#bbffaa");

功能描述：改变属性title值含有"es"的<div>元素的背景色

$("div[title*=es]").css("background","#bbffaa");

jQuery属性选择器的过滤规则比较多，特别容易混淆，为此，把几个容易混淆的单独做一个例子。

HTML：

    <div title="en">title为 en 的div元素</div>
    <div title="en-UK">title为 en-UK 的div元素</div>
    <div title="english">title为 english 的div元素</div>
    <div title="en uk">title为 en uk 的div元素</div>
    <div title="uken">title为 uken 的div元素</div>

初始效果图：

[attribute^=value]

    $("div[title^='en']").css("background","#bbffaa");

功能：改变属性title值以“en”开始的<div>元素的背景色

$("div[title^='en']").css("background","#bbffaa");

[attribute*=value]

    $("div[title*='en']").css("background","#bbffaa");

功能：改变属性title值含有“en”的<div>元素的背景色

$("div[title*='en']").css("background","#bbffaa");

[attribute|=value]

选取属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个-）的元素

    $("div[title|='en']").css("background","#bbffaa");

功能：改变属性title值等于en，或以en为前缀（后跟一个-）的元素的背景色

$("div[title|='en']").css("background","#bbffaa");

[attribute~=value]

选取属性用空格分隔的值中包含一个给定值的元素。

        $("div[title~='uk']").css("background","#bbffaa");

功能：改变属性title用空格分隔的值中包含字符uk的元素的背景色。

$("div[title~='uk']").css("background","#bbffaa");

子元素过滤器

子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，要注意它与普通的过滤选择器的区别。

:nth-child(index/even/odd/equation)

选取每个父元素下的第index个子元素或奇偶元素（index从1算起）

$("div.one :nth-child(2)").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的第2个子元素的背景色。

$("div.one :nth-child(2)").css("background","#bbffaa");

:first-child

选取每个父元素的第1个子元素

$("div.one :first-child").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的第1个子元素的背景色。

$("div.one :first-child").css("background","#bbffaa");

:last-child

选取每个父元素的最后一个子元素

$("div.one :last-child").css("background","#bbffaa");

功能描述：改变每个class为one的<div>父元素下的最后一个子元素的背景色。

$("div.one :last-child").css("background","#bbffaa");

:only-child

如果某个元素，是它父元素中唯一的子元素，那么将会匹配。如果父元素中含有其他元素，则不匹配。

$("div.one :only-child").css("background","#bbffaa");

功能描述：如果class为one的<div>父元素下只有一个子元素，那么改变这个子元素的背景色。

$("div.one :only-child").css("background","#bbffaa");

nth-child()选择器是很常用子元素过滤选择器

:nth-child(even)：选取每个父元素下的索引值是偶数的元素
:nth-child(odd)：选取每个父元素下的索引值是奇数的元素。
:nth-child(2)：选取每个父元素下的索引值等于2的元素。
:nth-child(3n)：选取每个父元素下的索引值是3的倍数的元素，（n从1开始）。
:nth-child(3n+1)：选取每个父元素下的索引值是（3n+1）的元素，（n从1开始）。

表单对象属性过滤选择器

此选择器主要是对所选择的表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

演示HTML：

    <form id="form1" action="#">
        可用元素：
        <input type="add" value="可用文本框"><br/> 
        不可用元素：
        <input name="email" disabled="disabled" value="不可用文本框"><br/> 
        可用元素：
        <input name="che" value="可用文本框"><br/> 
        不可用元素：
        <input name="name" disabled="disabled" value="不可用文本框"><br/>
        <br/>
        多选框：<br/>
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
![1.jpg](https://upload-images.jianshu.io/upload_images/1666407-2f098c9abe34f9a3.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <input type="checkbox" name="newsletter" value="test2" />test2
        <input type="checkbox" name="newsletter" value="test3" />test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
        <input type="checkbox" name="newsletter" value="test5" />test5
        <div></div>
        <br/><br/>
        下拉列表1：<br/>
        <select name="test" multiple="multiple" style="height: 100px">
            <option>浙江</option>
            <option selected="selected">湖南</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br/><br/>
        下拉列表2：<br/>
        <select name="test2">
            <option>浙江</option>
            <option>湖南</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <div></div>
    </form>

初始状态：

初始

:enabled

选取所有可用元素

    $("#form1 input:enabled").val("这里变化了！").css("color","red");

功能描述：改变表单内可用<input>元素的值和字体颜色

$("#form1 input:enabled").val("这里变化了！").css("color","red");

:disabled

选取所有不可用元素

    $("#form1 input:disabled").val("这里变化了！").css("color","red");

功能描述：改变表单内不可用<input>元素的值和字体颜色

$("#form1 input:disabled").val("这里变化了！").css("color","red");

:checked

选取所有被选中的的元素（单选框，复选框）

        $("input:checked").length;

功能描述：获取多选框选中的个数

$("input:checked").length;

:selected

选取所有被选中的选项元素（下拉列表）

$("select :selected").text();

功能描述：获取下拉框选中的内容

表单选择器

为了是用户能够更加灵活的操作表单，jQuery中专门加入表单选择器。

HTML：

    <form action="#" id="form1">
        <input type="button" value="Button"><br/>
        <input type="checkbox" name="c">1
        <input type="checkbox" name="c">2
        <input type="checkbox" name="c">3<br/>
        <input type="file"><br/>
        <input type="hidden"><div style="display: none;">test</div><br/>
        <input type="image"><br/>
        <input type="password"><br/>
        <input type="radio" name="a">1<input type="radio" name="a">2<br/>
        <input type="reset"><br/>
        <input type="submit" value="提交"><br/>
        <input type="text"><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>

初始效果：

:input

选取所有的<input>，<textarea>，<select>，<button>元素。

:text

选取所有的单行文本框

:password

选取所有的密码框

:radio

选取所有的单选框

:checkbox

选取所有的复选框

:submit

选取所有的提交按钮

:image

选取所有的图像按钮

:reset

选取所有的重置按钮

:button

选取所有的按钮

:file

选取所有的上传域

:hidden

选取所有的不可见元素

选择器中的一些注意事项

选择器中含有特殊符号的注意事项

选择器中含有特殊字符
HTML：

    <div id="id#b">bb</div>
    <div id="id[1]">cc</div>

如果按照普通的方式获取，例如：

    $("#id#b");
    $("#id[1]");

以上代码不能正确获取到元素，正确写法如下：

$("#id\\#b");
$("#id\\[1\\]");

2.选择器中含有空格的注意事项
选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果。
HTML：

    <div class="test">
        <div style="display: none">aa</div>
        <div style="display: none">bb</div>
        <div style="display: none">cc</div>
        <div class="test" style="display: none">dd</div>
    </div>
    <div class="test" style="display: none">ee</div>
    <div class="test" style="display: none">ff</div>

使用如下的jQuery选择器分别获取它们。

    var $t_a = $(".test :hidden");      // 带空格的JQuery选择器
    var $t_b = $(".test:hidden");       // 不带空格的JQuery选择器
    var len_a = $t_a.length;
    var len_b = $t_b.length;

    console.log(len_a);     // 4
    console.log(len_b);     // 3

之所以结果不同，是因为后代选择器与过滤选择器的不同。

    var $t_a = $(".test :hidden");

选取class为test的元素里面的隐藏元素

    var $t_b = $(".test:hidden");

选取隐藏的class为test的元素。

最后编辑于：2018.04.29 17:15:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,826评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,968评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,234评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,562评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,611评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,482评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,271评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,166评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,608评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,814评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,926评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,644评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,249评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,866评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,991评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,063评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,871评论 2赞 354

jQuery——选择器

基本选择器

#id

.class

element

*

selector1,selector2,.......,selectorN

层次选择器

$("ancestor descendant")

$("parent > child")

$("parv + next")

$("prev ~ siblings")

siblings()

过滤选择器

:first

:last

:not(selector)

:even

:odd

:eq(index)

:gt(index)

:lt(index)

:header

:animated

:focus

内容过滤选择器

:contains(text)

:empty

:has(selector)

:parent

可见性过滤选择器

:hidden

:visible

属性过滤选择器

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

jQuery属性选择器的过滤规则比较多，特别容易混淆，为此，把几个容易混淆的单独做一个例子。

[attribute^=value]

[attribute*=value]

[attribute|=value]

[attribute~=value]

子元素过滤器

:nth-child(index/even/odd/equation)

:first-child

:last-child

:only-child

表单对象属性过滤选择器

:enabled

:disabled

:checked

:selected

表单选择器

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

选择器中的一些注意事项

推荐阅读更多精彩内容