jQuery noConflict Tips

Some tips which i feel you need to know before using jQuery library:

1. You can use jQuery instead of $.

2. Predefined alias for jQuery: you can assign jQuery to any variable. With this you can load any versions of jQuery into your site.

<!– load jQuery 1.1.3 –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.1.3.js”></script>
<script type=”text/javascript” src=”jquery.dimensions.min.js”></script>

<!– revert global jQuery and $ variables and store jQuery in a new variable –>
<script type=”text/javascript”>
var jQuery_1_1_3 = $.noConflict(true);
</script>

<!– load jQuery 1.3.2 –>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.3.2.js”></script>

<!– revert global jQuery and $ variables and store jQuery in a new variable –>
<script type=”text/javascript”>
var jQuery_1_3_2 = $.noConflict(true);
</script>

3. To use the $ variable even when an alias is mentioned
 Syntax:  (function($){//$ Code goes here})(jQuery_1_3_2);

(function($) {
 $(‘<button>Use jQuery 1.1.3</button>’)
  .click(function() {
   alert(‘Top: ‘ + $(this).offset().top + ‘\n’ +
    ‘jQuery: ‘ + $.fn.jquery);
  })
  .appendTo(‘body’);
})(jQuery_1_1_3);

4. Always ensure that jQuery’s noConflict method is called above any other javascript libraries. Or else the noConflict will be of no use and gives errors.

5. Finally to check if jQuery is defined:

 if(typeof (jQuery) == “undefined”) {//jQuery undefined} else {//jQuery defined}