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>]