2

I have a quick, beginners-type-question. If I were to use jQuery and some other framework, would the following statement be problematic:

jQuery(document).ready(function () {
    $("input[name='password']").focus(function () {
        $("input[value='login']").attr("checked", "checked");
    });
});

That is, the use of '$' within the .ready() function. Should '$' be replaced with 'jQuery' in order to avoid conflicts?

dalizard
  • 471
  • 1
  • 6
  • 15
  • http://stackoverflow.com/questions/1049112/what-is-the-in-jquery/1050433#1050433 – SilentGhost Jul 21 '09 at 11:25
  • @SilentGhost, Thank you. I was looking for a similar question in order not the ask the same thing again, but couldn't find anything. – dalizard Jul 21 '09 at 12:04

6 Answers6

6

Yes, if you're using another library that uses $, you could use the full form jQuery or set up jQuery in no-conflict mode. E.g.:

<script>
     jQuery.noConflict();

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

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>

Another way to benefit from a short name while preventing conflicts with other libraries would be to do somthing like this:

<script>
     var $j = jQuery.noConflict();

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

     // Use Prototype with $(...), etc.
     $('someid').hide();
</script>

I would suggest reading this:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

karim79
  • 339,989
  • 67
  • 413
  • 406
2

When using multiple libraries that make use of $, the common practice is to use noConflict mode and reassign the $ for jQuery to something else.

var $jq = jQuery.noConflict();

$jq( function() {
    $jq("input[name='password']").focus( function() {
        $jq("input[value='login']").attr("checked","checked");
    });
});

In plugin development, a common way to handle this is to pass `$' in as a parameter to a function defining your plugin definition and applying the function to the jQuery object.

;(function($) {
    ...
})(jQuery);
tvanfosson
  • 524,688
  • 99
  • 697
  • 795
  • The second options is probably more appropriate (often used) for plugin development. So advisable options are the use of .noConflict() or simply 'jQuery'. I am just trying to guess the best practice :-) – dalizard Jul 21 '09 at 12:08
  • I would say for short bits of code, included directly on the page that I would use the noConflict mode. It doesn't take typing jQuery too many times before you appreciate having the short-cut -- that's why there's a $ in the first place. For longer, self-contained code, like a plugin, it's better and easier to use the function syntax since you get to use the short-cut AND you always need to be aware that there may be conflicts. – tvanfosson Jul 21 '09 at 12:12
1

What you've shown is correct except that you will want to replace all instances of '$'. You will then be overriding the '$' function.

jQuery(document).ready(function () {
    jQuery("input[name='password']").focus(function () {
        jQuery("input[value='login']").attr("checked", "checked");
    });
});
mmcglynn
  • 7,668
  • 16
  • 52
  • 76
1

For sure, make your code as explicit as possible - especially in this case. If the site changes later, you may end up calling the wrong library.

Kieron
  • 26,748
  • 16
  • 78
  • 122
1

You can wrap you jQuery code part into function like this:

function($) {
    // jQuery code here
}(jQuery);

// use $ here to access other JS library

and you will be able to use $ inside the function (this is self-executing function that maps $ to jQuery.

RaYell
  • 69,610
  • 20
  • 126
  • 152
1
jQuery(document).ready(function ($) {
    $("input[name='password']").focus(function () {
        $("input[value='login']").attr("checked", "checked");
    });
});

Callback for ready() receives jQuery as an argument: you can call this argument $. This will override other $ definition in the scope of the callback.

Oleg Andreev
  • 486
  • 3
  • 9