什么$(function(){});做?

时间:2011-10-04 01:33:20

标签: javascript jquery

有时我会创建一个函数并稍后调用该函数。

示例:

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

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

$(function() { });

$(function() {});(function() { });的含义是什么,这些的区别/目的是什么?

6 个答案:

答案 0 :(得分:245)

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

只是jQuery的简写

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

它的目的是确保在页面的所有DOM元素都可以使用之后调用您的函数。

但是,我不认为这是你遇到的问题 - 你能否澄清你的意思'不知何故,某些功能是无法调用的,我必须在内部调用这些功能'? 也许发布一些代码来显示哪些内容没有按预期工作?

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

答案 1 :(得分:11)

以下是jQuery函数调用:

$(...);

哪个是“jQuery函数”。 $是一个函数,$(...)是您调用该函数。

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

function() {}

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

答案 2 :(得分:7)

这只是$(document).ready()的简写,如:$(document).ready(function() { YOUR_CODE_HERE });。有时你必须使用它,因为你的函数在DOM完成加载之前就已经运行了。

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

答案 3 :(得分: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加载后作为参数传递的函数吗?

答案 4 :(得分:2)

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

答案 5 :(得分:2)

我认为您可能会将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>上的所有$('li')并使用jQuery方法.CSS()将CSS属性“color”设置为值“red”.css('color', 'red');