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="http://www.mamicode.com/根据ID选择" /><a>根据元素名称选择</a><input type="text" class="classname" value="http://www.mamicode.com/根据元素css类名选择" />alert($("#ID").val() +  "  " + $("a").text() + "    " + $(".classname").val());

selector1,selector2,selectorN选择器

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

<h2 class="title">并集选择器 的h2</h2><dl>    <dt>并集选择器</dt></dl><input  type="button" value="http://www.mamicode.com/设置所有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="http://www.mamicode.com/投资" />    <input id="next" type="text" />    <input type="text"  value="http://www.mamicode.com/担当" />    <input type="text" title="学习" value="http://www.mamicode.com/学习" />    <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="http://www.mamicode.com/学习" checked="checked" />        <input type="radio" value="http://www.mamicode.com/不学习" />    </ul></div><input type="button" value="http://www.mamicode.com/li_first" id="one"/><input type="button" value="http://www.mamicode.com/li_last" id="two"/><input type="button" value="http://www.mamicode.com/not(selector)" id="three"/><input type="button" value="http://www.mamicode.com/li_even" id="four"/><input type="button" value="http://www.mamicode.com/li_odd" id="five"/><input type="button" value="http://www.mamicode.com/li_eq(index)" id="six"/><input type="button" value="http://www.mamicode.com/li_gt(2)" id="seven"/><input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/li_contains(text)" id="one"/><input type="button" value="http://www.mamicode.com/li_empty+li" id="two"/><input type="button" value="http://www.mamicode.com/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="http://www.mamicode.com/hyip投资" /><input type="text" name="investhyip" value="http://www.mamicode.com/投资hyip" /><input type="text" name="google" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/提交"/><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选择器全解-基础选择器