jquery與其他js衝突問題 解決

jquery裏ajax非常好用,前一些天把項目部署到服務的時候,出現頁面出現js錯誤,不支持length。。等屬性,把出現js錯誤定位下,發現jquery裏ajax嵌套其他的js。最後發現prototype.js,coypSelect.js與jquery
發生衝突,最後把jquery裏ajax去掉了,換成var myAjaxs=new Ajax.Request();

今天在網上搜下相關文章,根源原來是:

  由於jQuery以及 prototype.js,coypSelect.js都使用了美元符函數“$”作爲選擇器,在兩者混合使用的時候$函數被重複定義了,結果導致其中一個框架不能使用。

 

 下面是我在網上搜到解決問題的文章:

流行的解法:

不過很快,有很多人給出瞭解決方案,如比較流行的方案是這樣 的:

 

Js代碼 

1 <script src="http://jquery.com/src/latest/"></script>     

2   <script type="text/javascript">     

3      JQ = $;  //rename $ function     

4  </script>     

5 <script src="prototype.js"></script>   

<script src="http://jquery.com/src/latest/"></script>  

  <script type="text/javascript">  

     JQ = $;  //rename $ function  

 </script>  

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

 

 

這樣一來,你可以使用JQ來代替jQuery裏的$函數名,而prototype的$函數照常使用,像這樣:

 

Js代碼 

6 <script type="text/javascript">     

7   JQ(document).ready(function(){     

8    JQ("#test_jquery").html("this is jquery");     

9    $("test_prototype").innerHTML="this is prototype";     

10   });     

11  </script>   

 <script type="text/javascript">  

   JQ(document).ready(function(){  

    JQ("#test_jquery").html("this is jquery");  

    $("test_prototype").innerHTML="this is prototype";  

   });  

  </script>

 

儘管這種辦法在一定程度上解決了兩者的衝突,但作爲jQuery的死忠,我是萬分不情願改寫$爲JQ或其他替代的字符。反之Prototype的粉絲估計也會這樣想。那麼,是不是有另一種解決方案,讓兩種框架能和諧共處呢?現在流行和諧嘛!

另類解法:

先看一小段代碼,猜一下會有什麼效果?

 

Js代碼 

12 1. <script type="text/javascript">   

13 2. (function(name){     

14 3.     alert('hello '+ name);     

15 4. })("world");     

16 5. </script>    

   1. <script type="text/javascript">

   2. (function(name){  

   3.     alert('hello '+ name);  

   4. })("world");  

   5. </script> 

 

 

應該很簡單吧?效果是彈出一個窗品說“hello world”。仔細看這一段Script,前後有兩個括號組成,第一個括號裏面是一個function對象,第二個括號是一個字符串。可以這樣理解,第一個括號裏面定義了一個函數,第二個括號裏面給出的參數,兩個加在一起實際上是完成了一次函數調用!

那現在來點真實的:

 

Js代碼 

17  <script type="text/javascript" src="jquery-1.2.6.js">     

18 </script>     

19 <script type="text/javascript" src="prototype-1.6.0.2.js">     

20 </script>     

21 <div id="test_jquery"></div>   

22    <div id="test_prototype"></div>   

23 <script type="text/javascript">     

24 <!--     

25 (function($){     

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

27         alert($("#test_jquery").html("this is jqeury"));     

28     });     

29 })(jQuery);    

30 $("test_prototype").innerHTML="this is prototype";    

31 //-->     

32 </script>    

  <script type="text/javascript" src="jquery-1.2.6.js">  

 </script>  

 <script type="text/javascript" src="prototype-1.6.0.2.js">  

 </script>  

 <div id="test_jquery"></div>

    <div id="test_prototype"></div>

 <script type="text/javascript">  

 <!--  

 (function($){  

     $(document).ready(function(){  

         alert($("#test_jquery").html("this is jqeury"));  

     });  

 })(jQuery); 

 $("test_prototype").innerHTML="this is prototype"; 

 //-->  

 </script>  

 

 

經測試,jQuery與Prototpye工作均正常。唯一以往常不一樣的是,我們要在以前寫的Jquery外面加多一個外套:

 

Js代碼 

33 (function($){       

34   //這裏寫Jquery代碼   

35 })(jQuery);   

 (function($){    

   //這裏寫Jquery代碼

 })(jQuery);

 

 

這個外套巧妙地利用函數局部變量的有效範圍保證你可以安心地按原來的方式寫Jquery代碼,這個方案更合適現有Jquery的代碼升級至Jquery + prototypt。

不足之處 :

還是不能解決Jquery插件的問題,這個問題是傳統方法也無法解決的,只能夠手動去修改插件腳本里面對$的調用,而根本的解決辦法是以後的插件都用剛纔那種另類的方式去寫,才能保證其可用性。而Jquery UI現在好像是這樣做了,我從Demo的源碼 裏面看到的。

 原文:http://bbmyth.iteye.com/blog/218143

 

第二種解決方式:


原文:http://www.iteye.com/topic/566090

 

 

 

一、 jQuery庫在其他庫之前導入,直接使用jQuery(callback)方法如:

Html代碼 

36 <html>  

37 <head>  

38 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

39 <!--先導入jQuery -->  

40 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>  

41 <!--後導入其他庫 -->  

42 <script src="prototype-1.6.0.3.js" type="text/javascript"></script>  

43 </head>  

44 <body>  

45 <p id="pp">test---prototype</p>  

46 <p >test---jQuery</p>  

47   

48 <script type="text/javascript">  

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

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

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

52     });   

53 });   

54   

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

56 </script>  

57 </body>  

58 </html>  

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--先導入jQuery -->

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<!--後導入其他庫 -->

<script src="prototype-1.6.0.3.js" type="text/javascript"></script>

</head>

<body>

<p id="pp">test---prototype</p>

<p >test---jQuery</p>

 

<script type="text/javascript">

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

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

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

    });

});

 

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

</script>

</body>

</html>

 

 二、 jQuery庫在其他庫之後導入,使用jQuery.noConflict()方法將變量$的控制權讓渡給其他庫,有以下幾種方式:

Js代碼 

59 <script type="text/javascript">   

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

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

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

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

64     });   

65 });   

66   

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

68 </script>   

69   

70 //代碼二   

71 <script type="text/javascript">   

72 var $j = jQuery.noConflict();       //自定義一個比較短快捷方式   

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

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

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

76     });   

77 });   

78   

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

80 </script>   

81   

82 //代碼三   

83 <script type="text/javascript">   

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

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

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

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

88     });   

89 });   

90   

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

92 </script>   

93   

94 //代碼四   

95 <script type="text/javascript">   

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

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

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

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

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

101         });   

102     });   

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

104   

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

106 </script>   

107   

108    

<script type="text/javascript">

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

jQuery(function(){                  //使用jQuery

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

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

    });

});

 

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

</script>

 

//代碼二

<script type="text/javascript">

var $j = jQuery.noConflict();       //自定義一個比較短快捷方式

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

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

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

    });

});

 

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

</script>

 

//代碼三

<script type="text/javascript">

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

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

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

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

    });

});

 

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

</script>

 

//代碼四

<script type="text/javascript">

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

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

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

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

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

        });

    });

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

 

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

</script>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章