【8】jQuery学习——入门jQuery选择器之过滤选择器-子元素过滤选择器

这次我们来学习下-子元素过滤器，看了下其他网站的实例都是用ul做例子，不知道这个子元素过滤是不是同样适合ol、dl这样的列表型的标签，还是其他的标签也行，这个子元素要怎么来算呢？谁来说说？

好了，也不纠结了，下面来看看这4个子元素过滤器吧。

选择器	描述	返回
$("Element:nth-child(index/even/odd/equation)")	选取每个父元素下的第index个子元素或者奇偶元素	集合元素
$("Element:first-child")	选取每个父元素的第一个子元素	集合元素
$("Element:last-child")	选取每个父元素的最后一个子元素	集合元素
$("Element:only-child")	如果某个元素是它父元素中唯一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配	集合元素

下面分别来说下这4个选择器

=============================================================================

:nth-child() 过滤选择器的功能如下：

选择每个父级下的第N（index）个子级元素或者奇偶元素，（index）索引从1开始，而eq函数（eq函数会在后面学习到）从0开始，只匹配一个元素。
        ┣━:nth-child(2)索引：         选取每个父元素下的索引值为2的元素
        ┣━:nth-child(even)偶数：    由于index是从1开始的，所以这里取得的索引值为偶数的元素，实际上就是我们正常的偶数了
        ┣━:nth-child(odd)奇数：     由于index是从1开始的，所以这里取得的索引值为奇数的元素，实际上就是我们正常的奇数了
        ┣━:nth-child(3n)表达式：    选取每个父元素下的索引值为3的倍数的元素，（n从0开始）
        ┣━:nth-child(3n+1)表达式：选取每个父元素下的索引值为（3n+1）的元素，（n从0开始）
        ┗━:nth-child(3n+2)表达式：能选取每个父元素下的索引值为（3n+2）的元素，（n从0开始）

jQuery在实现:nth-child(n)是严格来自CSS规范，而不是遵循JavaScript的“0索引”的计数，所以从1开始计数；
对于表达式n为什么会从0开始呢？自己带0算算就知道了:nth-child(3n)=:nth-child(3*0)=:nth-child(0)，这样算下，还真是获取不到元素的，然后大家就应该能明白了为什么要从0开始了。

==============================================================================

:first-child 过滤选择器的功能如下：

:first-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:first-child")选取的是每个<ul>中第1个<li>

:first只返回单个元素

==============================================================================

:last-child 过滤选择器的功能如下：

:last-child选择符将为每个父元素匹配第1个子元素。例如$("ul li:last-child")选取的是每个<ul>中最后1个<li>

:last只返回单个元素

==============================================================================

:only-child 过滤选择器的功能如下：

这个要给个列子说明下才行

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

</ul>

<ul>

  <li>one</li>

</ul>

 jQuery获取代码：

$("ul li:only-child")

 结果是：<li>one</li>，因为这个ul下只有他一个li，而它上面那个ul有3个li，不具有唯一子元素。

==============================================================================

ps.文章参考梦三秋和w3cfuns网站