摘要:本篇jQuery教程探讨了入口函数的相关内容,希望阅读本篇文章以后大家有所收获,帮助大家对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原理会详细讲解)
o 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 () { });
·
为什么我们能访问$符号?
·
o 因为$符号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;
·
o jQuery框架之所以提供了jQuery访问还提供$访问,就是为了提升开发者的编码效率
·
$符号冲突怎么办?
·
o 很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问)
·
***释放$使用权
·
o 当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery
<script>
// 在使用jQuery之前指定自定义符号
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';</script>
· 自定义便捷访问符号
o 当便捷访问符号发生冲突时,我们可以自定义便捷访问符号
<script>
// 在使用jQuery之前指定自定义符号
var nj = jQuery.noConflict();
// 和使用$一样通过自定义符号调用jQuery
nj(function () {
alert("hello lnj");
});</script>
本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号