Javascript 如何将此Jquery代码设置为body onload_Javascript_Jquery_Html

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

javascript jquery html

Javascript 如何将此Jquery代码设置为body onload,javascript,jquery,html,Javascript,Jquery,Html,大家好，我是jquery/javascript新手。我在W3学校找到了一些代码，我想在我的网站上使用它。但我希望每次加载页面时都能触发动画。请帮我怎么做 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <scri

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

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

你是说你想在加载时触发fadeToggle？是的，我想在每次加载/刷新页面时启动/触发fadeToggle，因为根据示例，它仅在我单击按钮时才会动画。我明白了。我已经回答了。ready执行与onload相同的操作。请参见上面的@pawanLakhara示例，而不是Hello World！