`
txf2004
  • 浏览: 6866492 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery选择器:nth-child(even) 与:even的区别

 
阅读更多

首先看一下: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');

效果如下图:

1表头 表头
2
3
4
5

:even

代码:$('table tr:even').css('background-color','red');

效果如下图:

0表头 表头
1
2
3
4


分享到:
评论

相关推荐

    jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...

    jquery子元素过滤选择器使用示例

    //偶数行 //$(‘li:nth-child(even)’).addClass(‘class1’); //奇数行 //$(‘li:nth-child(odd)’).addClass(‘class1’); //第一行 //$(‘li:nth-child(1)’).addClass(‘class1’); //$(‘li:first-child’)....

    css选择器apolo

    * 参考: jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下,可以直接find * selector1,selector2 将每一个...

    jQuery Selectors(选择器)的使用(七、子元素篇)

    本篇讲解::nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG...

    JQuery新版中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not(selector) :even :odd :eq...

    那些年,我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一、$符号 1、选择器 可以选择html标签,...

    jquery1.11.0手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :not(selector) :even :odd :eq(index) :...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...

    Jquery 1.3 简体中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

    JQuery 1.3 中文参考手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

    jQuery1.4 API

    ) scrollLeft( [val] ) 尺寸 height( [val] ) width( [val] ) innerHeight() innerWidth() outerHeight(options) outerWidth(options) 选择器基本 #id element .class * selector1,selector2,selectorN 层级 ...

    jQuery 1.4.1 中文参考

    3. 选择器 37 3.1 基本 37 3.1.1 #id 37 3.1.2 element 38 3.1.3 .class 38 3.1.4 * 39 3.1.5 selector1,selector2,selectorN 39 3.2 层级 40 3.2.1 ancestor descendant 40 3.2.2 41 3.2.3 prev + next 41 3.2.4 ...

Global site tag (gtag.js) - Google Analytics