$(document).ready详解

$(document).ready详解他的作用或者意义就是:在DOM加载完成后,并且页面已经完全呈现时,会发生ready事件,就可以可以对DOM进行操作。

大家好,欢迎来到IT知识分享网。

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方法也找不到。

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

  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;

  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;

  4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

  5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面 的代码;

  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

  7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;

  8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个<div> (style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;

  9. 终于等到了</html>的到来,浏览器泪流满面……

  10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;

  11. 浏览器召集了在座的各位<div><span><ul><li>们,“大伙儿收拾收拾 行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

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

$(document).ready详解

没有ready不弹框

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

$(document).ready详解

有ready弹框

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/54674.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信