如何解決Jquery庫(kù)及其他庫(kù)之間的$命名沖突
首先我們應(yīng)該知道,在jquery中,$(美元符號(hào))就是jquery的別名,也就是說(shuō)使用$和使用jquery是一樣的,在很多時(shí)候我們命名空間時(shí),正是因?yàn)檫@個(gè)$而產(chǎn)生的沖突的發(fā)生。比如說(shuō):$('#xmlas')和JQuery('#xmlas') 雖然在寫(xiě)法上不同,但在實(shí)際上卻是完全等同的。
要想解決這個(gè)沖突,其實(shí)最簡(jiǎn)單的方法就是使用不同的名稱來(lái)命名,或者讓執(zhí)行代碼認(rèn)為是不同的命名空間即可。
一、 jQuery庫(kù)在其他庫(kù)之前導(dǎo)入,直接使用jQuery(callback)方法如:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先導(dǎo)入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后導(dǎo)入其他庫(kù) -->
<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 ,沒(méi)有必要調(diào)用"jQuery.noConflict()"函數(shù)。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
二、jQuery庫(kù)在其他庫(kù)之后導(dǎo)入,使用jQuery.noConflict()方法將變量$的控制權(quán)讓渡給其他庫(kù),有以下幾種方式:
<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>
代碼二
<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>
代碼三
<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ù)且傳遞實(shí)參jQuery
$("pp").style.display = 'none'; //使用prototype
/*********************************************************************/
jQuery(document).ready(function(){ //一加載頁(yè)面的時(shí)候就將權(quán)利讓出去
jQuery.noConflict();
});
</script>
除了上面的方法之外,我們還可以采用第二種方法來(lái)解決沖突的問(wèn)題,那就是最笨但最有效的解決方法:用自定義的命名空間來(lái)避免沖突。
比如說(shuō)需要的項(xiàng)目名稱為xmlas,那么我們?cè)瓉?lái)的代碼:
$('contentArea').show()
就可以寫(xiě)成以下這種形式:
XMLAS('contentArea').show()
3.在jquery代碼中,當(dāng)遇到?jīng)_突的時(shí)候我們可以使用$符號(hào),這需要我們?cè)趓eady事件中添上以下代碼:
jQuery(document).ready(function($) {
//你在這里可以放心的使用$了
});
當(dāng)然,您也可以簡(jiǎn)寫(xiě)成下面的形式:
jQuery(function($){
//這里為使用$的代碼
});
由此,根據(jù)第一個(gè)方法來(lái)實(shí)現(xiàn)的完整代碼如下:
//jquery庫(kù)與其他庫(kù)沖突的完整解決辦法
<script type="text/javascript" src="photolist.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(function($) {
//使用了$的jquery代碼
});
//這里是你的其他js庫(kù)代碼
</script>
當(dāng)然,你也可以對(duì)上面的完整代碼進(jìn)行一步的簡(jiǎn)化,簡(jiǎn)化代碼如下:
//簡(jiǎn)化后的代碼
$.noConflict()(function(){
//這里是你的帶$的jquery代碼
});
//這里是其他庫(kù)的代碼
相關(guān)文章
從零開(kāi)始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)
本文是實(shí)戰(zhàn)篇. 使用jQueryUI完成制作網(wǎng)站的大部分常用功能.2011-02-02簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果
這篇文章主要介紹一個(gè)簡(jiǎn)單的jquery左側(cè)導(dǎo)航欄和頁(yè)面選中效果,此功能需引用jquery,需要的朋友可以參考下2014-08-08判斷對(duì)象是否Window的實(shí)現(xiàn)代碼
判斷對(duì)象是否Window的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2012-01-01Jquery+AJAX實(shí)現(xiàn)無(wú)刷新上傳并重命名文件操作示例【PHP后臺(tái)接收】
這篇文章主要介紹了Jquery+AJAX實(shí)現(xiàn)無(wú)刷新上傳并重命名文件操作,結(jié)合實(shí)例形式分析了jQuery+ajax前臺(tái)上傳文件與PHP后臺(tái)接收處理相關(guān)操作技巧,需要的朋友可以參考下2020-05-05基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂(lè)播放器的代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)歌詞滾動(dòng)版音樂(lè)播放器的代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿美橙互聯(lián)兩級(jí)導(dǎo)航菜單的方法,實(shí)例分析了jQuery操作css及setTimeout等實(shí)現(xiàn)導(dǎo)航菜單的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03