• 避免和另库底撞

   
JQuery库和其拥有的插件都是含在jQuery命名空间下的,作为一般规则,全局对象吃积存在jQuery的命名空间内,所以您无见面获取jQuery和其余其它库中的扑(例如:prototype.js、MooTools、YUI)。

   
需要小心的是,默认情况下可以使用$符号作为jQuery的缩写。如果您用其它JavaScript库,而且采用了$符号,那么运行的下会出现一些冲突。为了避免这些冲突,需要设置JQuery为无冲突模式。

 

  • 安装无冲突模式

   
当您设置JQuery为无冲突模式,你要分配一个初的变量来替代$符号。

<!-- 无冲突模式 -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j是jQuery方法的别名;创建新的别名是可选的。
$j(document).ready(function() {
$j( "div" ).hide();
});
// $的意义是document.getElementById()的快捷方式. mainDiv是一个DOM元素,而不是一个jQuery对象。
window.onload = function() {
var mainDiv = $( "main" );
}
</script>

 
  在点的代码中,$将以原库中平复她的意义。你依旧是能在您的应用程序的其余部分使用jQuery作为全效名称和新的别名$
J。新别名好给取名也其他你想只要之称。例如,JQ$
J、awesomeQuery等。

    最后,如果你无思量定义另一个替代完整的jQuery函数誉为,那么您要好尝尝任何一样种植方法,只待补充加$作为参数传递给jQuery(
document
).ready()函数,这是利用最频繁的主意,不会见唤起与其它库的闯。

<!-- 无冲突模式的另一种设置方式 -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// 你可以在这里使用$作为JQuery的别名。
$( "div" ).hide();
});
// $在全局范围内是有prototype.js意义的.
window.onload = function(){
var mainDiv = $( "main" );
}
</script>

    考虑到用重新少之代码以落实全的配合,这也许是最好美妙的解决方案。

 

  • 援JQuery在旁库之前

 
  上面的代码有,在prototype.js加载后重新加载jQuery。如果引用jQuery在另外库之前,你可使jQuery当您做片行事的时刻,但$符号将为外库中定义的涵义。这里不需经过调用jQuery.noConflict()放弃$符号。

<!-- 在其他库之前加载JQuery -->
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// 使用完整的JQuery名称来进行操作。
jQuery( document ).ready(function() {
jQuery( "div" ).hide();
});
// 使用$作为prototype.js的定义
window.onload = function() {
var mainDiv = $( "main" );
};
</script>

 

  • 援JQuery函数的强方

    下面的方式,你可以引用JQuery函数在任何库创建了一个存在冲突的变量$的早晚。

 

    • 创建一个新别名

   
这jQuery.noConflict()函数返回一个JQuery函数引用,这样你虽好捕获任何一个若想只要的变量。

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $jq = jQuery.noConflict();
</script>

 

    • 以这调用的函数表达式

    您可以继续行使正规的$符号来包装而的代码,并就调用函数表达式,这吗是一个jQuery插件创作之正儿八经模式,在此地作者吧未清楚是否以见面采用其它一个库房超出了$的正经模式。

<!-- 在立即调用的函数中使用$ -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
(function( $ ) {
// 你可以在这里使用$。
})( jQuery );
</script>

    请留心,如果你以这技能,你拿无克及时调用函数来运该内部的prototype.js的方法。

 

    • 应用参数传递给jQuery( document
      ).ready()函数
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(document).ready(function( $ ) {
// 你可以在这里使用$。
});
</script>

    或者使更精简的语法:

<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
jQuery(function($){
// 你可以在这里使用$。
});
</script>

相关文章

网站地图xml地图