From jQuery JavaScript Library
Jump to: navigation, search
[edit]
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"
[edit]
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').style.display = 'none';
</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').style.display = 'none';
</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').style.display = 'none';
</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: Custom Alias
[edit]
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
o var $j = jQuery;
o (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 $:
o (function($) { /* some code that uses $ */ })(jQuery)
o 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:
o jQuery(function($) { /* some code that uses $ */ });
o Note: Again, inside that block you can't use Prototype methods
No comments:
Post a Comment