jQuery入口函数

最新推荐文章于 2024-01-04 10:48:30 发布

「已注销」

最新推荐文章于 2024-01-04 10:48:30 发布

阅读量287

点赞数

本文链接：https://blog.csdn.net/m0_57835615/article/details/117438596

版权

jQuery入口函数可以使DOM结构渲染完毕后，便执行内部代码，不必等到所有的外部资源加载完毕，相当于原生JS中的DOMContentLoaded。不同于原生JS中的load事件（所有外部资源加载完成后才开始执行内部代码）。

jQuery入口函数的两种写法：

第一种：

语法格式：

        $(function(){
            // 开始写 jQuery 代码
            
        });

示例：

    <script src="jQuery.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgba(21, 184, 62, 0.596);
        }
    </style>
</head>

<body>
    <script>
        jQuery(function () {
            $('div').css('border', '3px solid gray');
        });
    </script>
    <div></div>
</body>

效果图：

第二种：

语法格式：

        $(document).ready(function(){
                // 开始写 jQuery 代码
        });

示例：

    <script src="jQuery.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgba(21, 184, 62, 0.596);
        }
    </style>
</head>

<body>
    <script>
        $(document).ready(function () {
            $('div').css('background-color', 'blue');
        })
    </script>
    <div></div>
</body>

效果图：