$(function() {} );是什么作用?

273
有时我会编写一个函数,并稍后调用该函数。
例子:
function example { alert('example'); }
example(); // <-- Then call it later

某些函数无法被调用。我必须在内部调用这些函数:

$(function() { });

$(function() {});(function() { }); 是什么意思?这两者有什么区别和作用?

6个回答

406
$(function() { ... });

是 jQuery 的简写形式

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

它的设计目的(除其他任务外)是确保在所有DOM元素准备好使用之后才调用您的函数。

但是,我认为这不是你遇到的问题-你能否澄清一下你所说的“某些函数无法调用并且我必须在其中调用那些函数”的意思?也许发布一些代码以显示预期行为未发生的情况?

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


2
如果$(function() { });已经在$(document).ready()中了,会怎样? - jwchang
1
好问题!我相信它应该可以正常工作,因为jQuery知道你在正确的位置,但这肯定是多余的;如果你在.ready()内部,你可以像平常一样调用你的函数。如果它不起作用,那么请发布一个示例,或者更好的方法是尝试制作一个jsfiddle.net的小样。 - Russ Clarke
4
请这样做:(function () { ... })();。你需要添加()来调用你的函数。 - Šime Vidas
@vidas (function() {})(); 定义一个函数并立即使用,对吧? - jwchang
5
有经验的开发人员有时会缩写 $() 来代替 $( document ).ready()。但如果你要编写其他人也能看懂的代码,最好使用完整形式。 - learn.jquery.com - thdoan
显示剩余3条评论

20
以下是一个 jQuery 函数调用:
$(...);

"jQuery function"是指$函数,而$(...)表示你在调用这个函数。

你提供的第一个参数是:

function() {}
参数是您指定的函数,而$函数将在DOM完成加载时调用提供的方法。

13

10

一些理论

$ 是一个函数的名称,就像你给其他任何函数命名一样。任何人都可以在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加载完成后调用我传递作为参数的这个函数?


6

我觉得你可能将Javascript和jQuery方法混淆了。普通或原生的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>,并使用jQuery方法()将CSS属性“color”设置为值“red”.css('color', 'red');


2

1
“finished loading the page” 不准确且具有误导性。 - Yahel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接