jQuery常用选择器汇总

一、基本选择器

<body>
    <div>
        <div id="div1">
            aaaaaaaaaaa</div>
        <div class="c1">
            bbbbbbbbb</div>
        <span>ccccccccc</span>
    </div>
</body>

$(function () {

    $("#div1").html("hello world 1"); //根据id匹配元素（a）

    $(".c1").html("hello  world 2"); //根据Yclass匹配元素（b）

    $("span").html("hello world 3"); //根据元素名称匹配 （c）

    $("span,div.c1").html("hello world 4"); //匹配页面所有的span 和class=c1的div（b c）

    $("*").html("hello world 5"); //匹配页面所有元素,也包含body

});

二、层级选择器

<body>
    <span id="span1">
        aaaaaaaaa</span>
    <span class="c1">
        bbbbbbbbb</span>
    <div>
        ccccccccc
        <span>ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("body span").html("hello world 1"); //选取body中所有的span（a b d）

    $("body>span").html("hello world 2"); //选取body元素的子span元素(a b)

    $("span.c1+div").html("hello world 3"); //选取class为c1的span的下一个div元素，注意是同级元素
    $("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)

    $("span.c1~div").html("hello world 4"); //选取class为c1的span的后面的所有div
    $("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)

});

三、基本过滤选择器

<body>
    <h1>header1</h1>
    <h2>header2</h2>
    <h3>header3</h3>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <div>
        ccccccccc
        <span>ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("div:first").html("hello world 1"); //选取所有div中的第一个div
    $("span:last").html("hello world 2"); //选取所有span中的最后一个
    $("span:not(.c1)").html("hello world 3"); //选取除class为c1的span外的所有span
    $("span:even").html("hello world 4"); //选取索引为偶数的span，索引从0开始
    $("span:odd").html("hello world 5"); //选取索引为奇数的span，索引从0开始
    $("span:eq(2)").html("hello world 6"); //选取指定索引的span，索引从0开始
    $("span:gt(0)").html("hello world 7"); //选取大于指定索引的span，不包含指定索引
    $("span:lt(2)").html("hello world 8"); //选取小于指定索引的span，不包含指定索引
    $(":header").html("hello world 9"); //选取页面中所有的标题元素 h1 h2 h3...

});

四、内容过滤选择器

<body>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <span></span>
    <div>
        ccccccccc
        <span id="span2" class="c2">ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("span:contains(aa)").html("hello world 1"); //选取内容包含aa的span元素

    $("span:empty").html("hello world 2"); //选取空的span元素

    $("div:has(span)").html("hello world 3"); //选取包含span的div元素

    $("span:parent").html("hello world 4"); //选取包含子元素的span元素，包含文本

});

五、属性过滤选择器

<body>
    <span id="span1">aaaaaaaaa</span>
    <span class="c1">bbbbbbbbb</span>
    <span></span>
    <div>
        ccccccccc
        <span id="span2" class="c2">ddddddddd</span>
    </div>
    <div>eeeeeeeee</div>
</body>

$(function () {

    $("span[id]").html("hello world 1"); //选取有属性id的span元素
    $("span[id=span2]").html("hello world 2"); //选取属性id等于span2的span元素
    $("span[id!=span2]").html("hello world 3"); //选取属性id不等于为span2的span元素
    $("span[id^=span]").html("hello world 4"); //选取属性id以span开始的span元素
    $("span[id$=2]").html("hello world 5"); //选取属性id以2结尾的span元素
    $("span[id*=an]").html("hello world 6"); //选取属性id包含an的span元素
    $("span[id*=an][class$=2]").html("hello world 6"); //选取属性id包含an并且class以结尾的span元素

});

六、子元素过滤选择器

<body>
   <div class="c1">
        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>
   </div>
   <div class="c1">
        <span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span>
   </div>
   <div class="c1">
        <span>aaaaaaaa</span>
   </div>
</body>

(function () {

    $("div.c1 :nth-child(1)").html("hello world 1"); //选取class等于c1的div的指定索引子元素
    $("div.c1 :nth-child(even)").html("hello world 2"); //选取class等于c1的div的偶数子元素
    $("div.c1 :nth-child(odd)").html("hello world 3"); //选取class等于c1的div的奇数子元素
    $("div.c1 :first-child").html("hello world 4"); //选取class等于c1的div的第一个子元素
    $("div.c1 :last-child").html("hello world 5"); //选取class等于c1的div的最后一个子元素
    $("div.c1 :only-child").html("hello world 6"); //选取class等于c1的div只有一个子元素的子元素

});

7、表单选择器

<body>
  <form id="form1" action="#">
    <input type="button" value="button1" />
    <input type="text" value="text1" />
    <input type="text" value="text2" />
    <textarea rows="8" cols="40"></textarea><br />
    <input type="checkbox" name="chk" />篮球
    <input type="checkbox" name="chk" />足球
    <input type="password" />
    <input type="hidden" /><br />
    <select multiple="multiple">
        <option selected="selected">武汉</option>
        <option selected="selected">黄冈</option>
        <option >麻城</option>
    </select>
    <input id="n" type="radio" name="s"/>男
    <input type="radio" name="s"/>女<br />
    <input type="submit" /><input type="reset" />
  </form>
</body>

$(function () {
    //表单中的表单元素
    $("#form1 :input").val("hello world 1");
    //表单中的input元素
    $("#form1 input").val("hello world 1");
    $(":text").val("hello world 2");
    $(":password").val("hello world 3");
    //男的单选框被选中
    $(":radio[id=n]").attr("checked", true);
    $(":checkbox[name=chk]").length;
    $(":submmit").val("提交");
    $(":reset").val("重置");
    $(":button").val("hello world 4");
    $(":hidden").val("hello world 5");
});

8、表单对象属性过滤选择器

<body>
  <form id="form1" action="#">
    <input type="text" disabled="disabled" value="禁用1" />
    <input type="text"  value="启用1" />
    <input type="text" disabled="disabled" value="禁用2" />
    <input type="text"  value="启用2" />
    <input type="checkbox" name="chk" value="篮球" checked="checked"/>篮球
    <input type="checkbox" name="chk" value="足球" />足球
    <input type="checkbox" name="chk" value="编程" checked="checked"/>编程
    <input type="checkbox" name="chk" value="旅游" checked="checked"/>旅游
    <select multiple="multiple">
        <option selected="selected">武汉</option>
        <option selected="selected">黄冈</option>
        <option >麻城</option>
    </select>
  </form></body>

$(function () {

    $("#form1 input:enabled").val("hello world 1"); //选取form表单中没有禁用的文本框
    $("#form1 input:disabled").val("hello world 2"); //选取form表单中没有禁用的文本框
    $("#form1 input:checked").attr("checked",false); //选取form表单中选的复选框
    $("select option[selected]").each(function () {
        alert($(this).val());
    });

});

使用选择器要注意的地方

<body>
    <div id="div#1">aaaaaaaaaaa</div>
    <div class="c[1]">bbbbbbbbb</div>
    <div class="c1">
        <div name="div">ccccccccc</div>
        <div name="div">ddddddddd</div>
        <div name="div">eeeeeeeee</div>
        <div class="c1" name="div">fffffffff</div>
    </div>
    <div class="c1" name="div">gggggggg</div>
    <div class="c1" name="div">hhhhhhhh</div>
</body>

$(function () {

    //有时在id或是class中有一些特殊字符如 [等，需要用反斜杠进行转义
    $("#div\\#1").html("hello world 1");
    $(".c\\[1\\]").html("hello world 2");
    //有没有空格的区别
    //有空格是选取class等于c1的div里面的name等于div的div（c d e f）
    $(".c1 [name=div]").html("hello world 3");
    //没有空格是选取class等于c1并且name等于div的div (f g h)
    $(".c1[name=div]").html("hello world 4");

});