读jQuery官方文档:$(document).ready()与避免冲突

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

$(document).ready()通常你想在DOM结构加载完毕之后才执行相关脚本。使用原生javaScript,你可能调用window.onload = function() { ... }, 但是这个办法的你只能够调用一次,而且需要等DOM结构完全加载完毕,包括图片样式等静态文件所有夹在完毕才会开始执行onload函数里面的代码。

jQuery中提供了一种更好的办法:

$(document).ready(function() {

console.log('ready!');

});

与onload函数不同的是,这个办法可以被调用无限多次,而且不需要等待页面元素完全下载完毕才执行代码,即DOM结构渲染完毕后马上执行代码。

你可能见过一些经验丰富的开发者使用下面的简写形式:

$(function() {

console.log('ready!');

});

除了传递匿名函数,你也可以选择传递命名函数:

function readyFn(jQuery) {

//do something...

}

$(document).ready(readyFn);

//或者:

$(window).load(readyFn);

避免与其他库冲突1、No-Conflict模式

jQuery库是被包含在jQuery全局变量中的,而$是jQuery的快捷方式,也就是$默认也是全局变量。如果你在使用其他包含$全局变量的库(如PRototype,YUI),你可能面临变量名冲突,不过jQuery提供了避免这种冲突的办法。

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

var $j = jQuery.noConflict();

//现在$不再是jQuery的别名,$j替换了$成为了jQuery的新别名

$j(document).ready(function() {

$j('div').hide();

});

//现在$是prototype的别名

window.onload = function() {

var mainDiv = $('main');

};

</script>

上面的代码中的$会回复到它本身的库的用途。你依然可以通过jQuery或者$j的方式使用jQuery库。你可以随意更改jQuery的别名, 比如`jq', '$J', 'awesomeQuery'等。

另外,如果你不想给jQuery命名新的别名(你依然想要用$),你依然有办法可以避免冲突。

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

jQuery( document ).ready(function( $ ) {

//这个作用域里的$都是jQuery的别名

$('div').hide();

});

//全局作用域的$是prototype的

window.onload = function() {

var mainDiv = $('main');

};

</script>

这些技巧基本上可以完成日常需求了。

2、 引入其他库之前引入jQuery

在其他库前引入jQuery,你需要使用jQuery来调用jQuery库,$别称属于其他库。

<script src="jquery.js"></script>

<script src="prototype.js"></script>

//通过jQuery全称调用jQuery库

jQuery(document).ready(function() {

jQuery('div').hide();

});

//由于prototype在jQuery之后引入,$别名属于prototype

window.onload = function() {

var mainDiv = $('main');

};

3、 总结

创建新别名:

jQuery.noConflict()方法做了两件事,一是返回了jQuery对象的引用,你可以用来赋值给自定义的变量,如($jq);二是,删除了默认的$别称,把$别名归还给其他库:

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

//将$别名归还prototype,创建一个新的别名$jq

var $jq = jQuery.noConflict();

</script>

使用立即调用函数表达式:

你可以创建一个立即调用函数表达式,然后在表达式里使用$作为jQuery的别名:

<script src="prototype.js"></script>

<script src="jquery.js"></script>

<script>

jQuery.noConflict();

(function( $ ) {

$('div').remove();

})( jQuery );

</script>

注意,如果你使用这个技巧,你将不能够在立即调用函数表达式里面使用$作为prototype的别名。

给jQuery(document).ready()传递参数:

<script src="jquery.js"></script>

<script src="prototype.js"></script>

<script>

jQuery(document).ready(function( $ ) {

//do something...

});

</script>

或者

<script src="jquery.js"></script>

<script src="prototype.js"></script>

<script>

jQuery(function( $ ) {

//do something...

});

</script>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航