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.:target1.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> ]