17

以下 jQuery 片段的最终结果是否相同?

片段1:

$(function() { alert('test!'); });

片段 2:

$(document).ready(function() { alert('test!'); });

换句话说,只是?的$(function(){})简写。$(document).ready(function() { });

我问的原因是因为我们在使用 jQuery 和 jQuery UI 构建的一个小应用程序中看到了一些奇怪的问题。有时,当通过单击按钮执行表单提交操作时,浏览器窗口会冻结。在我们在那里执行一些操作之前,我们仍然可以使用底层浏览器窗口(启动弹出窗口的窗口)。用户只能通过强制关闭浏览器(显然是 Internet Explorer)继续。我们怀疑这与 Acrobat PDF 插件有关,但我只是在这里检查所有角度,因为我发现这个问题似乎表现出类似的行为。

4

7 回答 7

11

以下所有三种语法都是等效的:

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

给 jQuery 命名空间起别名

当使用另一个 JavaScript 库时,我们可能希望调用 $.noConflict() 来避免命名空间问题。当调用此函数时,$ 快捷方式不再可用,迫使我们每次通常编写 $ 时都要编写 jQuery。但是,传递给 .ready() 方法的处理程序可以接受一个参数,该参数被传递给全局 jQuery 对象。这意味着我们可以在 .ready() 处理程序的上下文中重命名对象,而不会影响其他代码:

jQuery(document).ready(function($) {
  // Code using $ as usual goes here.
});
于 2011-04-22T09:49:26.930 回答
8

是的,它们是等价的。请参阅此链接以获取参考.ready()

于 2011-04-22T12:32:06.870 回答
5

$(function(){})并且$(document).ready(function() { })是相同的。

于 2011-04-22T09:51:43.933 回答
4

是的,这是相同的。但第一个通常用于 jquery 以便于使用。

$(function() { 
    alert('test!'); 
});
于 2011-04-22T09:57:11.733 回答
3

以下代码也有效

$(document).ready(function(){
    alert("success");
});

或者

$(function(){
    alert("succes");
});
于 2013-07-01T08:02:45.027 回答
1

是的:

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

…和:

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

…实际上是相同的,后者通常被称为前者的简写。

如果您想知道为什么它们会产生相同的结果,这与 jQuery 构造函数有关-jQuery()函数,别名为$()-<strong> 及其允许的输入。

构造函数记录在api.jquery.com/jquery/中,下面概述了它的两个相关选项。


jQuery( selector [, context ] )

接受包含 CSS 选择器的字符串,然后用于匹配一组元素。

返回一个 jQuery 对象。

上面的这个选项是您在编写时调用 jQuery 构造函数的方式:

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

document对象被选中并用于构造一个jQuery 对象。当 DOM 完全加载时,该 jQuery 对象会调用ready().


jQuery( callback )

绑定在 DOM 完成加载时要执行的函数。

返回一个 jQuery 对象。

上面的这个选项是您在编写时调用 jQuery 构造函数的方式:

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

回调函数(匿名函数)用于构造一个jQuery对象,当DOM完全加载时,它会被调用。

于 2014-10-22T20:33:12.433 回答
1

编写 jQuery Document Ready Snippet 的不同方法

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

http://webiwip.com/interview-questions-answers/jquery-interview-questions/10510

于 2017-03-11T19:48:02.473 回答