jQuery $命名沖突解決方案匯總
更新時間：2014年11月13日 12:05:18 投稿：hebedich
也許你在看此文章之前還不知道jquery有一個noConflict()東西了，它就是為了避免與其它js插件碰到相同變量的一個解決方法，利用noConflict()可以把變量存到其它指定的變量中去
最近遇到個問題，同時引用了jquery庫和另外一個js庫。當(dāng)用$XX去調(diào)用js庫函數(shù)時，發(fā)現(xiàn)失效了！于是找資料，原來是jquery命名沖突了。因為許多JavaScript 庫使用$作為函數(shù)或變量名，jquery也一樣。其實$只是jquery的一個別名而已，假如我們需要使用jquery 之外的另一js庫，我們可以通過調(diào)用 $.noConflict() 向該庫返回控制權(quán)。下面是收集到解決這一問題的五種方案，總有一種你會用得上的。
例一：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決1</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="/scripts/jquery-1.3.1.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
</script>
</body>
</html>
例二：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決2</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<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>
</body>
</html>
例三：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決3</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="/scripts/jquery-1.3.1.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
$("p").click(function(){ //繼續(xù)使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
例四：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決4</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="/scripts/jquery-1.3.1.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
(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>
</body>
</html>
例五：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>沖突解決5</title>
<!--先導(dǎo)入jQuery -->
<script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后導(dǎo)入其他庫 -->
<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 ,沒有必要調(diào)用"jQuery.noConflict()"函數(shù)。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
看，原來解決問題的方法可不止一個兩個呢，有需要的小伙伴們自己來取吧
您可能感興趣的文章:
- 解決jquery版本沖突的有效方法
- jQuery多個版本和其他js庫沖突的解決方法
- jquery插件沖突(jquery.noconflict)解決方法分享
- 解決jquery插件沖突的問題
- 解決jQuery插件tipswindown與hintbox沖突
- jQuery中 $ 符號的沖突問題及解決方案
- bootstrap與Jquery UI 按鈕樣式?jīng)_突的解決辦法
- 關(guān)于兩個jQuery(js)特效沖突的bug的解決辦法
- 完美解決jQuery符號$與其他javascript 庫、框架沖突的問題
- 避免jQuery名字沖突 noConflict()方法
- jQuery解決$符號命名沖突
- jQuery插件版本沖突的處理方法分析
相關(guān)文章
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單評論區(qū)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jquery attr()設(shè)置和獲取屬性值實例教程
在JS中設(shè)置節(jié)點的屬性與屬性值用到setAttribute(),獲得節(jié)點的屬性與屬性值用到getAttribute(),而在jquery中，只需要用到attr()這個函數(shù)就可以了。attr是attribute（屬性）的縮寫。2016-09-09
jQuery 3.0 的 setter和getter 模式詳解
這篇文章主要介紹了jQuery 3.0 的 setter和getter 模式詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了jquery實現(xiàn)廣告上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了用jQuery實現(xiàn)抽獎程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04
jQuery EasyUI中DataGird動態(tài)生成列的方法
EasyUI中使用DataGird顯示數(shù)據(jù)列表中，有時需要根據(jù)需要顯示不同的列，例如，在權(quán)限管理中，不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段，這就需要DataGird動態(tài)組合列，下面介紹EasyUI中DataGird動態(tài)生成列的方法2016-04-04
下面小編就為大家?guī)硪黄猨Query頁面加載初始化的幾種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
隨著DOM結(jié)構(gòu)的復(fù)雜化和Ajax等動態(tài)腳本技術(shù)的運用，事件委托自然浮出了水面2011-11-11
這篇文章主要介紹了jQuery實現(xiàn)的放大鏡效果,結(jié)合實例形式分析了jQuery插件zoom.js實現(xiàn)放大鏡功能的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了一款基于jQuery的圖片場景標注提示彈窗特效,需要的朋友可以參考下2015-01-01