jquery :even(偶数索引)和:odd（奇数索引）选择器的区别

jquery :even和:odd选择器的区别
作者： default|标签：jQuery Even 选择器|2017-6-23 09:56
:even  页面范围内偶数的匹配元素

 

那么:nth-child(even) 的意思就是从第1开始的偶数元素，:even的意思是指从第0开始的偶数元素

在实际中一个常见的例子就是，当给表格的偶数行设置变色时，可以跳过表头行，而从第1行开始设置

让我们看一个实际的例子，把表格的偶数行的背景色设置为红色，看一下两种写法的不同结果

用:nth-child(even)

代码：

1
$('table tr:nth-child(even)').css('background-color','red');

效果如下图：

1571.png

用:even

代码：

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

效果如下图：

1572.png

jquery 怎样使用变量的odd, even选择器

1
2
3
$(function(){
$("#cate_list:odd").addClass('single');
$("#cate_list:even").addClass('double'); });

怎样将.cate_list改为变量? 试过

1
2
3
4
$(function(){
var id="cate_list";
$("#"+id).addClass('single');
});

jquery中odd和even选择器的用法说明 :odd 选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。 index 值从 0 开始，所有第一个元素是偶数 (0)。 最常见的用法：与其他元素/选择器一起使用，来选择指定的组中奇数序号的元素（如上面的例子）。 语法

1
$(":odd")

比如：$("tr:odd")表示获取奇数行 类似地有 $("tr:even")表示获取偶数行。

even：控制单数行样式。

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="Script/jQuery-1.3.2.min.js"></script>
    <style type="text/css">
        .old
        {
            background-color: red;
        }
        .even
        {
            background-color: Fuchsia;
        }
 
    </style>
    <script type="text/javascript">
    $(document).ready(
    function(){
      $("tr:old").addClass("old");
     $("tr:even").addClass("even");
     //$("td:contains('第五学期')").addClass("tdfont");
    }
    );
    </script>
</head>
<body>
 
    <table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td>
                第一学期
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                第二学期
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                第三学期
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                第四学期
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                第五学期
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
    </table>
</body>
</html>

以上就是jquery :even和:odd选择器的区别的详细内容，更多请关注php中文网其它相关文章！

 

 

posted @ 2017-10-18 11:15  sky20080101  阅读(805)  评论(0)    收藏  举报