隔行变色——js和jQuery对比

简介:
 

Jquery方法

<head>
    <title></title>
    <script src="jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
           
$('.table1 tr:even').css("backgroundColor", "yellow");
        });
    </script>

</head>
<body>
    <table class="table1">
        <tr>
            <td>
                喜洋洋
            </td>
        </tr>
        <tr>
            <td>
                喜洋洋
            </td>
        </tr>
        <tr>
            <td>
                喜洋洋
            </td>
        </tr>
        <tr>
            <td>
                喜洋洋
            </td>
        </tr>
        <tr>
            <td>
                喜洋洋
            </td>
        </tr>
    </table>
</body>

 

Js操作

<script type="text/javascript">
        function ChangeColor() {
            var table = document.getElementById("table1");
            var trs = table.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                if (i % 2 == 0) {
                    trs[i].style.backgroundColor = "yellow";
                }
            }
        }
    </script>

目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
12天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
12 0
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
8 0
|
3月前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
29 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
38 0
|
3月前
|
JavaScript 前端开发
原生js与jQuery显示隐藏div的几种方法
原生js与jQuery显示隐藏div的几种方法
38 0
|
3月前
|
JavaScript
多条件搜索(单条件也可以)原生js/jquery
多条件搜索(单条件也可以)原生js/jquery
23 0
|
3月前
|
JavaScript 前端开发