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

 

相关推荐