滑动变色——js和jquery对比

最新推荐文章于 2021-08-24 11:21:21 发布

花语者

最新推荐文章于 2021-08-24 11:21:21 发布

阅读量522

点赞数

分类专栏：【前端】jQuery

【前端】jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>