jQuery 与 prototype 共存

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍四种使jQuery和Prototype两种JavaScript库在同一网页中和平共存的方法。这些方法包括使用自定义变量名、调用noConflict()函数及将代码包裹在函数中等。通过这些技巧，开发者可以灵活选择所需的库功能，避免命名冲突。

[color=red]方式一（推荐）[/color]


<html>    
<head>    
<script src="boot.js"></script>    
<script>  
var $j = $import("org.jquery.$");  
var $p= $import("net.nioc.prototype.$");  

//Use jQuery via $j(...)    
$j(document).ready(function(){    
       $j("div").hide();    
 });   

// Use Prototype with $p(...), etc.    
$p('someid').style.display = 'none';    

</script>    
</head>    
<body></body>    
</html>

[color=red]方式二[/color]


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

     // Use jQuery via jQuery(...)  
     jQuery(document).ready(function(){  
       jQuery("div").hide();  
     });  

     // Use Prototype with $(...), etc.  
     $('someid').style.display = 'none';  
   </script>  
 </head>  
 <body></body>  
 </html>

[color=red]方式三[/color]


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

     // Use jQuery via $j(...)  
     $j(document).ready(function(){  
       $j("div").hide();  
     });  

     // Use Prototype with $(...), etc.  
     $('someid').style.display = 'none';  
   </script>  
 </head>  
 <body></body>  
 </html>

[color=red]方式四[/color]


<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').style.display = 'none';  
   </script>  
 </head>  
 <body></body>  
 </html>