DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery與其它庫沖突的解決方法
jQuery與其它庫沖突的解決方法
編輯:JQuery特效代碼     
(注意:默認情況下,jQuery用$作為自身的縮寫而以)
如果jQuery類庫和別的類庫沖突的話,可以使用jQuerynoConflict()函數來將變量$的控制權移交出給其它的javaScipt庫。看下面小片斷代碼
<script type="text/javascript" src="../JS/JsCOM.js"></script>
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假設JsCOM.js庫中,有這樣一個函數
代碼如下:
function $(objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
}
else {
return eval("document.all." + objName)
}

大家都知道jQuery裡面也一個這樣的函數,為了不引起沖突,我們將jQuery的變量$的控制權移交出給別的javascript庫
代碼如下:
jQuery.noConflict(); //將變量$的控制權移交給JsCOM.js
var $cr = jQuery("#cr"); //照樣使用jQuery類庫,只是用jQuery代替了原來的$而以。
var JsCOM_cr = $("cr"); //使用JsCOM.js類庫

在這裡可以把jQuery()函數作為jQuery對象的制造工廠.
在這裡要注意幾點
1.引用javascript類庫時,一定要把jQuery引用放在最後面,就像上面一樣,JsCOM.js的引用在jQuery引用的前面(具體原因我也不知,不過確實需要這樣)
2.特別要注意jQuery()代替$()時,jQuery是區分大小寫的,因為javascript本身就是區分大小寫的(好像說這個有點多余,不過還是希望大家不要犯這種錯誤)
基本上根據上面的
方法就可以解決jQuery和其它庫的沖突問題了!
如果你覺得上面的方式不爽,每次都要打jQuery來代替$增加了您敲鍵盤的工作量,那請接著看。。
除上面之外,還有另一種選擇。如果想確保jQuery不會與其它庫沖突,但又想自定義一個快捷方式,可以進行如下操作;
代碼如下:
var $j = jQuery.noConflict(); //自定一個快捷方式
var $cr = $j("#cr"); //使用jQuery類庫,得用自定義快捷方式----$j;
var JsCOM_cr = $("cr"); //和上一段代碼一樣,使用的是JsCOM.js類庫

如果您還有別的要求,想繼續使用原先的$(),同時還需要與別的類庫不沖突的話,還有兩種解決方法
其一:
代碼如下:
jQuery.noConflict(); //將變量$的控制權讓給JsCOM.js
jQuery(function($)
{
$("p").click(function() //在函數內繼續可以使用jquery類庫的$()方法
{
alert($(this).text());
})
})
var JsCOM_cr = $("cr"); // 在函數外面,照樣可以使用JsCOM.js的$()方法

其二:
代碼如下:
jQuery.noConflict(); //將變量$的控件權移交給別的類庫,使用jquery類庫的$符號時,請使用jQuery("#id");
(function($) { //定義匿名函數並設置形參為$
$(function() { //匿名函數內部的$均為jQuery
$("div").click(function() {//繼續使用$()方法
alert($(this).text());
})
})
})
(jQuery); //使用匿名函數且傳遞實參jQUery
alert($("cr")); //使用的是jsCOM.js類庫中的$()函數

第二種方法應該是兼容舊的代碼最好的方式,修改的代碼是最少的!
不過如果是新寫的jQuery代碼,我還是比較喜歡使用剛開始講的那種(jQuery.noConflict(),然後就使用jQuery("#id"),這種方式)
如果您的頁面是先引用jQuery類庫再引入別的類庫的話,那麼我們可以直接使用jQuery來做一些工作,同時,可以使用$()方法作為其它庫的快捷方式。這裡無需調用jQuery.noConflict()函數,請看下面代碼
代碼如下:
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="../JS/JsCOM.js"></script>
jQuery().ready(function() { //無需調用jQuery.noConflict()函數
var $cr = jQuery("#cr");
$cr.click(function() {
if ($cr.is(":checked")) {
alert("感謝你的支持!你可以繼續操作了..");
}
})
})
alert($("cr")); //使用的是jsCOM.js類庫中的$()函數

好了,看了上面這麼多種方法來解決沖突,這下你可以放心的在您的項目中引用jQuery了吧 :)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved