$(document).ready()、$(function(){})和windom.onload = function(){};

最新推荐文章于 2022-12-21 17:51:19 发布

huang_yx

最新推荐文章于 2022-12-21 17:51:19 发布

阅读量1.1k

点赞数 1

分类专栏：自学随笔记文章标签：前端随笔

本文链接：https://blog.csdn.net/huang_yx/article/details/79671069

版权

自学随笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

$(document).ready()与windom.onload = function(){}的方法说明和加载时机

$(document).ready()的三种简写：$(document).ready(function(){})；$().ready(function(){})；$(function(){})

区别：

$(document).ready()方法的作用：当DOM加载完毕的时候，执行这个指定的方法。表示文档结构已经加载完成（不包含图片等非文字媒体文件）。因为只有document状态ready之后，对元素的操作才是安全的。$(document).ready()仅在DOM准备好的时候执行一次，但是可以多次绑定ready事件。

windom.onload事件是后绑定事件，会等到页面渲染完成执行，即等到所有资源（如：图片）都完全加载完成的时候才会执行。

注意：ready()方法多次调用，传入的方法会串联执行（追加），但是在JS中，windom.onload是赋值一个方法，即后面的会覆盖前面的。

举例：

对元素的操作和事件的绑定需要等待一个合适的时机，如下：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-1</title>
<script type="text/javascript">
    document.getElementById("panel").onclick = function () {
    alert("元素已经加载完毕 !");
    }
    /*执行错误*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

如果这样，就还没有等待元素加载就给div#panel绑定一个事件，浏览器Console中就会报错：TypeError:document.getElementById(...)is null;

更改一下时机，就能成功绑定事件

把时间绑定到body里，元素之后

由于绑定事件在元素之后，所有可以成功获取绑定的点击事件：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
    document.getElementById("panel").onclick = function () {
    alert("元素已经加载完毕 !");
    }
    /*正确执行*/
</script>
</body>
</html>

把事件绑定放在windom.onload和$(document).ready()中进行绑定：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-2</title>
</head>
<body>
<div id="panel">click me.</div>
<script type="text/javascript">
    document.getElementById("panel").onclick = function () {
    alert("元素已经加载完毕 !");
    }
    /*正确执行*/
</script>
</body>
</html>


jQuery的ready()方法传入绑定事件的方法:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>1-3</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
    $(document).ready(function(){
    document.getElementById("panel").onclick = function () {
    alert("元素已经加载完毕 !");
    }
    /*正确执行*/
});
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

huang_yx

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
$(document).ready()、$(function(){})和windom.onload = function(){};

$(document).ready()与windom.onload = function(){}的方法说明和加载时机$(document).ready()的三种简写：$(document).ready(function(){})；$().ready(function(){})；$(function(){})区别：$(document).ready()方法的作用：当DOM加载完毕的时候，执行这个指定...
复制链接

扫一扫