这次我们来上学下-子元素过滤器,看了产任何网站的实例都是因此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网站

相关文章