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