网站首页 > 教程文章正文

$(document).ready详解

jxf315 2024-12-01 07:26:28 教程文章 99 ℃

document.ready方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后，并且页面（包括图像）已经完全呈现时，会发生 ready 事件，就可以可以对DOM进行操作。

$(document).ready(function(){

//do something

})

如果引入jquery，$(function)，$().ready(function)和$(document).ready相同。由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。

我们用JavaScript对网页进行的所有操作都是通过DOM进行的。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话，就连妇孺皆知的document.write方法也找不到。

再来大致了解一下浏览器都是怎样加载解析页面的：

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了</html>的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

大方向上，浏览器按照代码在文档中的顺序（从上到下）解析执行，所以，这种代码

没有ready不弹框

点击“点击”是不会弹框的，因为dom树没创建完成，已创建的dom树中没有button节点，js方法当然不会有效果。但是用了$(document).ready(function()），就可以弹出框了，因为这个方法的执行前提就是dom树创建完成。

有ready弹框

上一篇： Zabbix Agent安装部署
下一篇：一文搞懂得物前端监控

网站首页 > 教程文章 正文

$(document).ready详解

猜你喜欢

网站首页 > 教程文章正文