Question

如果我在启动时有很多功能，那么它们都必须在一个单一的下面：

$(document).ready(function() {

或者我可以有多个这样的陈述吗？

Answer 1

你可以有多个，但并不总是最好的事情。尽量不要过度使用它们，因为它会严重影响可读性。除此之外，它是完全合法的。见下文：

http://www.learningjquery.com/2006/09/multiple-document-ready

试试这个：

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

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

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

你会发现它等同于此，请注意执行顺序：

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

还值得注意的是，在一个$(document).ready块中定义的函数无法从另一个$(document).ready块调用，我刚刚运行了此测试：

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
});

输出是：

hello1
something
hello2

Answer 2

您可以使用多个。但是你也可以在一个document.ready中使用多个函数：

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Answer 3

是的，你可以轻松拥有多个街区。请注意它们之间的依赖关系，因为评估顺序可能不是您所期望的。

Answer 4

是可以有多个$（document）.ready（）调用。但是，我认为你不知道他们将以何种方式执行。 (source)

Answer 5

是的，但是你可以更好地使用div #mydiv并同时使用

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

//and

$("#mydiv").ready(function(){});

Answer 6

是的，这完全没问题。但是没有理由避免这样做。例如，当我的javascript文件是动态生成的时候，我用它来单独声明全局网站规则而不是单独的页面，但是如果你只是一遍又一遍地这样做就会让它难以阅读。

此外，您无法从另一个方法访问某些方法 jQuery(function(){});致电所以这是你不想那样做的另一个原因。

使用旧版window.onload，但每次指定函数时都会替换旧版本。

Answer 7

是的，你可以。

如果您有其他模块在同一页面上使用它，则多个文档就绪部分特别有用。使用旧的window.onload=func声明，每次指定要调用的函数时，它都会替换旧的。

现在指定的所有函数都排队/堆叠（有人可以确认吗？），无论指定哪个文档就绪部分。

Answer 8

我认为更好的方法是将切换到命名函数(Check this overflow for more on that subject)。这样你就可以从一个事件中调用它们。

像这样：

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

这样你就可以在一个就绪函数中加载它们。

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

}）;

这会将以下内容输出到您的console.log：

first
second
third

这样您就可以将这些功能重复用于其他事件。

jQuery(window).on('resize',function(){
    secondFunction();
});

Check this fiddle for working version

Answer 9

这是合法的，但有时会导致不良行为。作为示例，我使用了MagicSuggest库并在我的项目页面中添加了两个MagicSuggest输入，并为每个输入初始化使用了单独的文档就绪函数。第一个输入初始化工作，但不是第二个，也没有给出任何错误，第二个输入没有显示。因此，我总是建议使用一个文档就绪功能。

Answer 10

您甚至可以在包含的html文件中嵌入文档就绪函数。这是一个使用jquery的例子：

文件：test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

文件：test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

控制台输出：

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

浏览器显示：

<强> test_embed.html

Answer 11

您也可以通过以下方式执行此操作：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

你有多个$（document）.ready（function（）{...}）;板块？

11 个答案: