五種方法解決jQuery和Prototype兼容性

時間 2019-11-06

標籤五種方法解決 jquery prototype 兼容性欄目 JQuery 简体版

原文原文鏈接

第一種狀況：先加載Prototype，再加載jQuery

方法一：jQuery 庫和它的全部插件都是在jQuery名字空間內的，包括全局變量也是保存在jQuery 名字空間內的。

使用jQuery.noConflict();主要做用是在任什麼時候候，只要在jQuery加載後就能夠調用，將$符號的使用權返回給其它的js庫，jQuery在建立它本身的名字空間時就將其它庫的$保存在本身的一個變量當中。 javascript

<html>

<head>

<scriptsrc="prototype.js"></script>

<scriptsrc="jquery.js"></script>

<scripttype="text/javascript">

//各個js庫之間的主要衝突在於$的衝突，這個方法是用來處理這個問題的

jQuery.noConflict();

//本來使用jQuery代碼部分的$ 用jQuery替代

jQuery(document).ready(function (){

jQuery("div").hide();

});

// Use Prototype with $(...), etc.

$('proto').hide();

</script>

</head>

</html>

方法二：若是你仍然想使用相似於$這樣比較簡短的字符，你能夠將jQuery.noConflict()的返回值賦值給某個變量。這個變量就是jQuery的新縮寫了，固然你可使用$之外的任意字符串，好比：

<html>

<head>

<scriptsrc="prototype.js"></script>

<scriptsrc="jquery.js"></script>

<scripttype="text/javascript">

//$j就至關於jQuery，名稱你能夠自主定義

var $j = jQuery.noConflict();

// Use jQuery via $j(...)

$j(document).ready(function (){

$j("div").hide();

});

// Use Prototype with $(...), etc.

$('proto').hide();

</script>

</head>

</html>

方法三：若是你仍是想使用$，而不想使用別的字符，也是能夠的。並且一般程序員都比較喜歡這樣作，由於這樣作寫好的代碼幾乎都不用替換原來的$符號。那就是利用名字空間的概念就全部的jQuery代碼封裝在document的ready事件名字空間範圍內，如：jQuery(document).ready(這裏填入jQuery代碼)，Magento筆記喜歡使用這種方法：

<html>

<head>

<scriptsrc="prototype.js"></script>

<scriptsrc="jquery.js"></script>

<scripttype="text/javascript">

jQuery.noConflict();

// Put all your code in your document ready area

jQuery(document).ready(function ($){

// 這樣你能夠在這個範圍內隨意使用$而不用擔憂衝突

$("div" ).hide();

});

// Use Prototype with $(...), etc.

$('proto' ).hide();

</script>

</head>

</html>

第二種狀況：先加載jQuery，再加載Prototype

按照這樣的順序加載，就不存在其它js庫的$符號被jQuery佔用的問題。因此對其它的js庫的代碼能夠不做任何修改，照常使用$，而對 jQuery可使用jQuery來替代$.如： html

<html>

<head>

<scriptsrc="prototype.js"></script>

<scriptsrc="jquery.js"></script>

<scripttype="text/javascript">

// 使用 jQuery 用 jQuery(...)

jQuery(document).ready(function (){

jQuery("div" ).hide();

});

// 使用 Prototype 時，用 $(...),

$('someid' ).hide();

</script>

</head>

</html>

或者你不想寫jQuery這麼長的字符，你能夠經過另一種方法： java

1	var $j = jQuery;

來實現簡短一點的$j，這多是最好的辦法了。
不過，當你只想使用jQuery來寫代碼時，你能夠經過名字空間仍然使用$,即採用和jQuery源代碼同樣的方法： jquery

<scripttype="text/javascript">

(function($) {

/* 在這個名字空間內，你能夠隨意使用$符號來引用jQuery，只不過是其它$被jQuery使用，你不能使用prototype或其它的js庫

*/ }

)(jQuery)

</script>

參考來源：http://docs.jquery.com/Using_jQuery_with_Other_Libraries 程序員

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。