jquery系列之一——选择器（复合选择器）
16. 匹配包含给定文本的元素：:contains(text)
示例：查找所有包含 "John" 的 div 元素。
html:
<div>John Resig</div> <div>George Martin</div> <div>Malcom John Sinclair</div> <div>J. OhnjQuery</div>
jquery:
$("div:contains('John')")结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]
17. 匹配含有选择器所匹配的元素的元素：:has(selector)
示例：给所有包含 p 元素的 div 元素添加一个 text 类。
html:
<div><p>Hello</p></div> <div>Hello again!</div>
jquery:
$("div:has(p)").addClass("text");结果:
[ <div class="test"><p>Hello</p></div> ]
18. 匹配包含给定属性的元素：Array<Element(s)>[attribute]
示例：查找所有含有 id 属性的 div 元素。
html:
<div> <p>Hello!</p> </div> <div id="test2"></div>
jquery:
$("div[id]")结果:
[ <div class="test"><p>Hello</p></div> ]
19. 匹配给定的属性是某个特定值的元素：Array<Element(s)>[attribute=value]
示例：查找所有 name 属性是 newsletter 的 input 元素。
html:
<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
jquery:
$("input[name='newsletter']");结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />]
20. 匹配所有不含有指定的属性，或者属性不等于特定值的元素：Array<Element(s)>[attribute!=value]
此选择器等价于:not([attr=value])。
示例：查找所有 name 属性不是 newsletter 的 input 元素。
html:
<input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" />
jquery:
$("input[name!='newsletter']");结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
21.匹配给定的属性是以某些值开始的元素：Array<Element(s)>[attribute^=value]
示例：查找所有 name 以 'news' 开始的 input 元素。
html:
<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />
jquery:
$("input[name^='news']");结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]
22. 匹配给定的属性是以某些值结尾的元素：Array<Element(s)>[attribute$=value]
示例：查找所有 name 以 'letter' 结尾的 input 元素。
html:
<input name="newsletter" /> <input name="milkman" /> <input name="jobletter" />
jquery:
$("input[name$='letter']")结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]
23. 匹配给定的属性是以包含某些值的元素：Array<Element(s)>[attribute*=value]
示例：查找所有 name 包含 'man' 的 input 元素。
html:
<input name="man-news" /> <input name="milkman" /> <input name="letterman2" /> <input name="newmilk" />
jquery:
$("input[name*='man']")结果:
[<input name="man-news" />, <input name="milkman" />, <input name="letterman2" />]
24. 复合属性选择器，需要同时满足多个条件时使用：Array<Element(s)>[selector1][selector2][selectorN]
示例：找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的。
html:
<input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" />
jquery:
$("input[id][name$='man']")结果:
[<input id="letterman" name="new-letterman" />]
25. 匹配第一个子元素：Array<Element(s)>:first-child
注意：':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。
示例：在每个 ul 中查找第一个 li。
html:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jquery:
$("ul li:first-child")结果:
[<li>John</li>, <li>Glen</li>]
26. 匹配最后一个子元素：Array<Element(s)>:last-child
注意：':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素。
示例：在每个 ul 中查找最后一个 li。
html:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jquery:
$("ul li:last-child")结果:
[<li>Brandon</li>, <li>Ralph</li>]
27. 匹配唯一一个子元素：Array<Element(s)>:only-child
注意：如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配。
示例：在 ul 中查找是唯一子元素的 li。
html:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> </ul>
jquery:
$("ul li:only-child")结果:
[<li>Glen</li>]
28. 匹配其父元素下的第N个子或奇偶元素：Array<Element(s)>:nth-child
注意：':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
示例：在每个 ul 查找第 2 个li。
html:
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul>
jquery:
$("ul li:nth-child(2)")结果:
[<li>Karl</li>, <li>Tane</li>]