jquery的ready事件的实现机制浅析】的更多相关文章

页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码}); 他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用.但有时候也不尽然.需要进一步查看其内部机制. 那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的? 答案就在jquery代…
为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, 解析HTML结构 2,加载外部脚本和样式表文件 3,解析并执行脚本代码 4,构造HTML DOM模型 5,加载图片等外部文件 6,页面加载完毕 执行时机 load 事件必须等到页面中所有内容全部加载完毕之后,才被执行,如果一个页面中包含了大数据的多媒体文件,则就会出现页面文档已经呈现出来,二由于网…
选择器只能选择已存在元素,其他元素需要作为参数传递给on…
出处:http://blog.csdn.net/yuanmei1986/article/details/50781453…
摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下. 1.…
ready事件是当DOM文档树加载完成后执行一个函数(不包含图片,css等),因此它的触发要早于load事件.用法: $(document).ready(fun) ;fun是一个函数,这样当DOM树加载完毕后就会执行该匿名函数了 ready有一个简写,可以直接传入$(fun)即可,这是因为在jQuey内部也定义了一个$(document)的jQuery对象,和我们在上面的写法是一样的 ready事件和window的onload区别: ready事件 ;等dom树载完毕后就可以执行 onload事…
JavaScript代码放在哪里? 浏览器在渲染HTML页面时,是从头到尾,一行一行地检查执行的.如果JavaScript代码在前面,HTML元素在后面,遇到JavaScript选择一个还未渲染的HTML元素将会选择失败.因此,通常的做法是将脚本放在页面最后(紧跟在</body>标签之前). ready()事件 如果将JavaScript代码分和HTML离出来,脚本又在<head></head>之间引入,会不会出问题? 要避免上述问题,可以使用ready()事件. jQ…
一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理…
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中…
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>1-1</title> <script type="text/jav…