如何解決jQuery 和其他JS庫的沖突

更新時間：2020年06月22日 08:37:29 作者：認真對待世界的小白

這篇文章主要介紹了解決 jQuery 和其他庫的沖突的方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下

在 jQuery 庫中，幾乎所有的插件都被限制在它的命名空間里。通常，全局對象都被很好地存儲在 jQuery 命名空間里，因此當把 jQuery 和其他 JavaScript 庫（例如 Prototype、MooTools 或 YUI）一起使用時，不會引起沖突。

注意：默認情況下，jQuery 用 $ 作為自身的快捷方式。

1.jQuery庫在其他庫之后導入

在其他庫和 jQuery 庫都被加載完畢后，可以在任何時候調(diào)用 jQuery.noConflict() 函數(shù)來將變量 $ 的控制權(quán)移交給其他 JavaScript 庫。示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被綁定單擊事件)</p>
<script type="text/javascript">
jQuery.noConflict();     //將變量$的控制權(quán)讓渡給prototype.js
jQuery(function(){     //使用jQuery
 jQuery("p").click(function(){
  alert( jQuery(this).text() );
 });
});

$("pp").style.display = 'none';  //使用prototype.js隱藏元素
</script>

</body>
</html>

然后，就可以在程序里將 jQuery() 函數(shù)作為 jQuery 對象的制造工廠。

此外，還有另一種選擇。如果想確保 jQuery 不會與其他庫沖突，但又想自定義一個快捷方式，可以進行如下操作：

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

$("pp").style.display = 'none';  //使用prototype.js隱藏元素
</script>

可以自定義備用名稱，例如 jq、$J、awesomequery 等。

如果不想給 jQuery 自定義這些備用名稱，還想使用 $ 而不管其他庫的 $() 方法，同時又不想與其他庫相沖突，那么可以使用以下兩種解決方法。

其一：

<script type="text/javascript">
jQuery.noConflict();    //將變量$的控制權(quán)讓渡給prototype.js
jQuery(function($){     //使用jQuery
 $("p").click(function(){  //繼續(xù)使用 $ 方法
  alert( $(this).text() );
 });
});

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

其二：

<script type="text/javascript">
jQuery.noConflict();     //將變量$的控制權(quán)讓渡給prototype.js
(function($){      //定義匿名函數(shù)并設(shè)置形參為$
 $(function(){     //匿名函數(shù)內(nèi)部的$均為jQuery
  $("p").click(function(){  //繼續(xù)使用 $ 方法
   alert($(this).text());
  });
 });
})(jQuery);       //執(zhí)行匿名函數(shù)且傳遞實參jQuery

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

這應(yīng)該是最理想的方式，因為可以通過改變最少的代碼來實現(xiàn)全面的兼容性。

2.jQuery庫在其他庫之前導入

如果 jQuery 庫在其他庫之前就導入了，那么可以直接使用"jQuery”來做一些jQuery的工作。同時，可以使用 $() 方法作為其他庫的快捷方式。這里無需調(diào)用 jQuery.noconflict() 函數(shù)。示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決5</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被綁定單擊事件)</p>

<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。
 jQuery("p").click(function(){  
  alert( jQuery(this).text() );
 });
});

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

有了這些方法來解決沖突，就可以在項目中放心地引用 jQuery 了。

以上就是如何解決jQuery 和其他JS庫的沖突的詳細內(nèi)容，更多關(guān)于解決jQuery JS庫沖突的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: