03jquery写法

最新推荐文章于 2024-07-25 19:32:28 发布

原创最新推荐文章于 2024-07-25 19:32:28 发布 · 574 阅读

0 ·

CC 4.0 BY-SA版权

本文通过一个简单的HTML页面示例，介绍了如何利用jQuery库来简化DOM元素的选择与操作过程。其中包括了基本的DOM元素点击事件绑定及样式修改等功能，展示了jQuery在网页开发中的便捷性。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{  border:3px solid pink;
                background: orange;
            }
        li{background: blue;}
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
    /*  window.onload = function(){

            var oDiv = document.getElementById("div1");

            oDiv.onclick = function(){
                alert(this.innerHTML);
            }

        }   */

        $(function (){
            var oDiv = $("#div1");

            oDiv.click(function(){
                alert($(this).html());
            });

            $("ul").children().css("background","black")

        })
    </script>
</head>
<body>
    <div id="div1">div</div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>