jQuery避免$符和其他JS庫(kù)沖突的方法對(duì)比
更新時(shí)間：2014年02月20日 09:29:56 作者：
jQuery中需要用到$符號(hào)，如果其他js庫(kù)也定義了$符號(hào)，那么就會(huì)造成沖突，會(huì)影響到j(luò)s代碼的正常執(zhí)行，下面有幾個(gè)不錯(cuò)的解決方法，大家可以參考下
jQuery中需要用到$符號(hào)，如果其他js庫(kù)（例如大名鼎鼎的prototype)也定義了$符號(hào)，那么就會(huì)造成沖突，會(huì)影響到j(luò)s代碼的正常執(zhí)行。jqeury提供了一些方案來避免這個(gè)問題，讓我們來看看這幾個(gè)方案有什么區(qū)別
方案1：
引入noConflict(),將$替換為其他符號(hào)
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});
缺點(diǎn)：引入了這段代碼后，不僅是當(dāng)前的js文件，該html引用的所有js中，如果有用到j(luò)query中的$，都得用$j來代替之前的$
方案2：
ready函數(shù)是jquery的入口函數(shù)，可以
將$(document).ready(function(){
替換成
jQuery( document ).ready(function( $){}
缺點(diǎn)：只對(duì)ready嵌套內(nèi)的代碼有效，對(duì)嵌套外的代碼是無效的。如果你所有的邏輯，都在寫ready函數(shù)中，那沒問題。但我們一般都會(huì)在ready函數(shù)之外寫一些子函數(shù)，然后ready函數(shù)再去調(diào)用這些函數(shù)。這個(gè)方案對(duì)這些函數(shù)是無效的，因此這套方案有局限性。
方案3（推薦，特別是開發(fā)js插件時(shí)）：
給js內(nèi)容包上一個(gè)函數(shù)
jQuery(function($){
//你的js代碼放在這里（例如第二個(gè)方案提到的ready函數(shù)和子函數(shù)）
//如果是js文件，其實(shí)就是在文件頭部和尾部各加一行代碼
}
或者
(function($) {
//你的js代碼
})(jQuery);
這個(gè)方法，沒有上面兩個(gè)方案的缺點(diǎn)，只會(huì)影響到被包在jQuery(function($){}中的代碼。
不會(huì)影響到其他js代碼，這一點(diǎn)很重要。試想一下，假如你寫了一個(gè)js公共組件，該組件需要用到j(luò)query，為了提高魯棒性，需考慮$符號(hào)沖突問題。如果使用方案1，那么別人在使用時(shí)，還得遵守你的約定，把自己js代碼中的$改成$,而如果使用方案3，既能避免$沖突對(duì)該組件的影響，又無需要求使用公共組件的人修改自己的代碼。
方案1：
引入noConflict(),將$替換為其他符號(hào)
復(fù)制代碼 代碼如下:
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("#btn1").click(function(){
alert("Text: " + $j("#test").text());
});
});
缺點(diǎn)：引入了這段代碼后，不僅是當(dāng)前的js文件，該html引用的所有js中，如果有用到j(luò)query中的$，都得用$j來代替之前的$
方案2：
ready函數(shù)是jquery的入口函數(shù)，可以
將$(document).ready(function(){
替換成
jQuery( document ).ready(function( $){}
缺點(diǎn)：只對(duì)ready嵌套內(nèi)的代碼有效，對(duì)嵌套外的代碼是無效的。如果你所有的邏輯，都在寫ready函數(shù)中，那沒問題。但我們一般都會(huì)在ready函數(shù)之外寫一些子函數(shù)，然后ready函數(shù)再去調(diào)用這些函數(shù)。這個(gè)方案對(duì)這些函數(shù)是無效的，因此這套方案有局限性。
方案3（推薦，特別是開發(fā)js插件時(shí)）：
給js內(nèi)容包上一個(gè)函數(shù)
復(fù)制代碼 代碼如下:
jQuery(function($){
//你的js代碼放在這里（例如第二個(gè)方案提到的ready函數(shù)和子函數(shù)）
//如果是js文件，其實(shí)就是在文件頭部和尾部各加一行代碼
}
或者
復(fù)制代碼 代碼如下:
(function($) {
//你的js代碼
})(jQuery);
這個(gè)方法，沒有上面兩個(gè)方案的缺點(diǎn)，只會(huì)影響到被包在jQuery(function($){}中的代碼。
不會(huì)影響到其他js代碼，這一點(diǎn)很重要。試想一下，假如你寫了一個(gè)js公共組件，該組件需要用到j(luò)query，為了提高魯棒性，需考慮$符號(hào)沖突問題。如果使用方案1，那么別人在使用時(shí)，還得遵守你的約定，把自己js代碼中的$改成$,而如果使用方案3，既能避免$沖突對(duì)該組件的影響，又無需要求使用公共組件的人修改自己的代碼。
相關(guān)文章
這篇文章主要介紹了jQuery中$.each使用詳解,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)圖片左右間隔滾動(dòng)特效(可自動(dòng)播放)
圖片左右間隔滾動(dòng)Jquery特效,點(diǎn)擊滾動(dòng)，不點(diǎn)擊自動(dòng)滾動(dòng)，具體處理程序如下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-05-05
淺析jQuery移動(dòng)開發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫
這篇文章主要介紹了jQuery移動(dòng)開發(fā)中內(nèi)聯(lián)按鈕和分組按鈕的編寫方法,基于jQuery mobile這個(gè)jQuery針對(duì)移動(dòng)開發(fā)版的庫(kù),需要的朋友可以參考下2015-12-12
jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序
這篇文章主要介紹了jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)從身份證號(hào)中獲取出生日期和性別的方法,結(jié)合實(shí)例形式分析了jQuery數(shù)學(xué)運(yùn)算與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-02-02
jQuery動(dòng)態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
下面小編就為大家分享一篇jQuery動(dòng)態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動(dòng)態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了JQuery中Ajax的操作完整例子,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
Jquery Easyui選項(xiàng)卡組件Tab使用詳解（10）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery除了它自己非常出色的js功能之外還附帶有數(shù)不清的插件，可以完成各種美好的效果和功能。jquery.qrcode就是其中一個(gè)，用來在線生成二維碼2013-08-08