解決jquery中美元符號(hào)命名沖突問題
更新時(shí)間:2014年01月08日 17:56:14 作者:
在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,下面為大家介紹下如何解決jquery中美元符號(hào)命名沖突問題
在Jquery中,$是JQuery的別名,所有使用$的地方也都可以使用JQuery來替換,如$('#msg')等同于JQuery('#msg') 的寫法。然而,當(dāng)我們引入多個(gè)js庫后,在另外一個(gè)js庫中也定義了$符號(hào)的話,那么我們在使用$符號(hào)時(shí)就發(fā)生了沖突。下面以引入兩個(gè)庫文件 jquery.js和prototype.js為例來進(jìn)行說明。
第一種情況:jquery.js在prototype.js之后進(jìn)行引入,如: <</span> script src = " prototype.js " type = " text/javascript " />
<</span> script src = " jquery.js " type = " text/javascript " />
在這種情況下,我們在自己的js代碼中如下寫的話:
$( ' #msg ' ).hide();
$永遠(yuǎn)代表的是jquery中定義的$符號(hào),也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在后面再介紹。
第二種情況:jquery.js在prototype.js之前進(jìn)行引入,如: <</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
在這種情況下,我們在自己的js代碼中如下寫的話:
$( ' #msg ' ).hide();
$此時(shí)代表的prototype.js中定義的$符號(hào),如果我們想要調(diào)用jquery.js中的工廠選擇函數(shù)功能的話,只能用全稱寫法JQuery('#msg').hide().
下面先介紹在第一種引入js庫文件順序的情況下,如何正確的使用不同的js庫中定義的$符號(hào)。
一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對$的所有權(quán),將$的控制權(quán)交還給prototype.js,因?yàn)閖query.js是后引入的,所以最后擁有$控制權(quán)的是jquery。它的返回值是JQuery。當(dāng)在代碼中調(diào)用了該 方法以后,我們就不可以使用$來調(diào)用jquery的方法了,此時(shí)$就代表在prototype.js庫中定義的$了。如下: JQuery.noConflict();
// 此處不可以再寫成$('#msg').hide(),此時(shí)的$代表prototype.js中定義的$符號(hào)。
JQuey( ' #msg ' ).hide();
自此以后$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。
二.自定義JQuery的別名
如果覺得第一種方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全稱比較麻煩的話,我們還可以為JQuery重定義別名。如下:
var $j = JQuery.noConflict();
$j( ' #msg ' ).hide(); // 此處$j就代表JQuery
自此以后$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。
三.使用語句塊,在語句塊中仍然使用jquery.js中定義的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){ $( ' #msg ' ).hide(); // 此時(shí)在整個(gè)ready事件的方法中使用的$都是jquery.js中定義的$. }); 或者使用如下語句塊:
(function($){ $( ' #msg ' ).hide(); // 此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$. })(JQuery)
如果在第二種引入js庫文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:
<</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
<</span> script type = " text/javascript " >
(function($){ $( ' #msg ' ).hide(); // 此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$. })(JQuery)
</</span> script >
這種使用語句塊的方法非常有用,在我們自己寫jquery插件時(shí),應(yīng)該都使用這種寫法,因?yàn)槲覀儾恢谰唧w工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。
ps :jquery中特殊字符的含義:
# 指示 id
. 指示 class
* 全選
, 多選
空格 后代
> 子
~ 兄弟
+ 下一個(gè)
: 子(多功能)
() 函數(shù)式的過濾與查找
第一種情況:jquery.js在prototype.js之后進(jìn)行引入,如: <</span> script src = " prototype.js " type = " text/javascript " />
<</span> script src = " jquery.js " type = " text/javascript " />
在這種情況下,我們在自己的js代碼中如下寫的話:
$( ' #msg ' ).hide();
$永遠(yuǎn)代表的是jquery中定義的$符號(hào),也可以寫成JQuery('#msg').hide();如果想要使用prototype.js中定義的$,我們在后面再介紹。
第二種情況:jquery.js在prototype.js之前進(jìn)行引入,如: <</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
在這種情況下,我們在自己的js代碼中如下寫的話:
$( ' #msg ' ).hide();
$此時(shí)代表的prototype.js中定義的$符號(hào),如果我們想要調(diào)用jquery.js中的工廠選擇函數(shù)功能的話,只能用全稱寫法JQuery('#msg').hide().
下面先介紹在第一種引入js庫文件順序的情況下,如何正確的使用不同的js庫中定義的$符號(hào)。
一.使用JQuery.noConflict()
該方法的作用就是讓Jquery放棄對$的所有權(quán),將$的控制權(quán)交還給prototype.js,因?yàn)閖query.js是后引入的,所以最后擁有$控制權(quán)的是jquery。它的返回值是JQuery。當(dāng)在代碼中調(diào)用了該 方法以后,我們就不可以使用$來調(diào)用jquery的方法了,此時(shí)$就代表在prototype.js庫中定義的$了。如下: JQuery.noConflict();
// 此處不可以再寫成$('#msg').hide(),此時(shí)的$代表prototype.js中定義的$符號(hào)。
JQuey( ' #msg ' ).hide();
自此以后$就代表prototype.js中定義的$,jquery.js中的$無法再使用,只能使用jquery.js中$的全稱JQuery了。
二.自定義JQuery的別名
如果覺得第一種方法中使用了JQuery.noConflict()方法以后,只能使用JQuery全稱比較麻煩的話,我們還可以為JQuery重定義別名。如下:
var $j = JQuery.noConflict();
$j( ' #msg ' ).hide(); // 此處$j就代表JQuery
自此以后$就代表prototype.js中定義的$,jquey.js中的$無法再使用,只能使用$j來作為jquey.js中JQuery的別名了。
三.使用語句塊,在語句塊中仍然使用jquery.js中定義的$,如下:
JQuery.noConflict();
JQuery(document).ready(function($){ $( ' #msg ' ).hide(); // 此時(shí)在整個(gè)ready事件的方法中使用的$都是jquery.js中定義的$. }); 或者使用如下語句塊:
(function($){ $( ' #msg ' ).hide(); // 此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$. })(JQuery)
如果在第二種引入js庫文件順序的情況下,如何使用jquery.js中的$,我們還是可以使用上面介紹的語句塊的方法,如:
<</span> script src = " jquery.js " type = " text/javascript " />
<</span> script src = " prototype.js " type = " text/javascript " />
<</span> script type = " text/javascript " >
(function($){ $( ' #msg ' ).hide(); // 此時(shí)在這個(gè)語句塊中使用的都是jquery.js中定義的$. })(JQuery)
</</span> script >
這種使用語句塊的方法非常有用,在我們自己寫jquery插件時(shí),應(yīng)該都使用這種寫法,因?yàn)槲覀儾恢谰唧w工作過程中是如何順序引入各種js庫的,而這種語句塊的寫法卻能屏蔽沖突。
ps :jquery中特殊字符的含義:
# 指示 id
. 指示 class
* 全選
, 多選
空格 后代
> 子
~ 兄弟
+ 下一個(gè)
: 子(多功能)
() 函數(shù)式的過濾與查找
相關(guān)文章
淺談jquery點(diǎn)擊label觸發(fā)2次的問題
下面小編就為大家?guī)硪黄獪\談jquery點(diǎn)擊label觸發(fā)2次的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06jQuery之$(document).ready()使用介紹
學(xué)習(xí)jQuery的第一件事是:如果你想要一個(gè)事件運(yùn)行在你的頁面上,你必須在$(document).ready()里調(diào)用這個(gè)事件2012-04-04jquery獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼
本節(jié)主要介紹了jquery如何獲取一個(gè)元素下面相同子元素的個(gè)數(shù)代碼,需要的朋友可以參考下2014-07-07jquery ajax提交表單數(shù)據(jù)的兩種方式
貌似AJAX越來越火了,作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍,甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者,當(dāng)然我也要“隨波逐流”一把,不然飯碗不保啊!2009-11-11jQuery實(shí)現(xiàn)鼠標(biāo)懸停3d菜單展開動(dòng)畫效果
本文主要介紹了jQuery鼠標(biāo)懸停3d菜單展開動(dòng)畫效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01jQuery購物車插件jsorder用法(支持后臺(tái)處理程序直接轉(zhuǎn)換成DataTable處理)
這篇文章主要介紹了jQuery購物車插件jsorder用法,結(jié)合實(shí)例形式分析了購物車jsorder插件基于ajax與后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06