简体   繁体   English

在jQuery中调用页面上的函数加载

[英]call functions onload of page in jquery

I want to make the make the slideDown function onload of my page. 我想在我的页面上加载make slideDown函数。 When i removed the line: $("#flip").click(function() in the following code in order to make the function execute onload of page not in click, it didn't work. How can i call a function onload of page or when some condition happen? 当我删除以下行时: $("#flip").click(function()在下面的代码中,以使该函数在未单击时执行页面onload加载,这是行不通的。我如何调用函数onload页数或某些情况发生时?

 <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>

<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

</body>
</html>

Try something like this: 尝试这样的事情:

$(document).ready(function(){
    $("#panel").slideDown("slow");
});

Simply change this 只需更改此

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});

to

$(document).ready(function(){
    $("#panel").slideDown("slow");
});

The problem with your code is that you're invoking slideDown() only when someone clicks on your flip element but you wish to do it on page load, so you can use jQuery's document.ready handler itself do that 代码的问题是仅当有人单击您的flip元素但您希望在页面加载时才调用slideDown() ,因此您可以使用jQuery的document.ready处理程序本身来执行此操作

$(document).ready(function(){
     $("#panel").slideDown("slow");
});

This will slideDown the panel when DOMContentLoaded event is fired which happens when all your scripts and markup are downloaded but your css and images are still downloading. 当触发DOMContentLoaded事件时,这将在面板上向下滑动,该事件在下载所有脚本和标记但仍在下载CSS和图像时发生。

If you really want to slideDown the panel, only when the page is completely loaded ie, markup,all scripts, images and css files are downloaded and processed, then you can listen for load event of the window like this 如果您真的想在面板上向下滑动,则只有在页面完全加载后(即标记,所有脚本,图像和css文件都已下载并处理),然后您才能监听窗口的load事件

$(window).load(function(){
   $("#panel").slideDown("slow");
});

You need to call on the document load as well. 您还需要调用文档加载。

$(document).ready(function(){
    // this will run on document load
    $("#panel").slideDown("slow");

    // this will run every time you click on the div and you can add your custom logic to slide it up or down here
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});

Here is demon on js fiddle 这是js小提琴上的恶魔

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM