使用任何的元字符（如 !"#$%&‘()*+,./:;<=>?@[\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\。 参见示例。

//查找ID的为"myDiv"的元素。并给他个css样式<div id="myDiv">I am div</div><div id="notdiv">notDiv</div><script> $(function(){ $("#div").css({    width:100,    height:100,    border:"1px solid #000"    }) }) </script>//jQuery 代码： $("#myDiv");

//查找含有特殊字符的元素。　　<span id="foo:bar"></span>　　<span id="foo[bar]"></span>　　<span id="foo.bar"></span>//jQuery 代码：　　#foo\\[bar\\]//结果：[<span id="foo[bar]"></span>]

//查找某个元素,比如查找DIV元素    <div>DIV1</div>    <div>DIV2</div>    <span>notDiv</span>//jQuery代码    $("div");

//查找所有类是 "myClass" 的元素.    <div class="notMe">div class="notMe"</div>    <div class="myClass">div class="myClass"</div>    <span class="myClass">span class="myClass"</span>//jQuery 代码:    $(".myClass");    

多用于结合上下文来搜索。

//找到每一个元素        <div>DIV</div>    <span>SPAN</span>    <p>P</p>//jQuery 代码:    $("*")//结果:    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

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

//找到匹配任意一个类的元素。    <div>me</div>    <p class="myClass">me</p>    <span>me</span>    <p class="notMyClass">p class="notMyClass"</p>//jQuery 代码:    $("div,span,p.myClass");//结果：[ <div>me</div>, <p class="myClass">me</p>, <span>me</span> ]

在给定的祖先元素下匹配所有的后代元素

//找到form表单中所有的 input 元素    <form>          <label>Name:</label>          <input name="name" />      <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />     </fieldset>    </form>    <input name="none" /> //jQuery 代码:    $("form input")   

//匹配表单中所有的子级input元素。        <form>      <label>Name:</label>      <input name="name" />      <fieldset>      <label>Newsletter:</label>          <input name="newsletter" />     </fieldset>    </form>    <input name="none" />//jQuery 代码：    $("form > input");

//匹配所有跟在 label 后面的 input 元素    <form>      <label>Name:</label>      <input name="name" />      <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />     </fieldset>    </form>    <input name="none" />//jQuery 代码:    $("label + input");

//找到所有与表单同辈的 input 元素    <form>      <label>Name:</label>      <input name="name" />      <fieldset>          <label>Newsletter:</label>          <input name="newsletter" />     </fieldset>    </form>    <input name="none" />  //他与表单form同辈  //jQuery 代码:    $("form ~ input")

// 获取匹配的第一个元素   <ul>        <li>list item 1</li>    //first                 <li>list item 2</li>        <li>list item 3</li>        <li>list item 4</li>        <li>list item 5</li>    </ul>//jQuery 代码:    $(‘li:first‘);

在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）

//查找所有未选中的 input 元素    <input name="apple" />　　//选中的 input 元素

　　<input name="flower" checked="checked" />
// jQuery 代码:
 $("input:not(:checked)")

//查找表格的1、3、5...行（即索引值0、2、4...）<table>  <tr><td>Header 1</td></tr>   //  索引值0     <tr><td>Value 1</td></tr>  <tr><td>Value 2</td></tr> //  索引值2</table>//jQuery 代码:    $("tr:even")

//查找表格的2、4、6行（即索引值1、3、5...）<table>  <tr><td>Header 1</td></tr>  <tr><td>Value 1</td></tr>   //索引值1   <tr><td>Value 2</td></tr></table>//jQuery 代码:    $("tr:odd")

//查找第二行<table>  <tr><td>Header 1</td></tr>   //索引值0   <tr><td>Value 1</td></tr>  //索引值1  <tr><td>Value 2</td></tr>  //索引值2</table>//jQuery 代码:    $("tr:eq(1)")

//查找第二第三行，即索引值是1和2，也就是比0大<table>  <tr><td>Header 1</td></tr>  <tr><td>Value 1</td></tr>  //第二行  <tr><td>Value 2</td></tr>   //第三行</table>//jQuery 代码:$("tr:gt(0)")

:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。

这种用法的进一步讨论可以在 W3C CSS规范中找到。

//选择所有<P> 的语言属性:$("p:lang(it)")

//获取匹配的最后个元素<ul>    <li>list item 1</li>    <li>list item 2</li>    <li>list item 3</li>    <li>list item 4</li>    <li>list item 5</li>  //最后一个</ul>//jQuery 代码:$(‘li:last‘)

//查找第一第二行，即索引值是0和1，也就是比2小<table>  <tr><td>Header 1</td></tr> //索引值0，比2小  <tr><td>Value 1</td></tr>    //索引值1，比2小  <tr><td>Value 2</td></tr>   //索引值2</table>//jQuery 代码:$("tr:lt(2)")

//给页面内所有标题加上背景色<h1>Header 1</h1>  //h1<p>Contents 1</p><h2>Header 2</h2>  //h2<p>Contents 2</p>$(":header").css("background", "#ccc");

//只有对不在执行动画效果的元素执行一个动画特效<button id="run">Run</button><div></div>$("#run").click(function(){  $("div:not(:animated)").animate({ left: "+=20" }, 1000);});

如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(‘:focus‘)等同为$(‘*:focus‘)。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。

//添加一个"focused"的类名给那些有focus方法的元素//css代码：.focused {    background: #abcdef;}//html代码：<div id="content">    <input tabIndex="1">    <input tabIndex="2">    <select tabIndex="3">        <option>select menu</option>    </select>    <div tabIndex="4">        a div    </div></div>//jq代码：$( "#content" ).delegate( "*", "focus blur", function( event ) {    var elem = $( this );    setTimeout(function() {       elem.toggleClass( "focused", elem.is( ":focus" ) );    }, 0);});

在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。

//设置<html>背景颜色为黄色$(":root").css("background-color","yellow");

如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。  例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。

这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.

//查找所有包含 "John" 的 div 元素<div>John Resig</div>      //查找包含 "John" 的 div 元素<div>George Martin</div><div>Malcom John Sinclair</div>   //查找包含 "John" 的 div 元素<div>J. Ohn$("div:contains(‘John‘)")

//查找所有不包含子元素或者文本的空元素<table>  <tr><td>Value 1</td><td></td></tr>  <tr><td>Value 2</td><td></td></tr></table>$("td:empty")

<div><p>Hello</p></div>   <div>Hello again!</div>//给所有包含 p 元素的 div 元素添加一个 text 类$("div:has(p)").addClass("test");

<table>  <tr>        <td>Value 1       //td 元素 的文本   Value 1             < p>p 1</p>  //td子元素            </td><td>        </td>    </tr>  <tr><td>Value 2</td><td></td></tr></table>//查找所有含有子元素或者文本的 td 元素$("td:parent")

<table>  <tr style="display:none"><td>Value 1</td></tr>  <tr><td>Value 2</td></tr></table>//查找隐藏的 tr$("tr:hidden")

<table>  <tr style="display:none"><td>Value 1</td></tr>  <tr><td>Value 2</td></tr></table>//查找所有可见的 tr 元素$("tr:visible")

<div>  <p>Hello!</p></div><div id="test2"></div>//查找所有含有 id 属性的 div 元素$("div[id]")

<input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" /><input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" /><input type="checkbox" name="accept" value="http://www.mamicode.com/Evil Plans" />//查找所有 name 属性是 newsletter 的 input 元素，并给一个选中的checked$("input[name=‘newsletter‘]").attr("checked", true);

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

<input type="checkbox" name="newsletter" value="http://www.mamicode.com/Hot Fuzz" /><input type="checkbox" name="newsletter" value="http://www.mamicode.com/Cold Fusion" /><input type="checkbox" name="accept" value="http://www.mamicode.com/Evil Plans" />//查找所有 name 属性不是 newsletter 的 input 元素$("input[name!=‘newsletter‘]").attr("checked", true);

<input name="newsletter" /><input name="milkman" /><input name="newsboy" />//查找所有 name 以 ‘news‘ 开始的 input 元素$("input[name^=‘news‘]")

<input name="newsletter" /><input name="milkman" /><input name="jobletter" />//查找所有 name 以 ‘letter‘ 结尾的 input 元素$("input[name$=‘letter‘]")

<input name="man-news" /><input name="milkman" /><input name="letterman2" /><input name="newmilk" />//查找所有 name 包含 ‘man‘ 的 input 元素$("input[name*=‘man‘]")

<input id="man-news" name="man-news" /><input name="milkman" /><input id="letterman" name="new-letterman" /><input name="newmilk" />//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的$("input[id][name$=‘man‘]")

类似的 :first 匹配第一个元素，而此选择符将为每个父元素匹配一个子元素

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>//在每个 ul 中查找第一个 li$("ul li:first-child")

<div id="n1">    <div id="n2" class="abc">        <label id="n3">label1</label>        <span id="n4">span1</span>        <span id="n5" class="abc">span2</span>        <span id="n6">span3</span>    </div>    <div id="n7">        <span id="n8" class="abc">span1</span>        <span id="n9">span2</span>    </div></div>//查找作为父元素的span类型子元素中的"长子"的span标签$("span:first-of-type");

:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>//在每个 ul 中查找最后一个 li$("ul li:last-child")

<div id="n1">    <div id="n2" class="abc">        <label id="n3">label1</label>        <span id="n4">span1</span>        <span id="n5" class="abc">span2</span>        <span id="n6">span3</span>    </div>    <div id="n7">        <span id="n8" class="abc">span1</span>        <span id="n9">span2</span>    </div></div>//查找作为父元素的span类型子元素中的最后一个的span标签$("span:last-of-type");

:eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li>  <li>Tane</li>  <li>Ralph</li></ul>//在每个 ul 查找第 2 个li$("ul li:nth-child(2)")

因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含两个<li>， $(‘li:nth-child(1)‘)选择第一个<li>，而$(‘li:eq(1)‘)选择第二个。

这个不寻常的用法，可进一步讨论中找到W3C CSS specification.

<ul>	<li>1</li>	<li>2</li>	<li>3</li>	<li>4</li></ul>//在每个匹配的ul中查找倒数第二个li$("ul li:nth-last-child(2)");

因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。 对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含3个<li>，$(‘li:nth-last-of-type(1)‘)选择第3个，也就是最后一个<li>。

这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.

<ul>	<li>1</li>	<li>2</li>	<li>3</li>	<li>4</li></ul>//在每个匹配的ul中查找倒数第二个li$("ul li:nth-last-of-type(2)");

因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。

这个不寻常的用法，可进一步讨论中找到W3C CSS specification

<div>  <span>John</span>  <b>Kim</b>  <span>Adam</span>  <b>Rafael</b>  <span>Oleg</span></div><div>  <b>Dave</b>  <span>Ann</span></div><div>  <i><span>Maurice</span></i>  <span>Richard</span>  <span>Ralph</span>  <span>Jason</span></div>//查找每个span，这个 span 是 其所有兄弟span元素中的第二个元素。$("span:nth-of-type(2)");

如果父元素中含有其他元素，那将不会被匹配。

<ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></ul><ul>  <li>Glen</li></ul>//在 ul 中查找是唯一子元素的 li$("ul li:only-child")

如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

<form>    <input type="button" value="http://www.mamicode.com/Input Button"/>    <input type="checkbox" />    <input type="file" />    <input type="hidden" />    <input type="image" />    <input type="password" />    <input type="radio" />    <input type="reset" />    <input type="submit" />    <input type="text" />    <select><option>Option</option></select>    <textarea></textarea>    <button>Button</button></form>//查找所有的input元素，下面这些元素都会被匹配到。$(":input")

<form>  <input type="text" />  <input type="checkbox" />  <input type="radio" /></form>//查找所有文本框$(":text")

<input type="image" />//匹配所有图像域$(":image")

<form>  <input name="email" disabled="disabled" />  <input name="id" />   //可用</form>//查找所有可用的input元素$("input:enabled")

<form>  <input name="email" disabled="disabled" />  //不可用  <input name="id" /></form>//查找所有不可用的input元素$("input:disabled")

<form>  <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Daily" />  <input type="checkbox" name="newsletter" value="http://www.mamicode.com/Weekly" />  <input type="checkbox" name="newsletter" checked="checked" value="http://www.mamicode.com/Monthly" /></form>//查找所有选中的复选框元素$("input:checked")

<select>  <option value="http://www.mamicode.com/1">Flowers</option>  <option value="http://www.mamicode.com/2" selected="selected">Gardens</option>   //selected  <option value="http://www.mamicode.com/3">Trees</option></select>//查找所有选中的选项元素$("select option:selected")