jQuery.ready()与jQuery(document).on("ready")的差异及执行异常原因

首先得揪出示例1的写法bug——你这里根本没把回调函数绑定到ready事件上，而是立即执行了那个匿名函数，然后把函数执行后的结果（这里是undefined，因为函数没返回值）传给了.on("ready")。

看示例1的代码结构：

jQuery(document).on("ready", (function($) {
  console.log($("h1").text());
})(jQuery));

括号里的(function($){...})(jQuery)是立即执行函数表达式（IIFE），代码一加载就会直接运行这个函数。如果是外部js文件，大概率DOM还没渲染完成，自然拿不到h1元素；而如果是嵌入HTML的<script>，可能刚好你的script标签放在了页面底部，执行时DOM已经加载好了，所以碰巧能输出结果。

而示例2的写法是正确的：

jQuery(document).ready(function() {
  console.log(document.querySelector("h1").innerHTML);
});

这里是把一个函数传给.ready()，jQuery会自动在DOM加载完成后调用这个函数，不管是嵌入HTML还是外部js文件，都会等到DOM就绪再执行。

至于你以为jQuery.ready()和jQuery(document).on("ready")等价，其实正确使用的话确实等价，但正确的.on("ready")写法应该是这样的：

jQuery(document).on("ready", function($) {
  console.log($("h1").text());
});

注意这里是直接传函数，不是传立即执行的结果。

总结一下：示例1的核心问题是误用了立即执行函数，导致代码在绑定事件前就直接跑了，和事件绑定本身无关；示例2是标准的DOM就绪回调写法，所以不管放哪都能正常工作。

内容的提问来源于stack exchange，提问作者FireEmerald