1.​​#id​​

  • 使用任何的​​元字符​​​作为名称的文本部分， 它必须被两个反斜杠转义：​​\\​​。
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

console.log($("#foo\\:bar"))
console.log($("#foo\\[bar\\]"))
console.log($("#foo\\.bar"))

2.​​prev + next​​

  • 匹配所有紧接在 prev 元素后的 next 元素
//匹配所有跟在 label 后面的 input 元素
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("label + input") //[ <input name="name" />, <input name="newsletter" /> ]

3.​​prev ~ siblings​​

  • 匹配 prev 元素之后的所有 siblings 元素
//找到所有与表单同辈的 input 元素
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form ~ input") //<input name="none" />

4.​​:even​​​ 与​​:odd​​


  • ​​:even​​ 匹配所有索引值为偶数的元素，从 0 开始计数
  • ​​:odd​​ 匹配所有索引值为奇数的元素，从 0 开始计数

5​​:gt(index)​​[great than] 与​​:lt(index)​​[little than]


  • ​​:gt(index)​​ 匹配所有大于给定索引值的元素
  • ​​:lt(index)​​ 匹配所有索引值为奇数的元素，从 0 开始计
  • 一个具有注脚的文本。

6.​​:lang(language)​​ 1.9+


  • 选择指定语言的所有元素。
  • :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)")

7.​​:header​​

  • 匹配如 h1, h2, h3之类的标题元素
\\给页面内所有标题加上背景色
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

$(":header").css("background", "#EEE");//[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

8.​​:animated​​

  • 匹配所有正在执行动画效果的元素
\\只有对不在执行动画效果的元素执行一个动画特效
<button id="run">Run</button><div></div>

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

9.​​:focus​​ 1.6+


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

//添加一个"focused"的类名给那些有focus方法的元素
.focused {
    background: #abcdef;
}

<div id="content">
    <input tabIndex="1">
    <input tabIndex="2">
    <select tabIndex="3">
        <option>select menu</option>
    </select>
    <div tabIndex="4">
        a div
    </div>
</div>

$( "#content" ).delegate( "*", "focus blur", function( event ) {
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});

10.​​:root​​ 1.9+


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

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

11.​​:target​​1.9+


  • 选择由文档​​URI​​的格式化识别码表示的目标元素。
  • 如果文档的​​URI​​​包含一个格式化的标识符，或​​hash​​​（哈希）， 然后​​:target​​​选择器将匹配ID和标识符相匹配的元素。 例如，给定的​​URI http://example.com/#foo​​​， ​​$( "p:target" )​​​，将选择​​<p id="foo">​​元素。
  • 这个不寻常的用法，可进一步讨论中找到 ​​W3C CSS specification​​.

12.​​:contains(text)​​

  • 匹配包含给定文本的元素
\\查找所有包含 "John" 的 div 元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

$("div:contains('John')")//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

13.​​:empty​​​ 与 ​​:parent​​


  • ​​:empty​​ 匹配所有不包含子元素或者文本的空元素
  • ​​:parent​​ 匹配含有子元素或者文本的元素

14.​​:has(selector)​​

  • 匹配含有选择器所匹配的元素的元素
//给所有包含 p 元素的 div 元素添加一个 text 类
<div><p>Hello</p></div>
<div>Hello again!</div>

$("div:has(p)").addClass("test");//[ <div class="test"><p>Hello</p></div> ]

15.​​:hidden​​​ 与 ​​:visible​​


  • ​​:hidden​​ 匹配所有不可见元素，或者type为hidden的元素
  • ​​:visible​​ 匹配所有的可见元素

16.​​attribute​​类


  • ​​[attribute]​​ 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
  • ​​[attribute=value]​​ 匹配给定的属性是某个特定值的元素
  • ​​[attribute!=value]​​​ 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于​​:not([attr=value])​​​要匹配含有特定属性但不等于特定值的元素，请使用​​[attr]:not([attr=value])​​
  • ​​[attribute^=value]​​ 匹配给定的属性是以某些值开始的元素
  • ​​[attribute$=value]​​ 匹配给定的属性是以某些值结尾的元素
  • ​​[attribute*=value]​​ 匹配给定的属性是以包含某些值的元素
  • ​​[attrSel1][attrSel2][attrSelN]​​ 复合属性选择器，需要同时满足多个条件时使用。

17.​​:only-child​​


  • 如果某个元素是父元素中唯一的子元素，那将会被匹配
  • 如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：​​<p><img/>图片</p>​​​，用​​$('p img:only-child')​​是可以匹配）

18.​​:only-of-type​​


  • 选择所有没有兄弟元素，且具有相同的元素名称的元素。
  • 如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。

19.​​form​​选择器


  • ​​:input​​ 匹配所有 input, textarea, select 和 button 元素
  • ​​:text​​ 匹配所有的单行文本框
  • ​​:password​​ 匹配所有密码框
  • ​​:radio​​ 匹配所有单选按钮
  • ​​:checkbox​​ 匹配所有复选框
  • ​​:submit​​​ 匹配所有提交按钮，理论上只匹配 ​​type="submit"​​​ 的​​input​​​或者​​button​​​，但是现在的很多浏览器，​​button​​​元素默认的​​type​​​即为​​submit​​​，所以很多情况下，不设置​​type​​​的​​button​​​也会成为筛选结果。为了防止歧义或者误操作，建议所有的​​button​​​在使用时都添加​​type​​属性。
  • ​​:image​​ 匹配所有图像域
  • ​​:reset​​ 匹配所有重置按钮
  • ​​:button​​ 匹配所有按钮
  • ​​:file​​ 匹配所有文件域
  • ​​:enabled​​ 匹配所有可用元素
  • ​​:disabled​​ 匹配所有不可用元素
  • ​​:checked​​​ 匹配所有选中的被选中元素(复选框、单选框等，​​select​​​中的​​option​​​)，对于​​select​​​元素来说，获取选中推荐使用 ​​:selected​​
  • ​​:selected​​ 匹配所有选中的option元素

20.​​$.escapeSelector(selector)​​

  • 这个方法通常被用在类选择器或者​​ID​​​选择器中包含一些​​CSS​​​特殊字符的时候，这个方法基本上与​​CSS​​​中​​CSS.escape()​​​方法类似，唯一的区别是​​jquery​​中的这个方法支持所有浏览器。
//对含有#号的ID进行编码
$.escapeSelector( "#target" ); // "\#target" 

//选择出类中包含.box的div
<div><div class="notMe">div class="notMe"</div>
<div class=".box myClass">div class=".box myClass"</div>
<div class=".box">span class=".box"</div></div>

$( "div" ).find( "." + $.escapeSelector( ".box" ) ); // [ <div class=".box myClass">div class=".box myClass"</div>,<div class=".box">span class=".box"</div> ]