滑动变色——js和jquery对比

来源:互联网 发布:c语言实验学生管理系统 编辑:程序博客网 时间:2024/06/06 15:18

jQuery方法

<head>
    <script src="jquery-1.4.1.js" type="text/JavaScript"></script>
    <script type="text/javascript">
        $(function () {

            // 不需要on——
            $(".table1 tr").mouseenter(function () {
                $(this).css("backgroundColor", "yellow");
            }).mouseleave(function () {
                $(this).css("backgroundColor", "white");
            });
        })
    </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方法

<head>
    <script type="text/javascript">
        function ChangeColor() {
            var table = document.getElementByIdx_x("table1");
            var trs = table.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
               

                // 事件前面有on——
                trs[i].onmouseenter = function () {
                    this.style.backgroundColor = "yellow";
                }
                trs[i].onmouseleave = function () {
                    this.style.backgroundColor = "white";
                }
            }
        }
    </script>
</head>

0 0
原创粉丝点击