jquery温故知新-选择器篇
1.#id[*]使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\\。
<span id="foo:bar"></span>
<span id="foo"></span>
<span id="foo.bar"></span>
console.log($("#foo\\:bar"))
console.log($("#foo\\"))
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) 与:lt(index)
[*]: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类
[*] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
[*] 匹配给定的属性是某个特定值的元素
[*] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not()要匹配含有特定属性但不等于特定值的元素，请使用:not()
[*] 匹配给定的属性是以某些值开始的元素
[*] 匹配给定的属性是以某些值结尾的元素
[*] 匹配给定的属性是以包含某些值的元素
[*] 复合属性选择器，需要同时满足多个条件时使用。
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> ]
文档来源：51CTO技术博客https://blog.51cto.com/StavinLi/3043324
页:
[1]