How should I initialize jQuery?

I have seen this (I'm also using it):

$(document).ready(function(){
   // do jQuery
})

and also this (I have tried lately):

(function(){
   // do jQuery
})(jQuery)

both work fine.

What is the difference of the two (except on how it lo开发者_如何转开发oks)?

Which one is more proper to use?

---

The second example you show is a self executing anonymous function. Every separate JS file you use would probably benefit from using it. It provides a private scope where everything you declare with the var keyword remains inside that scope only:

(function($){
   var special = "nice!";
})(jQuery);

alert(special); // would be undefined

The first example is shorthand for $(document).ready which fires when the DOM can be manipulated.

A couple cool things about it. First, you can use it inside the self executing function:

(function($){
   $(function(){
      // Run on DOM ready
   });

   // Run right away
})(jQuery);

Secondly, if all you need is a few lines in document ready, you can combine both the private scope and the DOM ready function like this:

jQuery(function($){
   // $ = jQuery regardless of what it means
   // outside this DOM ready function
});

---

The first example runs the function when the DOM tree is built. The second example runs the function right away.

If you look closely, in the second example, there are two parentheses after the function declaration ( in this particular case, you pass in the global jQuery object as an argument to avoid conflict ), thereby immediately invoking the function

The right function to use depends on when you want the function to run. If you want to run a function on DOMReady ( the ready event ), you can use $( document ).ready like you mentioned or the shorthand $( function() {...} ).

Otherwise, if you want to run a function immediately and have anonymous function scope, use the second example.

---

In addition to all the previous answers, jQuery have three initialization methods that can be used:

The traditional method compatible with most browsers, see code:

$(document).ready(function () {

        });

The short-hand method, see code:

$(function () {

        });

The implicit method, see code:

$().ready(function () {

        });

They all work for modern browsers and safe to use.

---

I always use the first. The second appears to be a way to protect against jquery being overriden. One reason you might do this is if you don't know what other scripts will be loaded on the page. If all of your stuff depends on, say, jquery 1.3, and you're in an environment where you don't control the entire page, your code could break if someone loads in jquery 1.4. Sounds ugly, but this sort of thing does happen. So you can cover your butt by creating a closure immediately after you load jquery, and holding your version of jquery inside that closure. I think that's what's going on in the second example.

Neither one actually initializes jquery. Jquery takes care of any initilazation it needs on its own. You'd still, quite likely wind up using the first example even if you were using the second, you'd just be putting the $(document).ready inside the function in your second example.

---

Though it's an old conversation, I want to share my way to init jQuery

;(function($, window, document) {

    // Your Code Goes Here

}(window.jQuery, window, document));

By this, you can sure about that nothing can go wrong.