如何将此 Jquery 代码设置为正文加载

how to set this Jquery code into body onload

本文关键字：设置 正文 加载 代码 Jquery      更新时间：2023-09-26

大家好，我是jquery/JavaScript的新手。 我在W3Schools中找到了一些代码，我想在我的网站上使用它。 但是我希望每次加载页面时都会触发动画。 请帮我怎么做 

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });
    });
    </script>
    </head>
    <body>
    <p>Demonstrate fadeToggle() with different speed parameters.</p>
    <button>Click to fade in/out boxes</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    </body>
    </html>

我想做这样的事情

<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
    alert("Page is loaded");
}
</script>
</body>
</html>
这是

你想要的吗：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
}
</script>
</body>
</html>

试试这个

$(document).ready(function(){
     $("#div1").fadeToggle();
     $("#div2").fadeToggle("slow");
     $("#div3").fadeToggle(3000);
});

如果您要在页面加载后执行函数，请在HTML设计结束时放在下面JavaScript： 

<script type="text/javascript">
    window.onload = myFunction();
</script>

并在页面开头定义函数，就像您已经完成的那样！因此，最终代码如下所示：

<!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeToggle();
        $("#div2").fadeToggle("slow");
        $("#div3").fadeToggle(3000);
      });
    });
    </script>
    </head>
    <body>
    <p>Demonstrate fadeToggle() with different speed parameters.</p>
    <button>Click to fade in/out boxes</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
    window.onload = myfunction();
</script>
    </body>
    </html>
如果它

有效，请通过接受它来告诉我:)

我认为最好的方法是使用事件侦听器。

<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
相关文章：