您的位置：首页 > Web前端 > JQuery

JQuery的学习：解决jQuery与其他库冲突的方法

2013-09-05 00:25 429 查看

通常，当在同一个页面上使用jQuery和其他库时，全局名称$的定义是最大的争论和冲突的焦点。众所周知，jQuery使用$作为jQuery名称的别名，并将其用于jQuery公开的每一个功能，但是其他库，最著名的就是Prototype,也使用$名称。

1. jQuery提供了$.noConflict()实用函数用来放弃对$标识符的占用，以便其他库使用它。

   该函数的语法如下：

  $.noConflict(jqueryToo)

说明：将标识符$的控制权归还给其他库，允许在页面上混合使用jQuery与其他库。一旦执行了该函数，必须使用jQuery标识符而不是$标识符来调用jQuery的功能，

     你也可以放弃jQuery标识符（可选）

   应该在包含了jQuery之后，但尚未包含冲突库之前调用这个方法。

    尽管使用的是jQuery标识符，但因为$是jQuery的别名，所以在应用$.noConflict()之后所有jQuery的功能依然可用。我们可以定义更短的，但没有冲突的jQuery别名，例如：

var $j = jQuery ;

   2. 另一个常见的习惯用法是创建一个作用域环境，在该环境中$标识符指向jQuery对象，在扩展jQuery的时候这是个常用技巧，特别是对于插件作者来说，他们不可能对于页面开发者是否已经调用$.noConflict()作出任何假设，当然也不能自行调用此函数以免破坏页面开发者的意愿，

这个习惯用法如下：

(function($) { }) (jQuery);

(function($) { })

这部分声明了一个函数并用圆括号括起来，由此生成一个表达式，这个表达式的结果是对一个匿名函数的引用，这个函数期望传入单个参数并将其命名为$,在函数主体中，可以通过$标识符来引用任何传递给这个函数的东西。因为参数声明优先于全局作用域中任何类似的命名标识符，所以任何在函数外定义的$值在函数内都会被传入的参数所代替。

(jQuery)

在匿名函数上执行函数调用，将jQuery对象作为参数传递

在函数外部不管$标识符是否已经在Prototype或其他库中定义，在函数体内它总是指向jQuery对象。

当使用这个技巧时，外部声明的$在函数体内是不可用的。

3. 第二种的用法的一个变体也经常用于声明就绪处理函数，从而形成了第三种语法，

jQuery( function($){

})

当编写可重用的组件并且这些组件可能会用于已经使用了$.noConflict()的页面时，最好对$的定义采取这种预防措施。

在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突；若是发生冲突后，可以通过以下几种方案进行解决：

一、
jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：

HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>

<script type="text/javascript">
jQuery(function() { //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function() {
alert(jQuery(this).text());
});
});

$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>

二、 jQuery库在其他库之后导入，使用jQuery.noConflict()方法将变量$的控制权让渡给其他库，有以下几种方式:

JS代码：

<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function() { //使用jQuery
jQuery("p").click(function() {
alert(jQuery(this).text());
});
});

$("pp").style.display = 'none'; //使用prototype
</script>

//代码二
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function() { //使用jQuery
$j("p").click(function() {
alert($j(this).text());
});
});

$("pp").style.display = 'none'; //使用prototype
</script>

//代码三
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($) { //使用jQuery
$("p").click(function() { //继续使用 $ 方法
alert($(this).text());
});
});

$("pp").style.display = 'none'; //使用prototype
</script>

//代码四
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($) { //定义匿名函数并设置形参为$
$(function() { //匿名函数内部的$均为jQuery
$("p").click(function() { //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; //使用prototype
</script>

通过以上几方法就可以很好的去解决多库共存会发生冲突的问题了.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航