滑动变色——js和jQuery对比

 

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.getElementById("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>

你可能感兴趣的:(jquery,function,table,Class)