Jquery와 다른javascript 프레임워크가 공존하도록 하기

8664 단어 JavaScriptjquery프레임prototypemootools
GENERAL
The jQuery library, and virtually all of its plugins are constrained within the jQuery namespace. As a general rule, "global"objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like Prototype, MooTools, or YUI).
That said, there is one caveat: By default, jQuery uses "$ "as a shortcut for "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: 
 <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: 
 <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. 
 <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.
Also see: [ http://docs.jquery.com/Plugins/Authoring#Custom_Alias_in_plugin_code  Custom Alias http://showercurtainrodsrings.com
INCLUDING  JQUERY  BEFORE OTHER LIBRARIES
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  jQuery(document).ready(function($) {}) 
DOM ready event:
jQuery(function($) { /* some code that uses $ */ });
Note: Again, inside that block you can't use Prototype methods.
jquery 선택한 select, 선택한 라디오 값 가져오기
jquery validate ie8에서 시간 검증 실효와 jquery UI datetimepicker 기반 시간 형식 변환

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage