jQuery选择器全解-基础选择器

浏览数：33 / 时间：2015年06月09日

Id选择：

根据元素Id选择,$(“layer1”) 选择ID为layer1的元素

<div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div>
alert($("#layer1").height());

element

element选择器是一个用于搜索的元素。指向DOM节点的标签名

<a href=""></a>
<a href=""></a>
<a href=""></a>
alert($("a").length);

.class选择器

.class选择器根据给定的类匹配元素，是一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
alert($("#ID").val() +  "  " + $("a").text() + "    " + $(".classname").val());

selector1,selector2,selectorN选择器

这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

<h2 class="title">并集选择器 的h2</h2>
<dl>
    <dt>并集选择器</dt>
</dl>
<input  type="button" value="设置所有h2 dt  class 为title 的背景颜色" id="4" /><br />

$("#4").click(function (){
    $("h2,dt,.title").css("background","pink");
});

层级选择器

ancestor descendant选择器

其指在给定的祖先元素下匹配所有的后代元素，作为参数的ancestor代表任何有效的选择器，而descendant则用以匹配元素的选择器，并且它是第一个选择器的后代

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

    </fieldset>

</form>
alert($("form input").length)

parent>child选择器

parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下：parent代表任何有效选择器；child用以匹配元素的选择器，并且它是第一个选择器的子元素。

<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Hello</span>
    </p>
    <p id="n4" class="detail">
        <span id="n5" class="b codeplayer">World
            <span id="n6" class="c">365mini.com</span>
        </span>
    </p>
</div>
alert($("p > span ").length + "  " + $("p > span > span").length);

prev+next选择器

这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下：prev代表任何有效选择器；next代表一个有效选择器并且紧接着第一个选择器。

<form>

    <label>Name:</label>

    <input name="name" />

    <fieldset>

        <label>Newsletter:</label>

        <input name="newsletter" />

    </fieldset>

</form>
alert($("label + input").length)

prev ~ siblings选择器

prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下：prev代表任何有效选择器；siblings代表一个选择器，并且它作为第一个选择器的同辈。

<div id="divTest">
    <input type="text" value="投资" />
    <input id="next" type="text" />
    <input type="text"  value="担当" />
    <input type="text" title="学习" value="学习" />
    <a>1</a>
    <a>2</a>
</div>
alert(jQuery("#next~[title]").val());

jQuery选择器全解-基本过滤器

<div id="divTest">
    <ul>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <li>基本过滤选择器</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
<input type="button" value="li_first" id="one"/>
<input type="button" value="li_last" id="two"/>
<input type="button" value="not(selector)" id="three"/>
<input type="button" value="li_even" id="four"/>
<input type="button" value="li_odd" id="five"/>
<input type="button" value="li_eq(index)" id="six"/>
<input type="button" value="li_gt(2)" id="seven"/>
<input type="button" value="li_:lt(1)" id="leng"/>

first

匹配找到的第一个元素

$("#one").click(function (){
    $("li:first").css("background","pink");
});

last

匹配找到的最后一个元素

$("#two").click(function (){
    $("li:last").css("background","pink");
});

not(selector)

去除所有与给定选择器匹配的元素

$("#three").click(function (){
alert($("input:not(:checked)").val())
});

even

匹配所有索引值为偶数的元素，从 0 开始计数

$("#two").click(function (){
    $("li:even").css("background","pink");
});

odd

匹配所有索引值为奇数的元素，从 0 开始计数

$("#two").click(function (){
    $("li:odd").css("background","pink");
});

eq(index)

匹配一个给定索引值的元素注:index从 0 开始计数

$("#two").click(function (){
    $("li:eq(3)").css("background","pink");
});

gt(index)

匹配所有大于给定索引值的元素注:index从 0 开始计数

$("#two").click(function (){
    $("li:gt(3)").css("background","pink");
});

lt(index)

选择结果集中索引小于 N 的 elements 注:index从 0 开始计数

$("#two").click(function (){
    $("li:lt(3)").css("background","pink");
});

jQuery选择器全解-内容过滤器

<div id="divTest">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li><a href=""></a></li>
        <li>内容过滤器</li>
        <li>hyip内容过滤器</li>
    </ul>
</div>
<input type="button" value="li_contains(text)" id="one"/>
<input type="button" value="li_empty+li" id="two"/>
<input type="button" value="li_has(selector)" id="three"/>

contains(text)

匹配包含给定文本的元素

 $("#one").click(function (){
    $("li:contains(‘hyip‘)").css("background","pink");
});

empty

匹配所有不包含子元素或者文本的空元素

 $("#one").click(function (){
    $("li:empty+li").css("background","pink");
});

:has(selector)

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

 $("#one").click(function (){
    $("li:has(a)").css("background","pink");
});

可见性过滤器 Visibility Filters

<ul>
    <li>可见1</li>
    <li style="display:none;">不可见2</li>
    <li style="display:none;">不可见<3/li>
    <li>可见4</li>
</ul>

hidden

匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden

$("#one").click(function (){
 alert($("li:hidden").length);
 });

visible

匹配所有的可见元素

$("#one").click(function (){
 alert($("li:visible").length);
 });

jQuery选择器全解-属性过滤器

<input type="text" id="yi" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />

<button id="one">点击</button>

[attribute]

查找所有input标签中含有 id 属性的 div 元素

$("#one").click(function (){
 $("input[id]").css("background","pink");
 });

[attribute=value]

查找所有 name为hyipinvest的值

$("#one").click(function (){
 $("input[name=‘hyipinvest‘]").css("background","pink");
 });

[attribute!=value]

查找所有input中name不为hyipinvest的值

$("#one").click(function (){
 $("input[name!=‘investhyip‘]").css("background","pink");
 });

[attribute^=value]

查找所有input中name以hyip开头的值

$("#one").click(function (){
 $("input[name^=‘hyip‘]").css("background","pink");
 });

[attribute$=value]

查找所有input中name以hyip结束的值

$("#one").click(function (){
 $("input[name$=‘hyip‘]").css("background","pink");
 });

[attribute=value]

查找所有input中name包含oo的值

$("#one").click(function (){
 $("input[name*=‘oo‘]").css("background","pink");
 });

jQuery选择器全解-子元素过滤器

html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。

（1）:nth-child选择器。

（2）:first-child、:last-child选择器（两种）。

（3）:only-child选择器。

子元素过滤器和上面基本过滤器相差不多，这里我就不一一举例了。

jQuery选择器全解-表单选择器——表单过滤器

<form id="form1" action="#">
    <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 rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
</form>

 $(document).ready(function(){
        var $alltext = $("#form1 :text");
        var $allpassword= $("#form1 :password");
        var $allradio= $("#form1 :radio");
        var $allcheckbox= $("#form1 :checkbox");
        var $allsubmit= $("#form1 :submit");
        var $allimage= $("#form1 :image");
        var $allreset= $("#form1 :reset");
        var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
        var $allfile= $("#form1 :file");
        var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
        var $allselect = $("#form1 select");
        var $alltextarea = $("#form1 textarea");
        var $AllInputs = $("#form1 :input");
        var $inputs = $("#form1 input");
        $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
                .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
                .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
                .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
                .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
                .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
                .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
                .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
                .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
                .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
                .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
                .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
                .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
                .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
                .css("color", "red")
        $("form").submit(function () { return false; }); // return false;不能提交.
    });

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery选择器全解-基础选择器