jQuery入口函数

Posted 乱舞春秋__

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery入口函数相关的知识,希望对你有一定的参考价值。

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>

效果图:

可见,上述两种写法效果相同。

 

以上是关于jQuery入口函数的主要内容,如果未能解决你的问题,请参考以下文章

jQuery入口函数

jquery 1,2,3三个版本的下载区别/以及jquery使用步骤,jQuery入口函数

JQ——初识JQJQ入口函数与JS入口函数的区别

jQuery

jquery 这段代码怎么放到函数中引用

jQueryjQuery 简介jQuery 入口函数 vs JavaScript入口函数$(selector).action()jQuery 选择器jQuery 事件this复习!