jQuery选择器:nth-child(even) 与:even的区别
2012-05-05 20:38
405 查看
首先看一下:nth-child和:even的说明
:nth-child(n) 第n个子节点,n从1开始
:even 页面范围内偶数的匹配元素
那么:nth-child(even) 的意思就是从第1开始的偶数元素,:even的意思是指从第0开始的偶数元素
在实际中一个常见的例子就是,当给表格的偶数行设置变色时,可以跳过表头行,而从第1行开始设置
让我们看一个实际的例子,把表格的偶数行的背景色设置为红色,看一下两种写法的不同结果
用:nth-child(even)
代码:$('table tr:nth-child(even)').css('background-color','red');
效果如下图:
用:even
代码:$('table tr:even').css('background-color','red');
效果如下图:
:nth-child(n) 第n个子节点,n从1开始
:even 页面范围内偶数的匹配元素
那么:nth-child(even) 的意思就是从第1开始的偶数元素,:even的意思是指从第0开始的偶数元素
在实际中一个常见的例子就是,当给表格的偶数行设置变色时,可以跳过表头行,而从第1行开始设置
让我们看一个实际的例子,把表格的偶数行的背景色设置为红色,看一下两种写法的不同结果
用:nth-child(even)
代码:$('table tr:nth-child(even)').css('background-color','red');
效果如下图:
1表头 | 表头 |
2 | |
3 | |
4 | |
5 |
代码:$('table tr:even').css('background-color','red');
效果如下图:
0表头 | 表头 |
1 | |
2 | |
3 | |
4 |
相关文章推荐
- JQuery选择器 eq(n) 和nth-child(n)的区别
- JQuery中位置选择器:nth-child(N)与:eq(N)的区别
- 2015-07-21 JQuery 第一课(JQ选择器:ID,类,特殊,奇偶ODD\event,eq,nth-child,子元素,包含,位置,属性,过滤)
- jquery :nth-child()选择器的简单应用
- jQuery 选择器(:nth-child(n))详解
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
- 学习jQuery顺便学习下CSS选择器:奇偶匹配nth-child(even)
- jQuery :nth-child前有无空格的区别分析
- jQuery选择器(:nth-child(n))详解
- CSS3伪类选择器:nth-child()(nth-child(odd)/nth-child(even))
- 浅谈jquery选择器 :first与:first-child的区别
- JQuery_JQuery选择器(:nth-child(n))详解
- jquery 中 first 与 first-child选择器的区别
- CSS中:nth-child和JQuery:eq的区别
- [转载]jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
- jQuery中first-child与first选择器区别
- jQuery 选择器(:nth-child(n))详解
- jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
- css 伪类选择器 :nth-child(n) 与:nth-of-type(n)的区别
- jQuery过滤器:eq和:nth-child的区别