Jquery准备好了怎么回事?

时间:2013-11-05 16:00:31

标签: jquery submit document document-ready

这一直困扰着我的思绪: 任何人都可以解释1和1之间的区别。 2?

  1. (function($){...code...});
  2. $(document).ready(function(){...code...});
  3. 我一直认为它们是相同的(除了可以在第一个例子中控制的$赋值),但事实证明两者都表现出不同的行为。

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

    <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>
    

    这里发生了什么?

4 个答案:

答案 0 :(得分:1)

正确使用onready

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

您立即调用了您的函数(请注意,我刚刚创建函数$(..)时调用了(function ...)),因此DOM可能尚未在您的上下文中准备就绪。

答案 1 :(得分:0)

错字

缺少$(function($){...code...});

      ^ added $ here

$(function($){...code...});是jQuery的“DOMReady”函数的别名,该函数在DOM准备好由JavaScript代码操作时执行。这允许您编写需要DOM的代码,知道DOM可用并且可以随时被应用程序读取,写入和修改。

答案 2 :(得分:0)

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

(function($){

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

答案 3 :(得分:0)

no 1仅用于创建范围,因此您在其中声明的变量(或作为参数)仅对其内部的代码可见。这些函数称为Immediately-Invoked Function Expression

no 2是就绪事件处理程序,它应用于您的文档。这意味着当文档准备就绪时,回调将被执行一次(因此不是立即执行,而不是1)。完全构造DOM层次结构时,即脚本可以使用DOM元素时,文档就可以使用了。

Javascript通常是同步加载和执行的。这意味着它在DOM中加载它的位置执行。例如,如果将脚本标记放在标题中,脚本将在构造该部分时执行。头部位于身体部位之前,这意味着在该点处没有构造可见元素,因为DOM是从上到下构造的,因此无法访问。这就是为什么在尝试选择正文中的元素之前需要等待文档准备好的原因,因此就绪处理程序。