Question

这两者之间有什么区别。

这两个函数是否同时被调用？我知道，当浏览器呈现整个HTML页面时会触发document.ready，但第二个函数（自调用匿名函数）会怎样。是等待浏览器完成呈现页面还是在遇到它时调用它？

Answer 1

$(document).ready(function(){ ... }); 或简短 $(function(){...});

在DOM is ready时调用此函数，这意味着您可以开始查询元素。 .ready()将在不同的浏览器上使用不同的方式来确保DOM准备就绪。
(function(){ ... })();

当浏览器解释您的ecma-/javascript时，这只不过是自行调用的功能。因此，你不太可能在DOM elements成功地采取行动。

Answer 2

(function(){...})();将在Javascript中遇到后立即执行。

加载文档后将执行

$(document).ready()。 $(function(){...});是$(document).ready()的快捷方式，并完全相同。

Answer 3

$(document).ready(function() { ... });只是将该函数绑定到文档的ready事件，因此，正如您所说，当文档加载时，事件会触发。
(function($) { ... })(jQuery);实际上是Javascript的一个构造，所有这段代码都是将jQuery对象作为参数传递给function($)并运行函数，所以里面该函数$始终引用jQuery对象。这有助于解决命名空间冲突等问题。

所以＃1在文档加载时执行，而＃2立即运行，jQuery对象名为$作为简写。

Answer 4

当DOM（文档对象模型）准备好执行JavaScript代码时，将执行以下代码。

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

上述代码的简写是：

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

下面显示的代码是一个自我调用的匿名JavaScript函数，并将尽快执行浏览器解释它：

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

下面显示的jQuery自调用函数将全局jQuery对象作为参数传递到function($)。这使得$可以在自动调用函数中本地使用而无需使用遍历定义的全局范围。 jQuery不是唯一使用$的库，所以这个减少潜在的命名冲突。

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

Answer 5

document.ready在DOM“构建”之后运行。自我调用函数立即运行 - 如果在构造DOM之前插入<head>。