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)所有驗(yàn)證通過方可提交的表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表單驗(yàn)證，所有驗(yàn)證通過方可提交，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁特效
下拉自動(dòng)加載進(jìn)行分頁的運(yùn)用越來越多，比起傳統(tǒng)的分頁該方法分頁用戶體驗(yàn)更好，布局也更簡單了。目前正在使用和學(xué)習(xí)中……2014-06-06
jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼
現(xiàn)在比較流行jquery插件，所以既然用了jquery那么就要用好，也不用大量的寫代碼了。2011-03-03
之前腳本之家發(fā)布多個(gè)獲取url參數(shù)的函數(shù)，這里是jquery的，比較適合已經(jīng)使用了jquery庫的朋友使用。2010-03-03
本文主要介紹了Jqprint實(shí)現(xiàn)頁面打印的具體方法，并提供了Jqprint插件下載。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼
這篇文章主要介紹了jquery+CSS3模擬Path2.0動(dòng)畫菜單效果代碼,涉及jquery鼠標(biāo)click點(diǎn)擊事件及頁面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
jquery圖片放大鏡功能的實(shí)例代碼，需要的朋友可以參考一下2013-03-03
下面小編就為大家?guī)硪黄猨query 一鍵復(fù)制到剪切板的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
有一些功能需求，需要在DOM載入時(shí)馬上執(zhí)行一些函數(shù)，但又不愿意僅為了這一個(gè)需求而引入整個(gè)JQuery庫，于是就把jQuery的方法提取出來，單獨(dú)使用了2014-03-03
jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類進(jìn)行切換的使用技巧,需要的朋友可以參考下2015-01-01