原文来自:http://docs.jquery.com/Using_jQuery_with_Other_Libraries

我对重要的部分做下翻译,希望对大家有所帮助。特别是magneto的js库使用prototype,很多人想用jquery,那么这个兼容就很有用了。

jquery prototype 兼容分两种情况,我们就让prototype可以正常使用,在使用jquery的时候做下代码的兼容处理。

第一种:先加载prototype,后加载jquery

 <html>
 <head>
   <script src="prototype.js"></script>
   <script src="jquery.js"></script>
   <script>
   jQuery.noConflict();

     // Put all your code in your document ready area
     jQuery(document).ready(function($){
       // Do jQuery stuff using $
       $("div").hide();
     });

// Use Prototype with $(…), etc. $(‘someid’).hide(); </script> </head> <body></body> </html> ———————————— 如上所示,红色部分就是对jquery做的一个兼容处理,这样就可以达到 jquery和prototype兼容了。jQuery.noConflict();要放在 最前面,而jquery的代码就要放到 jQuery(document).ready(function($){ ……… }); 内部。

第二种:先加载jquery,后加载prototype

 <html>
 <head>
   <script src="jquery.js"></script>
   <script src="prototype.js"></script>
   <script>
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
 </head>
 <body></body>
 </html>

如上所示,不用调用 jQuery.noConflict();,使用 jQuery(document).ready(function(){ …….. });,在这个函数内部使用jQuery代替$。

标签:

7 Responses


  1. 杨磊 on 05 十二 2010

    请问KEYKEY,你这段加载时在PAGE.XML里面修改的吗?如果不是,是在哪里做js加载的修改的?

    • key on 06 十二 2010

      在响应的模板文件.phtml中添加

  2. [...] magento中prototype与jquery兼容 [...]

  3. guhao on 01 八 2011

    不能解决所有冲突,比如使用jquery插件时就不行

    • 钥匙 on 02 八 2011

      插件的js加载顺序一般不可控,要看下前台的源代码,看下。

  4. 上海按摩 on 02 八 2011

    代码不懂,现在的开源模板很多了,不知道你们今后怎么办

    • 钥匙 on 02 八 2011

      花些时间学吧,快不了。


Leave your comment