jQuery 入口函数详解

卡卡西最近怎么样

已于 2022-05-10 16:46:17 修改

阅读量1.3k

点赞数 16

分类专栏： 30天拿下前端必经之路 jQuery 文章标签： jquery javascript 前端开发语言 html

于 2022-04-05 16:09:15 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123970389

版权

30天拿下前端必经之路 jQuery 专栏收录该内容

22 篇文章 22 订阅

订阅专栏

终于开始 jQuery 的正式学习了，激动吗？我们这一篇文章说明一下 jquery的入口函数以及其顶级对象$

入口函数：

什么是入口函数？

不知道大家还有没有印象，我们在学习原生 JS 的 BOM 时，由于HTML元素在 script 标签的后方，因为代码自上而下运行而导致的报错情况，当时我们有两种解决方法，第一种是方法是 load，第二种方法是 DOMContentLoaded。在 jQuery 这里也存在这样的情况，如果我们的 script 标签放在HTML元素的前面，就需要入口函数了

作用：

该入口函数的作用是等 DOM 结构渲染完毕就可以执行里面的代码了，不用等待图片，css等所有资源都加载完毕，其相当于原生 JS 中的 DOMContentLoaded

书写格式：

第一种（推荐）：$( function( ) { XXXX })
第二种：$( document ).ready( function( ) { XXXX })

我们举一个例子，例如我们想使用 jQuery 隐藏一个div（使用 jQuery 的 hide 方法）：

第一种书写格式：

<body>
    <script>
        $(function(){  //因为HTML元素在script下方，所以使用入口函数
            $('div').hide();
        })
    </script>
    <div></div>
</body>

第二种书写格式：

<body>
    <script>
       $(document).ready(function(){  //因为HTML元素在script下方，所以使用入口函数
           $('div').hide();
       })
    </script>
    <div></div>
</body>

两种格式均正确有效，但普遍使用第一种，因为第一种更为简便

顶级对象 $:

首先我们来说明一下 jQuery 的顶级对象：$，相当于原生 JS 中的 window，其实 $ 只是 jQuery 的别称，我们在开发编写代码时可以使用 jQuery 来代替 $，或者使用 $ 代替 jQuery，但是由于 $ 更加方便简洁，所以我们一般使用 $

例如在上面的入口函数代码中，我们将 $ 换为 jQuery 也是正确的：

<body>
    <script>
        jQuery(function(){ 
            jQuery('div').hide();
        })
    </script>
    <div></div>
</body>

卡卡西最近怎么样

关注

16
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 入口函数详解

终于开始 jQuery 的正式学习了，激动吗？我们这一篇文章说明一下 jquery的入口函数以及其顶级对象$ 入口函数：什么是入口函数？不知道大家还有没有印象，我们在学习原生 JS 的 BOM 时，由于HTML元素在 script 标签的后方，因为代码自上而下运行而导致的报错情况，当时我们有两种解决方法，第一种是方法是 load，第二种方法是 DOMContentLoaded。在 jQuery 这里也存在这样的情况，如果我们的 scri...
复制链接

扫一扫