像写css选择器一样写jQuery选择器(三)【jQuery入门六】

接《像写css选择器一样写jQuery选择器(二)

五、Jquery的子元素选择器

  1. :first-child :匹配每个父元素的第一个子元素,相当于E:nth-child(0),例如:$(“ul li:first-child”);
  2. :last-child :匹配每个父元素的最后一个子元素,例如:$(“ul li: last -child”);
  3. :nth-child(index/even/odd/equation):匹配每一个父元素的第N个子或奇偶元素,例如:$(“ul li:nth-child(2)”);
  4. :only-child :如果某个元素是父元素中唯一的子元素,那将会被匹配$(“ul li:only-child”);

六、子元素选择器和过滤性选择器的一些区别

:first-child和:first:

:first只匹配一个元素,而:first-child将为每个父元素匹配一个子元素,所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素,而:first永远只能匹配到一个元素。

:last-child和:last的区别道理也是一样的;

看示例:

[code=”html”]

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



像写css选择器一样写jQuery选择器(三)【jQuery入门六】-WEBTian开发

我正在学习并且应用的技术

  • javascript
  • css2.1
  • html4
  • MXML

我想学习的技术

  • actionscript
  • css 3
  • html 5
  • PHP

我精通的技术

  • 群里吹水
  • 忽悠新人



[/code]

:nth-child(index/even/odd/equation)和:eq(index)

:eq(index) 只匹配一个元素,索引值从0开始;

:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式;

:nth-child(even)// 匹配每一个父元素的偶数元素;

:nth-child(odd) // 匹配每一个父元素的奇数元素;

:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素;

:nth-child(2) // 匹配每一个父元素的第2个元素;

:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素

:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素,而:eq(index)永远只能匹配到一个元素。

看示例(顺带:only-child也在这里测试一下):

[code=”html”]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



像写css选择器一样写jQuery选择器(三)【jQuery入门六】-WEBTian开发

我正在学习并且应用的技术

  • javascript
  • css2.1
  • html4
  • MXML

我想学习的技术

  • actionscript
  • css 3
  • html 5
  • PHP

我精通的技术

  • 群里吹水






[/code]

赞(0) 打赏
未经允许不得转载:WEBTian开发 » 像写css选择器一样写jQuery选择器(三)【jQuery入门六】

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    投更新票+1

    10年前 (2009-07-07)回复
  2. #-48

    最后一个匹配错了
    ul li:only-child应该是匹配群里吹水

    ecren9年前 (2010-02-23)回复
  3. #-47

    讲解的很详细呀~~让我明白了子元素选择器和过滤性选择器的一些区别
    嘿嘿~~

    8年前 (2011-01-07)回复

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏