从零玩转jQuery-入口函数
jQuery入口函数 jQuery与JavaScript加载模式对比 多个window.onload只会执行一次, 后面的会覆盖前面的 <script> window.onload = function () { alert("hello lnj1"); // 不会显示 } window.onload = function () { alert("hello lnj2"); // 会显示 } </script> 多个$(document).ready()会执行多次,后面的不会覆盖前面的 <script> $(document).ready(function () { alert("hello lnj1"); //会显示 }); $(document).ready(function () { alert("hello lnj2"); // 会显示 }); </script> 不会覆盖的本质(了解,后面jQuery原理会详细讲解) jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰 <script> // 相当于这样写 var test1 = function () { alert("hello lnj1"); } var test2 = function () { alert("hello lnj2"); } $(document).ready(test1); $(document).ready(test2); </script> <script> var test3 = function () { var abc = "123"; // 因为在同一个函数中,所以456覆盖123 // var abc = "456"; alert(abc); } test3(); var test4 = function () { // 因为在不同函数中,所以不会影响 var abc = "456"; alert(abc); } test4(); </script> window.onload $(document).ready() 执行时机 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 执行次数 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 可以执行多次,第N次都不会被上 一次覆盖 简写方案 无 $(function () { }); 为什么我们能访问$符号? 因为$符号jQuery框架对外暴露的一个全局变量 JavaScript中如何定义一个全局变量? 所有全局变量是 window 对象的属性 function test () { var customValue = 998; alert(customValue); // 1.没有如下代码customValue就不是一个全局变量,函数执行完毕之后 // customValue会被自动释放,test函数以外的地方访问不到customValue // 2.加上如下代码之后customValue就会变成一个全局变量,函数执行完毕也不 // 会被释放,test函数以外的地方可以访问customValue // window.customValue = customValue; } test(); alert(customValue); 所以jQuery框架源码实现 window.jQuery = window.$ = jQuery; 所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery jQuery入口函数的其它编写方式如下 <script> // 方式一 $(document).ready(function () { alert("hello lnj"); }); // 方式二 $(function () { alert("hello lnj"); }); // 方式三 jQuery(document).ready(function () { alert("hello lnj"); }); // 方式四 jQuery(function () { alert("hello lnj"); }); </script> 解决$符号冲突问题 为什么是window.jQuery = window.$ = jQuery;,而不是window.jQuery = jQuery; jQuery框架之所以提供了jQuery访问还提供$访问,就是为了提升开发者的编码效率 $符号冲突怎么办? 很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问) ***释放$使用权 当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery <script> // 在使用jQuery之前指定自定义符号 jQuery.noConflict(); // 使用 jQuery jQuery("div p").hide(); // 使用其他库的 $() $("content").style.display = 'none'; </script> 自定义便捷访问符号 当便捷访问符号发生冲突时,我们可以自定义便捷访问符号 <script> // 在使用jQuery之前指定自定义符号 var nj = jQuery.noConflict(); // 和使用$一样通过自定义符号调用jQuery nj(function () { alert("hello lnj"); }); </script>
