|
jQuery多個(gè)版本或和其他js庫沖突主要是常用的$符號(hào)的問題，這個(gè)問題 jquery早早就有給我們預(yù)留處理方法了，下面一起來看看解決辦法。 1.同一頁面jQuery多個(gè)版本或沖突解決方法
| 代碼如下 |
復(fù)制代碼 |
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www./1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery測試頁-</title>
</head>
<body>
<!-- 引入 jquery 1.8.0 -->
<script type="text/javascript" src="http://code./jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var $180 = $;
</script>
<!-- 引入 jquery 1.9.0 -->
<script type="text/javascript" src="http://code./jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var $190 = $;
</script>
<!-- 引入 jquery 2.0.0 -->
<script type="text/javascript" src="http://code./jquery-2.0.0.min.js"></script>
<script type="text/javascript">
var $200 = $;
</script>
<script type="text/javascript">
console.log($180.fn.jquery);
console.log($190.fn.jquery);
console.log($200.fn.jquery);
</script>
</body>
</html>
|
2.同一頁面jQuery和其他js庫沖突解決方法
①.jQuery在其他js庫前
| 代碼如下 |
復(fù)制代碼 |
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www./1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery測試頁-</title>
</head>
<body>
<!-- 引入 jquery 1.8.0 -->
<script type="text/javascript" src="http://code./jquery-1.8.0.min.js"></script>
<script type="text/javascript">
var $180 = $;
console.log($.fn.jquery);
</script>
<!-- 引入 其他庫-->
<script type="text/javascript">
$ = {
fn:{
jquery:""
}
};
</script>
<script type="text/javascript">
console.log($.fn.jquery);
console.log($180.fn.jquery);
</script>
</body>
</html>
|
②.jQuery在其他js庫后
| 代碼如下 |
復(fù)制代碼 |
|
<!DOCTYPE html>
<html lang="en" xmlns="http://www./1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery測試頁-</title>
</head>
<body>
<!-- 引入 其他庫-->
<script type="text/javascript">
$ = {
fn:{
jquery:""
}
};
</script>
<!-- 引入 jquery 1.8.0 -->
<script type="text/javascript" src="http://code./jquery-1.8.0.min.js"></script>
<script type="text/javascript">
console.log($.fn.jquery);
var $180 = $.noConflict();
console.log($.fn.jquery);
console.log($180.fn.jquery);
</script>
</body>
</html>
|
再補(bǔ)充一下方法
方案1：
引入noConflict(),將$替換為其他符號(hào)
| 代碼如下 |
復(fù)制代碼 |
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
}); |
缺點(diǎn)：引入了這段代碼后，不僅是當(dāng)前的js文件，該html引用的所有js中，如果有用到j(luò)query中的$，都得用$j來代替之前的$
方案2：
| 代碼如下 |
復(fù)制代碼 |
ready函數(shù)是jquery的入口函數(shù)，可以
將$(document).ready(function(){
替換成
jQuery( document ).ready(function( $){}
|
缺點(diǎn)：只對(duì)ready嵌套內(nèi)的代碼有效，對(duì)嵌套外的代碼是無效的。如果你所有的邏輯，都在寫ready函數(shù)中，那沒問題。但我們一般都會(huì)在ready函數(shù)之外寫一些子函數(shù)，然后ready函數(shù)再去調(diào)用這些函數(shù)。這個(gè)方案對(duì)這些函數(shù)是無效的，因此這套方案有局限性。
方案3（推薦，特別是開發(fā)js插件時(shí)）：
給js內(nèi)容包上一個(gè)函數(shù)
| 代碼如下 |
復(fù)制代碼 |
|
jQuery(function($){
//你的js代碼放在這里（例如第二個(gè)方案提到的ready函數(shù)和子函數(shù)）
//如果是js文件，其實(shí)就是在文件頭部和尾部各加一行代碼
}
或者
(function($) {
//你的js代碼
})(jQuery);
|
這個(gè)方法，沒有上面兩個(gè)方案的缺點(diǎn)，只會(huì)影響到被包在jQuery(function($){}中的代碼。
不會(huì)影響到其他js代碼，這一點(diǎn)很重要。試想一下，假如你寫了一個(gè)js公共組件，該組件需要用到j(luò)query，為了提高魯棒性，需考慮$符號(hào)沖突問題。如果使用方案1，那么別人在使用時(shí)，還得遵守你的約定，把自己js代碼中的$改成$,而如果使用方案3，既能避免$沖突對(duì)該組件的影響，又無需要求使用公共組件的人修改自己的代碼。
|
