jq入口函数的作用_jQuery从入门到精通之入口函数

jQuery入口函数

jQuery与JavaScript加载模式对比

· 多个window.onload只会执行一次, 后面的会覆盖前面的

window.onload = function () {

alert("hello lnj1"); // 不会显示

}

window.onload = function () {

alert("hello lnj2"); // 会显示

}

· 多个$(document).ready()会执行多次,后面的不会覆盖前面的

$(document).ready(function () {

alert("hello lnj1"); //会显示

});

$(document).ready(function () {

alert("hello lnj2"); // 会显示

});

· 不会覆盖的本质(了解,后面jQuery原理会详细讲解)

o jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰

// 相当于这样写

var test1 = function () {

alert("hello lnj1");

}

var test2 = function () {

alert("hello lnj2");

}

$(document).ready(test1);

$(document).ready(test2);

var test3 = function () {

var abc = "123";//            因为在同一个函数中,所以456覆盖123//            var abc = "456";

alert(abc);

}

test3();

var test4 = function () {

// 因为在不同函数中,所以不会影响

var abc = "456";

alert(abc);

}

test4();

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入口函数的其它编写方式如下

// 方式一

$(document).ready(function () {

alert("hello lnj");

});

// 方式二

$(function () {

alert("hello lnj");

});

// 方式三

jQuery(document).ready(function () {

alert("hello lnj");

});

// 方式四

jQuery(function () {

alert("hello lnj");

});

解决$符号冲突问题

·

为什么是window.jQuery = window.$ = jQuery;,而不是window.jQuery = jQuery;

·

o jQuery框架之所以提供了jQuery访问还提供$访问,就是为了提升开发者的编码效率

·

$符号冲突怎么办?

·

o 很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问)

·

***释放$使用权

·

o 当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery

// 在使用jQuery之前指定自定义符号

jQuery.noConflict();

// 使用 jQuery

jQuery("div p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

· 自定义便捷访问符号

o 当便捷访问符号发生冲突时,我们可以自定义便捷访问符号

// 在使用jQuery之前指定自定义符号

var nj = jQuery.noConflict();

// 和使用$一样通过自定义符号调用jQuery

nj(function () {

alert("hello lnj");

});

本文由职坐标整理并发布,了解更多内容,请关注职坐标WEB前端jQuery频道!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值