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>