jQuery document ready function

问题

Are the end results of the following jQuery snippets identical?

Snippet 1:

$(function() { alert('test!'); });

Snippet 2:

$(document).ready(function() { alert('test!'); });

In other words, is $(function(){}) just shorthand for $(document).ready(function() { });?

The reason I'm asking is because we're seeing some strange issues with a small application we've built using jQuery and jQuery UI. Occasionally, when performing a form submit action by clicking a button the browser window will just freeze. We can still use the underlying browser window (the one that launches the pop-up) until we perform some actions there. The users can only continue by force closing the browser (Internet Explorer, obviously). We suspect this is related to the Acrobat PDF plug-in, but I'm just checking all the angles here, because I found this issue which seems to exhibit similar behaviour.

回答1:

Yes they're equivalent. See this link for reference .ready()

回答2:

All three of the following syntaxes are equivalent:

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

Aliasing the jQuery Namespace

When using another JavaScript library, we may wish to call $.noConflict() to avoid namespace difficulties. When this function is called, the $ shortcut is no longer available, forcing us to write jQuery each time we would normally write $. However, the handler passed to the .ready() method can take an argument, which is passed the global jQuery object. This means we can rename the object within the context of our .ready() handler without affecting other code:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});

回答3:

$(function(){}) and $(document).ready(function() { }) are identical.

回答4:

Yes, this is identical. but the first one is usually used in jquery for easiness.

$(function() { 
    alert('test!'); 
});

回答5:

The following code also working

$(document).ready(function(){
    alert("success");
});

$(function(){
    alert("succes");
});

回答6:

Yes:

$(document).ready(function() { 
  /* code */
});

…and:

$(function() { 
  /* code */
});

…are effectively the same, and the latter is commonly referred to as shorthand for the former.

If you're wondering why they produce the same outcome, it has to do with the jQuery constructor—the jQuery() function, aliased as $()—and its allowed inputs.

The constructor is documented at api.jquery.com/jquery/, and its two relevant options are outlined below.

jQuery( selector [, context ] )

Accepts a string containing a CSS selector which is then used to match a set of elements.

Returns a jQuery object.

This option above is how you're invoking the jQuery constructor when writing:

$(document).ready(function() { /* code */ });

The document object is selected and used to construct a jQuery object. When the DOM is fully loaded, that jQuery object invokes the callback (the anonymous function) within ready().

jQuery( callback )

Binds a function to be executed when the DOM has finished loading.

Returns a jQuery object.

This option above is how you're invoking the jQuery constructor when writing:

$(function() { /* code */ });

The callback function (the anonymous function) is used to construct a jQuery object, and when the DOM is fully loaded, it is invoked.

回答7:

Different ways to write jQuery Document Ready Snippet

$(document).ready(function() { ... }); 
$(function() { ... });
jQuery(document).ready(function() { ... });
jQuery(function() { ... });

http://webiwip.com/interview-questions-answers/jquery-interview-questions/10510

来源：https://stackoverflow.com/questions/5754192/jquery-document-ready-function

标签

jquery

jquery-ui

document-ready