Question

嗨，大家好我是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>

Answer 1

这就是你想要的：

<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>

Answer 2

试试这个

$(document).ready(function(){

     $("#div1").fadeToggle();
     $("#div2").fadeToggle("slow");
     $("#div3").fadeToggle(3000);

});

Answer 3

如果你正在接近在页面加载后执行该功能，那么在你的JavaScript设计结束时放在HTML下面：

<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>

接受它，如果有效，请告诉我:)。

Answer 4

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

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

如何将此Jquery代码设置为body onload

4 个答案: