jQuery 入口函数详解

简介: jQuery 入口函数详解

终于开始 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>


相关文章
|
4月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
2月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
15 1
|
4月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
4月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
|
5月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
5月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
5月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
36 0
|
5月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
42 0
|
5月前
|
JavaScript 前端开发
jQuery的入口函数
jQuery的入口函数
36 0
|
JavaScript 数据安全/隐私保护