document.ready 和 $function 之间的区别 [重复]答案

【问题标题】：Differences between document.ready and $function [duplicate]document.ready 和 $function 之间的区别 [重复]
【发布时间】：2012-03-12 21:02:04
【问题描述】：

可能重复：
What is the difference between these jQuery ready functions?
jquery: Choosing a document.ready method

这样做有什么区别

$(function() {
    $("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

还有这个

$(document).ready(function(){
    $("a").click(function(event){
        alert("Thanks for visiting!");
    });
});

【问题讨论】：

前者不那么罗嗦，当你习惯了这个成语后，它的可读性就更高了。否则它们具有相同的效果。

标签： javascript jquery jquery-plugins document-ready

【解决方案1】：

它们是一样的。查看 jQuery .ready() docs。这是来自文档的引述：

以下三种语法都是等效的：

$(document).ready(handler)

$().ready(handler)（不推荐）

$（处理程序）

【讨论】：

哈哈。从来没有停止让我惊讶。否决了正确答案和文档中的引用:)

【解决方案2】：

您的示例之间的功能没有区别 - 它们都已绑定到 DOM。

作为参考，您可以在两个点上绑定 jQuery 代码。

第一个将在 DOM 准备好时执行（两者是等效的）：

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

// shortened 
$(function() {
  // code...
});

// ES6 example with $ aliased, note this is not supported in IE
jQuery($ => {
  // code...
});

第二个将在页面加载完所有图像、样式表等后执行。

$(window).on("load", function() {
  // code...
});

当您需要获取图像的width() 或height() 时，第二个很有用。这些属性只有在图像完全下载到客户端系统后才可用。

另请注意，$(window).load(fn); 现在已弃用，不应再使用。

【讨论】：

当然，除了绑定之外，重要的是要记住初始化代码有时不需要绑定到任何事件。根据article Dave Ward，有些可以在读取后立即运行。

【解决方案3】：

以下三种语法都是等价的：

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

http://api.jquery.com/ready/

【讨论】：

如果它们是等价的，为什么不推荐呢？
为了清楚起见，截至该日期，文档说建议使用 $(handler)，即通常将其视为 $(function(){});，并在该函数主体中使用代码