jquery 与 prototype 冲突 Using jQuery with Other Libraries

最新推荐文章于 2022-10-11 16:01:48 发布

最新推荐文章于 2022-10-11 16:01:48 发布 · 95 阅读

文章标签：

#jQuery #prototype #HTML #J# #REST #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文介绍了三种避免jQuery与Prototype等其他JavaScript库冲突的方法：通过调用jQuery.noConflict()、重新赋值变量以及使用jQuery(document).ready()函数。此外还提供了一些jQuery快捷引用技巧。

第一类：Overriding the `$` -function （重写$）

However, you can override that default by calling jQuery.noConflict () at any point after jQuery and the other library have both loaded. For example:

第一种是加入jQuery.noConflict(); 用jQuery代替$

 <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').hide();
   </script>
 </head>
 <body></body>
 </html>

This will revert $ back to its original library. You'll still be able to use "jQuery" in the rest of your application.

Additionally, there's another option. If you want to make sure that jQuery won't conflict with another library - but you want the benefit of a short name, you could do something like this:

第二种是赋值jQuery.noConflict()于另一变量; 用这一变量代替$

<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').hide();
   </script>
 </head>
 <body></body>
 </html>

You can define your own alternate names (e.g. jq, $J, awesomeQuery - anything you want).

Finally, if you don't want to define another alternative to the jQuery name (you really like to use $ and don't care about using another library's $ method), then there's still another solution for you. This is most frequently used in the case where you still want the benefits of really short jQuery code, but don't want to cause conflicts with other libraries.

第三种是使用jQuery(document).ready(function($){}）

<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>

This is probably the ideal solution for most of your code, considering that there'll be less code that you'll have to change, in order to achieve complete compatibility.

第一类：Including `jQuery` before Other Libraries （把jquery写在其他库的前面，这是不需要加入jQuery.noConflict()）

If you include jQuery before other libraries, you may use "jQuery" when you do some work with jQuery, and the "$" is also the shortcut for the other library. There is no need for overriding the $ -function by calling "jQuery.noConflict()".

<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>

Referencing Magic - Shortcuts for `jQuery`

If you don't like typing the full "jQuery " all the time, there are some alternative shortcuts:

Reassign jQuery to another shortcut
- var $j = jQuery;
- (This might be the best approach if you wish to use different libraries)
Use the following technique, which allows you to use $ inside of a block of code without permanently overwriting $:
- (function($) { /* some code that uses $ */ })(jQuery)
- Note: If you use this technique, you will not be able to use Prototype methods inside this capsuled function that expect $ to be Prototype's $ , so you're making a choice to use only jQuery in that block.
Use the argument to the DOM ready event :
- jQuery(function($) { /* some code that uses $ */ });
- Note: Again, inside that block you can't use Prototype methods

我的用法：

1. 编辑 jquery.js 在最后添加

// ... jquery code ... A.jQuery=A.$=c})(window); ....
var _gls = jQuery.noConflict(true);

2. 在 javascript 页面添加：

(function($){$(function()
{
    // jquery code
    // eg: $('.class').click(function(){});

})}(_gls))

jquery 与 prototype 冲突 Using jQuery with Other Libraries

第一类：Overriding the $ -function （重写$）

第一类：Including jQuery before Other Libraries （把jquery写在其他库的前面，这是不需要加入jQuery.noConflict()）

Referencing Magic - Shortcuts for jQuery

第一类：Overriding the `$` -function （重写$）

第一类：Including `jQuery` before Other Libraries （把jquery写在其他库的前面，这是不需要加入jQuery.noConflict()）

Referencing Magic - Shortcuts for `jQuery`