【问题标题】:What does $(function() {} ); do?$(function() {} ); 是什么?做?
【发布时间】:2011-10-04 01:33:19
【问题描述】:

有时我会创建一个函数,然后再调用该函数。

例子:

function example { alert('example'); }
example(); // <-- Then call it later

不知何故,有些函数无法调用。我必须在里面调用这些函数:

$(function() { });

$(function() {});(function() { }); 是什么意思,它们的区别/目的是什么?

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:
    $(function() { ... });
    

    只是 jQuery 的简写

    $(document).ready(function() { ... });
    

    它的设计目的(除其他外)是确保在页面的所有 DOM 元素都准备好使用时调用您的函数。

    但是,我认为这不是您遇到的问题 - 您能否澄清您所说的“不知何故,某些函数无法调用,我必须在内部调用这些函数”是什么意思? 也许发布一些代码来显示没有按预期工作?

    编辑:重新阅读您的问题,可能是您的功能在页面完成加载之前正在运行,因此无法正确执行;把它放在 $(function) 中确实可以解决这个问题!

    【讨论】:

    • 如果 $(function() { });已经在 $(document).ready() 中了吗?
    • 该函数在没有 $(function() 的情况下无法工作,尽管它已经在 $(document)ready() 中。
    • 好问题!我相信它应该可以工作,因为 jQuery 知道你在正确的地方,但它肯定是无关的;如果你在 .ready() 里面,你可以像往常一样调用你的函数。如果它不起作用,那么发布一个示例,甚至更好 - 尝试制作一个 jsfiddle.net 的小提琴。
    • @JeongWooChang 这样做(function () { ... })();。您必须添加 () 才能调用您的函数。
    • "有经验的开发人员有时会使用简写 $() 来代替 $( document ).ready()。如果您正在编写没有 jQuery 经验的人可能会看到的代码,最好使用长格式." - learn.jquery.com
    【解决方案2】:

    以下是一个jQuery函数调用:

    $(...);
    

    这是“jQuery 函数”。 $ 是一个函数,$(...) 是你调用的那个函数。

    您提供的第一个参数如下:

    function() {}
    

    参数是你指定的函数,当DOM加载完成时$函数会调用提供的方法。

    【讨论】:

      【解决方案3】:

      它只是$(document).ready() 的简写,如:

      $(document).ready(function() {
        YOUR_CODE_HERE
      });
      

      有时您必须使用它,因为您的函数在 DOM 完成加载之前正在运行。

      这里解释了一切:http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

      【讨论】:

        【解决方案4】:

        一些理论

        $ 是函数的名称,就像您为函数指定的任何其他名称一样。任何人都可以在 JavaScript 中创建一个函数并将其命名为$,如下所示:

        $ = function() { 
                alert('I am in the $ function');
            }
        

        JQuery 是一个非常著名的 JavaScript 库,他们决定将整个框架放在一个名为 jQuery 的函数中。为了让人们更容易使用该框架并减少每次想要调用该函数时输入整个单词jQuery,他们还为其创建了一个别名。该别名是$。因此$ 是函数的名称。在 jQuery 源代码中,您可以自己查看:

        window.jQuery = window.$ = jQuery;
        

        回答您的问题

        那么 $(function() { }); 是什么?

        现在您知道$ 是函数的名称,如果您使用的是jQuery 库,那么您将调用名为$ 的函数并将参数function() {} 传递给它。 jQuery 库将在适当的时候调用该函数。什么时候是合适的时间?根据 jQuery 文档,合适的时间是页面的所有 DOM 元素都准备好使用时。

        另一种方法是这样的:

        $(document).ready(function() { });
        

        如您所见,这更冗长,所以人们更喜欢$(function() { })

        因此,正如您所注意到的,无法调用某些函数的原因是因为这些函数还不存在。换句话说,DOM 还没有加载。但是如果你把它们放在作为参数传递给$ 的函数中,那么DOM 就会被加载。至此,该函数已经创建并可以使用了。

        另一种解释$(function() { })的方式是这样的:

        嘿,$ 或 jQuery,你能在 DOM 加载后调用我作为参数传递的这个函数吗?

        【讨论】:

          【解决方案5】:

          我认为您可能将 Javascript 与 jQuery 方法混淆了。 Vanilla 或纯 Javascript 类似于:

          function example() {
          }
          

          可以随时随地调用这种性质的函数。

          jQuery(一个基于 Javascript 构建的库)内置了通常需要在调用 DOM 之前完全呈现的函数。完成时的语法是:

          $(document).ready(function() {
          });
          

          因此,通常在该方法中调用以$ 或单词jQuery 为前缀的jQuery 函数。

          $(document).ready(function() {        
              // Assign all list items on the page to be the  color red.  
              //      This does not work until AFTER the entire DOM is "ready", hence the $(document).ready()
              $('li').css('color', 'red');   
          });
          

          该块的伪代码是:

          当文档对象模型$(document)准备好.ready()时,调用以下函数function() { }。在该函数中,检查页面$('li') 上的所有&lt;li&gt;,并使用jQuery 方法.CSS() 将CSS 属性“color”设置为值“red”.css('color', 'red');

          【讨论】:

            【解决方案6】:

            这是$(document).ready() 的快捷方式,在浏览器完成页面加载时执行(这里的意思是“当 DOM 可用时”)。见http://www.learningjquery.com/2006/09/introducing-document-ready。如果您在浏览器完成页面加载之前尝试调用example(),它可能无法正常工作。

            【讨论】:

            • “已完成加载页面”不准确且具有误导性。
            猜你喜欢
            • 2012-06-09
            • 1970-01-01
            • 2012-12-19
            • 1970-01-01
            • 2012-08-31
            • 1970-01-01
            • 1970-01-01
            • 2022-06-15
            • 1970-01-01
            相关资源
            最近更新 更多