jquery prototype 兼容

jQuery与Prototype的兼容使用

最新推荐文章于 2025-12-03 23:30:00 发布

转载最新推荐文章于 2025-12-03 23:30:00 发布 · 1.5k 阅读

文章标签：

#jquery #prototype #function #html #div

magento Designers 专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在项目中同时使用jQuery和Prototype两个JavaScript库，提供了两种兼容处理方式：一种是在加载jQuery之前加载Prototype，另一种是在加载jQuery之后加载Prototype，并在jQuery代码内部使用Prototype的相关方法。通过这种方式，开发者可以在不修改原有代码的情况下实现两个库之间的无缝切换。

我对重要的部分做下翻译，希望对大家有所帮助。特别是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代替$。