Home / Questions / 1444
Accepted
Goyo
Asked: 2020-12-22 00:24:12 +0800 CST 2020-12-22 00:24:12 +0800 CST

jQuery的启动功能有什么区别？

  • 772

有什么区别？：

$(function(){

});

是

$(document).ready(function() { 

});

我知道他们等待组件加载，但想知道为什么它们的写法不同？

类似的英语 SO 问题：https ://stackoverflow.com/questions/2662778/what-is-the-difference-between-these-jquery-ready-functions

javascript

4 Answers

  1. Best Answer

    官方没有区别：

    此函数的行为与 相同$(document).ready()，因为它应该用于包装$()页面上的其他操作，这些操作依赖于已经准备好的 DOM。

    您可以在来源中看到它：

    rootjQuery = jQuery(document);

...

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

    但是，从技术上讲，根据具体情况可能会有一个不同之处：$(function()如果 jQuery 没有正确加载，它将不会运行，而$(document).ready它会

    更新：如评论中所述，$(document).ready如果未加载 jQuery，它也不会运行。要在不使用 jQuery 的情况下实现类似（但不相同）的效果，您可以使用window.onload.

    这个答案是英文原文的翻译：https ://stackoverflow.com/a/2662783/4574 （最后一句不是原文）

    • 9

  2. 看到问题是从2015年开始的。今天有很大的不同：

    $(document).ready(function() { 

});

    它已在 jQuery3 中被弃用，并且很可能在 jQuery4 中被弃用。

    因此，为了使您的代码保持最新，建议立即开始使用它：

    $(function(){

});

    在我们所有的代码中。

    jQuery API 中清楚地解释了这种变化：

    jQuery 提供了几种方法来附加将在 DOM 准备好时运行的函数。以下所有语法都是等效的：

    $( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

    从 jQuery 3.0 开始，只推荐第一种语法；其他语法仍然有效，但已被弃用。这是因为选择与 .ready() 方法的行为无关，该方法效率低下并且可能导致对该方法行为的错误假设。例如，第三种语法适用于不选择任何内容的“document”。第四种语法等待文档准备好，但暗示（错误地）它等待图像准备好。

    请参阅：.ready()在 jQuery API 中

    JQuery 提供了几种方法来附加将在 DOM 准备好时执行的函数。以下所有语法都是等效的：

    $( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

    从 jQuery 3.0 开始，只推荐第一种语法；其他语法仍然有效，但已弃用。这是因为选择与方法的行为无关 .ready()，这是低效的，并且可能导致对方法行为的错误假设。例如，第三种语法适用于不选择任何内容的“文档”。第四种语法期望文档准备好，但暗示（错误地）它期望图像准备好。

    总之： jQuery3 的推荐方法是：

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

    您还可以咨询以下问题：

    • 3

  3. 根据文档：

    jQuery( callback ):钩子一个函数，当 DOM 完成加载时执行。该行为类似于$().ready()并且应该用于封装依赖于正在加载的 DOM 的其他操作。

    尽管：

    .ready(handler)：指定当 DOM 完全加载时要执行的函数。

    如果它在 DOM 加载后执行，您的（通常是匿名的）函数将立即执行。

    结论：

    两种方法都是同义词。使用一个或另一个是你喜欢什么的问题。例如，我真的很喜欢第一个，因为正如他们所说，它是短暂的。

    推荐：

    建议您使用别名jQuery始终在您的插件或组件中获得所需的行为（无论您使用什么方法），示例：

    方法一：

    jQuery(function( $ ) {
    // Tú código usando aquí el alias «$».
});

    方法二：

    jQuery( document ).ready(function( $ ) {
  // Código usando el símbolo «$» (como comúnmente) aquí.
});

    来源

    • 2

  4. 这也是等价的：

        $(document).on('ready',function() { 

    });

    个人建议默认使用方法on，如果是方法ready，我建议不要使用，而是在知道资源（元素/变量，app.js）的情况下保持脚本/函数的执行顺序已经存在于当前上下文中，和/或在回调中执行那些相同的脚本/函数。

    • 0