第十三章：第6节jQuery选择器——属性过滤器、子元素过滤器

属性过滤器：

[attribute]

attribute是属性名，匹配包含给定属性的元素。

$("div[id]")

<div>
 <p>Hello!</p>
</div>
<div id="test2"></div>

[attribute=value]

匹配给定的属性是某个特定值的元素

$("input[name='newsletter']")

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

[attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

$("input[name!='newsletter']")

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

[attribute^=value]

匹配给定的属性是以某些值开始的元素。

$("input[name^='news']")

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

$("input[name$='letter']")
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

[attribute*=value]

匹配给定的属性是以包含某些值的元素

$("input[name*='man']")

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

[selector1][selector2][selectorN]

复合属性过滤器，需要同时满足多个条件时使用。

$("input[id][name$='man']")

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

总结：

属性过滤器还是挺实用的。比如匹配表单中的元素，用属性过滤器很方便。

子元素过滤器：

:first-child

匹配第一个子元素。“:first” 只匹配一个元素，而“:first-child”匹配每个父元素的第一个子元素。

$("ul li:first-child")
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

$("ul li:first")
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul> 

:last-child

匹配最后一个子元素。“:last” 只匹配一个元素，而“:last-child”匹配每个父元素的最后一个子元素。

$("ul li:last-child")
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

:nth-child

匹配其父元素下的第N个子或奇偶元素。“:eq(index)” 只匹配一个元素，而“:nth-child(index)”这个将为每一个父元素匹配子元素。

注意的地方：:nth-child(index)从1开始的，而:eq(index)是从0算起的！

括号里除了填写下标，也可以这样使用:

:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

$("ul li:nth-child(2)")
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，那将不会被匹配。

$("ul li:only-child")
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
</ul>

总结：子元素过滤器用的不多。