如何解決Jquery庫及其他庫之間的$命名沖突
首先我們應(yīng)該知道，在jquery中，$（美元符號(hào)）就是jquery的別名，也就是說使用$和使用jquery是一樣的，在很多時(shí)候我們命名空間時(shí)，正是因?yàn)檫@個(gè)$而產(chǎn)生的沖突的發(fā)生。比如說：$('#xmlas')和JQuery('#xmlas') 雖然在寫法上不同，但在實(shí)際上卻是完全等同的。
要想解決這個(gè)沖突，其實(shí)最簡(jiǎn)單的方法就是使用不同的名稱來命名，或者讓執(zhí)行代碼認(rèn)為是不同的命名空間即可。
一、 jQuery庫在其他庫之前導(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)入其他庫 -->
<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庫在其他庫之后導(dǎo)入，使用jQuery.noConflict()方法將變量$的控制權(quán)讓渡給其他庫，有以下幾種方式:
<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(){ //一加載頁面的時(shí)候就將權(quán)利讓出去
jQuery.noConflict();
});
</script>
除了上面的方法之外，我們還可以采用第二種方法來解決沖突的問題，那就是最笨但最有效的解決方法：用自定義的命名空間來避免沖突。
比如說需要的項(xiàng)目名稱為xmlas，那么我們?cè)瓉淼拇a：
$('contentArea').show()
就可以寫成以下這種形式：
XMLAS('contentArea').show()
3.在jquery代碼中，當(dāng)遇到?jīng)_突的時(shí)候我們可以使用$符號(hào)，這需要我們?cè)趓eady事件中添上以下代碼：
jQuery(document).ready(function($) {
//你在這里可以放心的使用$了
});
當(dāng)然，您也可以簡(jiǎn)寫成下面的形式：
jQuery(function($){
//這里為使用$的代碼
});
由此，根據(jù)第一個(gè)方法來實(shí)現(xiàn)的完整代碼如下：
//jquery庫與其他庫沖突的完整解決辦法
<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庫代碼
</script>
當(dāng)然，你也可以對(duì)上面的完整代碼進(jìn)行一步的簡(jiǎn)化，簡(jiǎn)化代碼如下：
//簡(jiǎn)化后的代碼
$.noConflict()(function(){
//這里是你的帶$的jquery代碼
});
//這里是其他庫的代碼
相關(guān)文章
jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊處心形漂浮的炫酷效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06
基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)返回頂部實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-01-01
將一個(gè)字符串生成二維碼圖片，如果想要帶log的二維碼，可以在生成后的二維碼中間部位自己添加一個(gè)小log，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jquery如何根據(jù)屬性和index來查找屬性值并操作,需要的朋友可以參考下2014-07-07
本篇文章主要是對(duì)jQuery選擇器進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2015-08-08
這篇文章主要介紹了jQuery搜索子元素的方法,實(shí)例分析了children、find等方法的使用技巧,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jquery實(shí)現(xiàn)圖片裁剪思路及實(shí)現(xiàn)
JS，jquery不能實(shí)現(xiàn)圖片的裁剪，只是顯示了一個(gè)假象，在服務(wù)器上用獲得的各個(gè)坐標(biāo)值，以及原始圖片，用JAVA進(jìn)行裁剪2013-08-08
jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對(duì)框內(nèi)數(shù)據(jù)選中的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了jQuery 實(shí)現(xiàn)鼠標(biāo)畫框并對(duì)框內(nèi)數(shù)據(jù)選中的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-08-08