jquery - Jquery 准备好了怎么回事？

Question

这一直困扰着我很长一段时间：谁能解释 1 和 2 之间的区别是什么？

1. (function($){...code...});
2. $(document).ready(function(){...code...});

我一直认为它们是相同的（除了可以在第一个示例中控制的 $ 分配），但事实证明两者都呈现不同的行为。

在以下示例中，“提交”代码将起作用，而“实时验证”代码将不起作用：

<script >
(function($){

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

})(jQuery);
</script>

在以下示例中，“实时验证”代码将起作用，而“提交”代码将不起作用：

<script>
$(document).ready(function(){

 $('input, textarea, select, checkbox').each(function(){
  ... realtime validation code here ...
 });

 $('#subscribe_form').submit(function(){
  ... submit validation code here ...
 });

});
</script>

这里发生了什么？

Answer 1

onread的正确用法是

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

您立即调用了函数（请注意，我$(..)在您刚刚创建函数时调用了函数(function ...)），因此 DOM 在您的上下文中可能还没有准备好。

Answer 2

no 1 仅用于创建范围，因此您在其中声明的变量（或作为参数）仅对其中的代码可见。此类函数称为立即调用函数表达式

no 2 是准备好的事件处理程序，它应用于您的文档。这意味着当文档准备好时回调将被执行一次（所以不是立即执行，而不是 1）。当 DOM 层次结构完全构建时，文档就准备好了，也就是说，当您的 DOM 元素可用于您的脚本时。

Javascript 通常是同步加载和执行的。这意味着它是在它被加载到 DOM 时执行的。例如，如果您将脚本标记放在标题中，则该脚本将在构建该部分时执行。head 部分在 body 部分之前，这意味着此时没有构建可见元素，因为 DOM 是从上到下构建的，所以没有一个是可访问的。这就是为什么在尝试选择正文中的元素之前需要等待文档准备好，因此需要准备就绪处理程序。

Answer 3

错字

失踪$(function($){...code...});

      ^ added $ here

---

$(function($){...code...});是 jQuery 的“<a href="http://api.jquery.com/ready/" rel="nofollow">DOMReady”函数的别名，该函数在 DOM 准备好被 JavaScript 代码操作时执行。这允许您编写需要 DOM 的代码，同时知道 DOM 可用并且可以由您的应用程序读取、写入和以其他方式修改。

Answer 4

以下内容不会在页面加载后执行，而是立即执行——查看使用它的 jquery 小部件示例。

(function($){

这与在文档准备好之前不执行代码完全不同。