二、jQuery和其他庫衝突

標籤：jquery   jquery衝突   $衝突   

預設情況下，jQuery用$作為自身的捷徑。

如同時匯入jQuery和prototype庫。

一、jQuery庫在其他庫之後匯入

1、移交控制權

jQuery.noConflict();//將變數$的控制權讓渡給prototype.js

jQuery(function(){//使用jQuery

jQuery("p").click(function(){

});

});

$("pp").style.display = ‘none‘;//使用prototype

2、自訂捷徑

var $j = jQuery.noConflict();//自訂一個比較短捷徑

$j(function(){//使用jQuery

$j("p").click(function(){

});

});

$("pp").style.display = ‘none‘;//使用prototype

3、移交控制權後，內部繼續使用$

(a):

jQuery.noConflict();//將變數$的控制權讓渡給prototype.js

jQuery(function($){//使用jQuery

$("p").click(function(){//繼續使用 $ 方法

});

});

$("pp").style.display = ‘none‘;//使用prototype

(b):最理想方式，改變最少代碼實現全面的相容性

jQuery.noConflict();//將變數$的控制權讓渡給prototype.js

(function($){//定義匿名函數並設定形參為$

$(function(){//匿名函數內部的$均為jQuery

$("p").click(function(){//繼續使用 $ 方法

alert($(this).text());

});

});

})(jQuery);//執行匿名函數且傳遞實參jQuery

$("pp").style.display = ‘none‘;//使用prototype

二、jQuery在其他庫之前置入

jQuery(function(){   //直接使用 jQuery ,沒有必要調用"jQuery.noConflict()"函數。

jQuery("p").click(function(){      

alert( jQuery(this).text() );

});

});

$("pp").style.display = ‘none‘; //使用prototype

本文出自 “7938864” 部落格，請務必保留此出處http://7948864.blog.51cto.com/7938864/1432121