jQuery syntax - when to use $ vs jQuery

Question

What's difference between this two?

$('#SPANID').html("Some Text");

jQuery('#SPANID').html("Some Text");

Is it something prototype vs jQuery?

Answer 1

if you are using more then one javascript library there can be conflicts if you just use the $. using jQuery will avoid those.

Answer 2

No difference actually, except for the fact that jQuery('SPANID') should actually be jQuery('#SPANID')

$ is just a shorthand for jQuery

EDIT: I understand that the real difference between $ and jQuery is in the possibile namespace collision with other libraries. Other than that, they work the same way.

Answer 3

Using the explicit "jquery" would avoid a clash if you happened to also reference another library which used "$"

Answer 4

It's an alias for the same thing. If you want to use jQuery on the same page as other libraries that use the $ symbol, you can use jQuery with the .noConflict() option. This will allow you to use $ for the other library and jQuery for the jQuery library.

Answer 5

The difference is this: $ is often used by other libraries or JavaScript constructs, so it could be overwritten and may not do what you expect. jQuery always refers to the jQuery library, so it will do what you expect.

In environments where you cannot guarantee that $ will not be overwritten by something else, using jQuery or jQuery.noConflict( ) is safer than $.

Answer 6

Use jQuery when you've got another library that's already defined $. Use $ as the convenient shorthand it is when you don't (or inside of function scopes where you don't have to worry about it. :)

Although personally, I think jq would make a nice shorthand (same number of keystrokes as $, probably a little less common).

Answer 7

It's not just short hand but it is made for other JavaScript libraries that might be using the $ character and to avoid confusion or conflict then using the jquery keyword is preferred.

Answer 8

They both do the same thing. Most Libraries use $ as a shorter way to access functions within the libraries.

jQuery has many ways of accessing its library:

window.jQuery('#SPANID').html("Some Text");

window.$('#SPANID').html("Some Text");

jQuery('#SPANID').html("Some Text");

$('#SPANID').html("Some Text");

jQuery or window.jQuery can be used instead of $ if you were using more than one library.

JQuery has a function called jQuery.noConflict(); which relinquishs jQuery's control of the $ variable making $ not work with jQuery.

This would be good for using more than one library that use $.

So you when you use jQuery you would do jQuery('#message').addClassName('read'); and $('#message').addClassName('read'); when using Prototype.

(This next bit is a little off topic but will help if you want to use $ with multiple libraries)

Although there is a way to use $ on different libraries at the same time, using anonymous functions. like so:

(function($){


})(jQuery);


(function($){


})(Prototype);

Each of the functions passes the library object, so jQuery and Prototype, as the variable $ allowing use to use it with many libraries. If you contain your code for each library within each one it will work.

For example:

(function($){
    $(document).ready(function(){

         $('#message').addClass('read');

    });

})(jQuery);


(function($){
     document.observe("dom:loaded", function() {

         $('message').addClassName('read');
         //Or
         $$('#message').addClassName('read');

     });

})(Prototype);

Answer 9

More details are here: http://api.jquery.com/ready/

The $ is an alias for jQuery which (jQuery) is a Javascript library. Plug-ins are usage of the library in a specific fashion which create specific use of the library and extend its functionality.

Some examples of use:

"Regular" jQuery code:

   $(function(){ 
      // my jquery code here
    });

NOTE: this is an EVENT management which is to say, it executes on the DOM ready event.

Plug-in code:

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

This allows the use of the $ inside without confusion because it says "assign jQuery to the $ passed in the function($)

---

$(function(){ 
  //stuff here such as jQuery code
});

as in

$(function(){ 
  $("#mybutton").click(function() {
     alert("hi");)
  )};
});

Is the same as:

(function($) { 
  $(document).ready(function() { 
    $("#mybutton").click(function() {
       alert("hi");
    )};
  }) 
})(jQuery)

but perhaps not as good as (without the binding (jQuery) at the end), which only comes into play if you use other libraries that use the $.

---

$ is just a character, thus you can have variables such as:

myvariable = 0; $myvariable = 0; my$variable = 0;

Nothing special here, just using another character.

I just so happens that a common use of $ is $ = jQuery; Other libraries use this character as a common shorthand (alias sort of) as well, thus the noconflict and the use of the full name (jQuery).