Question

如果您查看下面的jquery代码，您将看到着名的 $（document）.ready（function（）{，它将启动脚本。我在几乎所有的jquery代码示例中看到了这一点网和我想知道，如果我在一个文件中运行5个不同的代码函数，我需要在所有的开头使用 $（document）.ready（function（）{它们？

如果不是，我将如何将下面这段代码组合成一个页面3次，假装它是3个不同的代码？

<script type="text/javascript" >
 $(document).ready(function(){
  setTimeout(function(){
  $(".flash").fadeOut("slow", function () {
  $(".flash").remove();
      }); }, 2000);
 });
</script>

Answer 1

你应该尽量不要在doc ready块中加入太多内容。是的，你可以有它们的倍数，但是我坚持一个，如果有的话。您也可以将脚本放在关闭正文标记之前，而无需准备好文档。

我建议将代码分解为单独的函数。这样，您可以在不同阶段在整个页面中重复使用它们。然后只需使用doc ready块来触发对该页面init函数的调用。

您还可以使用$(function(){});作为$(document).ready(function(){});

的缩略图

<script type="text/javascript" >
 $(function(){
    init();
 });

 function init(){
   someFunction();
   //other init stuff
 }

 function someFunction(){
  setTimeout(function(){
     $(".flash").fadeOut("slow", function () {
     $(".flash").remove();
   }); }, 2000);

 }
</script>

Answer 2

我认为原来的海报在问他是否必须这样做：

<script>
 $(document).ready(function(){
        func1();
});
</script>
<script>
 $(document).ready(function(){
        func2();
});
</script>

或者他是否可以这样做：

<script>
 $(document).ready(function(){
      func1();
      func2();
});
</script>

在后面的示例中，有一个脚本和一个文档就绪语句。更清洁。我相信答案是肯定的，你可以在没有任何问题的情况下做到。

Answer 3

问题是你不明白准备好的事件是什么以及为什么需要它。

想象一下，一个页面还没有完全加载，你试图用一些javascript改变它的内容，因为你试图操作的那个HTML元素的代码甚至还没有加载，事情就变坏了。

ready事件解决了这个问题。一旦所有anonymous function准备好被遍历和操作，您绑定到就绪事件的任何函数（通常是单个elements in the document）都会被执行。拥有任何内联javascript被认为是不好的做法。如果你想在你的页面上使用一个事件（点击，悬停等），你应该在$（document）.ready（）函数中调用它。

由于页面只加载一次，所以绑定到ready事件的任何函数都只会被调用一次。所以将多个函数绑定到ready事件没有多大意义。您可以在绑定到它的那个函数中执行所有操作。但是它不会造成任何伤害（只要你理解你在做什么），因为一旦你准备好DOM就会调用绑定到ready事件的每个函数。

我不明白你试图通过运行同一段代码五次来实现...所以我无法帮助你。

我希望这个解释可以帮助您解决实际问题。

Answer 4

不，你不需要，只需将它放在一个单独的，然后从那里触发所有功能;

<script type="text/javascript" >
 $(document).ready(function(){
        func1();
        func2();
        ...
});
</script>

Answer 5

首先，您可以将其缩短为：

<script type="text/javascript" >
    jQuery(function() {
        ...
    });
</script>

其次，如果您希望在页面加载完成后运行脚本，那么是的，您需要将它们放在jQuery / document.ready()函数中。您可以将它们全部放在同一个jQuery(function () { })块中，它们将按顺序执行，您不必将它们分开。

扩展function() {}块的工作方式：

jQuery(/* do something */);

表示“在页面加载时，执行某些操作”。 “做某事”是一种功能。你可以像这样直接传递一个函数：

function myFunction() {
    ...
}

jQuery(myFunction);

您定义了一个函数“myFunction”并告诉jQuery在页面加载时执行它。请注意，您只需将函数本身传递给jQuery，而不使用()。如果您改为编写jQuery(myFunction());，那将立即执行myFunction()，而myFunction()返回的任何内容都将放在jQuery()中，并且会在页面加载时执行。它与PHP之类的语言略有不同，因为在PHP中，所需的行为是立即执行所有操作，而Javascript则不一定如此。在PHP中你无法通过Javascript传递函数本身。 Javascript中的函数更像是变量。

你通常做的是“动态编写一个函数”，其中包含你想要在以后执行的一些代码块：

jQuery(function () {
    foo();
    bar();
});

在这种情况下，你也传递了一个函数，只是你动态编写它并且函数没有名字。 jQuery将保留此函数直到页面加载，此时它将执行它。在这个功能中你可以做任意多的事情。

如何组合多个jquery函数

5 个答案: