jQuery的nth-child(N)选择符

说说nth-child(an+b)。

nth-child()这个东西,是CSS3中的一个伪类选择符,jQuery也拿来用了。

国内翻译教材《jQuery基础教程》中有一句这样的翻译“......因此CSS选择符$('p:nth-child (1)')取得的是作为其父元素第1个子元素的所有p。”初读此句,总觉得不易理解,于是便有了google 的冲动(在这里要强烈BS一下教育网,网速慢的比蜗牛还慢,打开google都要等半天,下载基本围绕在 1Byte/5s左右,jQuery中文社区也访问不了。)

经过一整晚的搜索之后,中文版的解释大概如下:

匹配其父元素下的第N个子元素,当然an+b也可以换为odd或even,这时候的意思就是匹配其父元素下的奇 (偶)元素。其与eq(index)的区别是:eq(index)只匹配一个元素。而nth-child()将为每一个父元素匹配子 元素。:nth-child从1开始的,而:eq()是从0算起的!

在CSS的教程里有人这样说:nth-child()的参数是an+b,如果按照w3.org上的描述,写成中文,很可能会 让人头晕,再加上笔者的文笔水平有限,所以我决定避开an+b的说法,把它拆分成5种写法共5部分来说明(详 见http://www.webjx.com/css/pcss-10232.html)。读完整篇文章之后,对其理解还是晕乎乎的,而且其后 给出的示例直接与我做的实验矛盾(后来分析是他的实验没有element的嵌套所致)。

于是只好找出英文原版:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for a given positive integer or zero value of n.

注意这么一句“in the document tree”。我不知道为什么那么多的中文翻译里把这个词语去 掉了,但它确实对理解这

个选择符很关键。

现在,让我们重新来理解这个选择符。参数an+b所代表的意思再不去深究,以$('p:nth-child(2)')举例 :

在我们的p树中(in the document tree),选取所有具有1(an+b-1)个兄长(siblings before it) 的p

(element)。这时候,选取的结果那应该是element集合了。

其实,结合“树”这个概念,对nth-child()这个选择符还是很好理解的。如下图:

图1 p:nth-child(1)和p:nth-child(2)选取的元素图例

用我们家族关系来形象地说,nth-child(N)选取的是在我们的家族中所有的老N的集合。

在这里,还有一个问题:
$('p:nth-child(odd)').css("color","red");
$('p:nth-child(even)').css("color","blue");

用了上面两句,所有p的字体颜色会以红蓝间隔的出现吗?答案当然是:不会。

参考文献:

《Selectors W3C Working Draft 15 December 2005》,2005.10.15

时间: 2024-10-30 06:52:46

jQuery的nth-child(N)选择符的相关文章

jQuery库的导入与选择符

本人最近学图灵系列丛书中<jQuery基础教程>,现将相关摘录整理如下(后续章节也会相继整理出来). 关于库的导入: 引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前.否则,在我们编写的代码中将引用不到jQuery框架. jQuery中基本的操作就是选择文档中的某个部分.这是通过$()结构来完成的.通常,该结构中需要一个字符串参数,参数可以包含任CSS选择符表达式.$()函数实际上就是jQuery对象的一个制造工厂.jQ

jquery选择符快速提取web表单数据示例

 遇到要重复多次同样的事时,就想找一种省时省力的方法,下面就为大家介绍下利用jquery选择符快速提取web表单数据 本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法.    以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法

初窥JQuery(一)jquery选择符 必备知识点_jquery

本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的

JQUERY的属性选择符和自定义选择符使用方法(二)_jquery

例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY

jQuery代码优化 选择符篇_jquery

本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述

jQuery 关于伪类选择符的使用说明_jquery

   jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符   :nth-child的用法         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div>    <ul>   

jquery选择符快速提取web表单数据示例_jquery

本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name

jQuery选择符介绍 jQuery选择符怎么用

jQuery选择符介绍 1.CSS选择符 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. 2.jQuery库支持XPath选择符 如: 3.$('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: 4.$('div[ol]')为取得所以包含一个ol属性的div元

浏览器IE6不支持的CSS样式的选择符

1. child selector h1 > strong { color:red;} 无效, 只能使用 h1 strong {color:red; } 不支持子选择符,但支持派生选择符. 2.sibling selector li+li { font-style:bold; } 无效. 3.Pseudo-Class Selector有限支持. a:link :visited { color:#fff;},只认最后一个:visited. 最好按如下顺序写: a:link {color: navy