这些jQuery ready函数之间有什么区别？

76

之间有什么区别

$(function(){

});

和

$(document).ready(function() { 

});

jquery

— 斯塔克斯
source

1

没有。或至少在手册中是这样说的。

— falstro'4

6

您可以将第一个读为“调用名为$的函数并将其交给已定义的函数执行”。$在那里指的是jQuery，它将在准备就绪时执行您提供的功能。第二种读法是“从文档中创建一个jQuery对象，并在其上附加一个事件侦听器，该事件侦听器将在您由ready事件触发时执行赋予它的功能”。

— kontur 2012年

请参阅下面的答案：IE9对待它们的方式有所不同。

— Will Lanni 2014年

什么是jQuery（document）vs。$（document）的

— JasonMArcher 2014年

58

没事

该函数的行为就像$（document）.ready（）一样，因为它应该用于包装其他$（）

您可以在源代码中看到：

rootjQuery = jQuery(document);

...

} else if ( jQuery.isFunction( selector ) ) {
    return rootjQuery.ready( selector );
}

— ak
source

39

有所不同，$（function（）{}）的可读性较差（至少对我的大脑而言）。

— Rosdi Kasim 2010年

3

同意罗斯迪（Rosdi）-一个人在表达自己的实际想法时稍微表达些，另一个则简洁得多。我更喜欢富有表现力的版本，认为它的性能要差

— Jon z

同样与观察结果一致的是，速记版本缺乏表达能力导致了这一问题。

— natchiketa

1

从jQuery 3.0开始，仅$(function() {})推荐语法；其他语法仍然有效，但已弃用。见api.jquery.com/ready

— 黄铜猴子

16

} else if (jQuery.isFunction(selector)) {
    return rootjQuery.ready(selector);
}

从源头

调用$(document).ready(selector)可以保存一些if语句。

尽管jQuery确实在$(document)内部进行缓存，但这可能会$(f)更快。

基准化

— 雷诺斯
source

3

如果我们谈论的是微观优化的水平，你可能要考虑转移明确的版本需要额外的11个字节...

— lonesomeday

@lonesomeday好吧，它只有9个字节。$(d).ready(f)vs$(f)

— 雷诺斯

1

是的，但是请注意，我的上述评论有点幽默！

— lonesomeday'3

@Raynos但随后你需要把var d = document;顶部或将其放在(function(d) {和})(document);。：P

— nyuszika7h 2011年

@ Nyuszika7H任何缩小的代码已经具有d = document, w = window

— Raynos 2011年

10

两者都是等效的，第一个是速记形式。

— 碎玻璃
source

你确定吗？第一个是否等待DOM加载？

— 克劳斯·比斯科夫·佩德森

太酷了，只是想确定一下。+1

— 克劳斯·拜斯科夫·佩德森

7

$（function（）{}）是准备dom的捷径

作为参数传递给jQuery构造函数的函数绑定到文档就绪事件。

— 阿里·哈比布扎德（Ali Habibzadeh）
source

7

我建议你读这篇。如你看到的

以下三种语法均等效：

$(document).ready(handler)

$().ready(handler) (this is not recommended)

$(handler)

因此，取决于您和您的喜好。

— 福利韦拉
source

3

$().ready()在jQuery 1.4及更高版本中将无法使用。$()在这种情况下，返回空选择而不是文档。

— lonesomeday'3

3

@lonesomeday这就是为什么在它前面有一个（不建议这样做）的原因。

— foliveira 2011年

7

两者完全相同：使用您喜欢的任何形式。

就是说，我个人总是使用扩展形式$(document).ready(function(){});，原因很简单，那就是代码在做什么。大概的想法是“自我记录代码”。稍后使用该代码的任何人都将立即看到该代码将在document的ready事件上运行。使用简写形式，您必须依靠代码的读者来理解其含义。

— 寂寞的一天
source

5

它们实际上是相同的。没有不同。

这是本机的方式。

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

这是以前的简写。

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

jQuery源代码

— nyuszika7h
source

这个线程有一个注释-stackoverflow.com/questions/7975093/…-使用速记TypeError: 'undefined' is not a function有时会导致错误。

— crmpicco

@crmpicco除了该线程提及外$(document)，因此您可能指的是的$简写jQuery。

— nyuszika7h 2014年

5

IE9无法运行$（function（）{}）中的函数；以与$（document）.ready（function（）{}）相同的方式或时间进行；

这个问题特别是从查询字符串中读取信息，然后在屏幕上处理和显示该信息，或使用它来处理表单，这对我们特别重要。IE9将使用$（function（）缓存信息后处理该信息，并且用户刷新了页面。但是在第一次运行时，没有任何效果。但是，一旦我们从$（function（）{}）;切换到$（ document）.ready（），此问题已解决。

我非常期待有一天不必测试IE9及更低版本。

— 威尔·兰尼
source

1

未将所有浏览器的document.ready连接到同一“本机”事件...您可以选择以下之一：[document.DOMContentLoaded]或[window.load]或[document.onreadystatechange]。我想这就是您在IE中执行不同操作的原因，我想（未经验证）认为$（document）.ready（...）与$（function（）{}没有连接到同一本地DOM事件。）

— foxontherock

2

我用，$(function() {});因为它更短。据我所知，这两种方法之间没有区别。

— 理查德·道尔顿
source