logo标签列表

jQuery $( function() {} ) 和 $(document).ready 是一样的吗？

javascriptjquery
27

为使一个表单字段拥有可用的日期选择器，我需要将这段脚本放置在我的<head>元素中

$( function() {
  $( "#date_datepicker" ).datepicker( { dateFormat: "yy-mm-dd" } );
});

移除 $( function() { 会导致日期选择器不起作用。

那么这是否意味着 $( function() { 和 $(document).ready 是相同的？

我正在尝试优化我的javascript代码，因此了解这一点可能会有所帮助。

可能是 jQuery document ready function 的重复问题。 - 2540625
7个回答
43
请见以下从 http://api.jquery.com/ready/ 中的节选内容:

以下三种语法是等价的：

  • $(document).ready(handler)
  • $().ready(handler) (不推荐使用)
  • $(handler)
4
谢谢，我在谷歌上搜索，但我认为一些特殊字符，比如$符号，会使得难以得到正确的结果。 - MegaNairda
1
出于好奇，为什么第二个不被推荐？ - Nigel Fds
14

.ready()方法通常与匿名函数一起使用：

$(document).ready(function() {
  // Handler for .ready() called.
});

这等同于调用：

$(function() {
 // Handler for .ready() called.
});

可以在这里阅读到

5
是的，这是同一件事情的简写版本。 $ 函数在传递函数作为参数时调用 $(document).ready 函数。
如果您正在尝试优化速度-两者的性能几乎相当，但是执行多次时，较长的 $(document).ready（handler） 将稍微更快。
如果您要优化文件大小-请使用缩小器。
在我看来，最好的做法是从可读性和简洁性方面进行“优化”。这会使代码更容易理解和维护。有一些工具可以将未经优化的版本压缩和优化（查看 Google 的闭包编译器）。
我的代码包含我在页面顶部提到的两个东西。不过幸好，在页面顶部同时使用它们时我没有遇到麻烦。在我完成手动优化代码，减少冗余代码和其他类似调用可合并为一个函数调用后，我会尝试像你说的那样使用缩小器。 - MegaNairda
我希望在使用_shorthand_时不会遇到兼容性问题，就像使用ajax快捷方式$.post时发生在Internet Explorer上的问题一样。 - MegaNairda
3

是的，$( function() {和 $(document).ready是一样的。

$( function() {是一种简写语法，但$(document).ready可以使代码更易读。

1
и°ўи°ўпјҢжҲ‘жӣҙе–ңж¬ўдҪҝз”Ё$(document).readyиҖҢдёҚжҳҜ$(function(){}гҖӮ - MegaNairda
3
这里有一种相对安全的在ready上运行代码的方法。
jQuery(function($, undefined){
  // code to run onready
});

虽然我个人更喜欢这样做：

(function($){ // create scope and pass specific aliased variables

    $(function($, undefined){ // attach callback to run onready
       // code to run onready
    });

})(jQuery);

通过这种方式，您可以创建自己的功能包，而不必担心破坏其他人的代码或由于松散的变量定义而破坏自己的代码。您还可以使用任何名称调用传递的变量，并且可以运行无准备的代码，例如。

(function($){ // create scope and pass specific aliased variables


    $(document).on('click', 'a[href]', function(){
       // code to run when a link is clicked
    });
    $(window).on('load',function(){
       // code to run onload
    });
    $(function($, undefined){ // attach callback to run onready
       // code to run onready
    });


})(jQuery);

请注意，这些是相同的。
$(document).bind('ready', function(){});
$(document).on('ready', function(){});
$(document).ready(function(){});
$(function(){});

而且该文档没有加载事件

$(document).on('load', function(){}); // will not work
1
0

你正在使用jQuerymobile吗？如果是的话，不要使用document ready，而应该使用

$('#pageId').live('pageinit',function(){});
不是的，只是普通的jQuery。 - MegaNairda
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接