这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
JQ 中的 $(document).ready() 大家应该用的非常多,基本每个 JS 脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数 $(window).load 相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序
JQ 中的 $(document).ready() 大家应该用的非常多,基本每个 JS 脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数 $(window).load 相对出现的次数就很少了,下面为大家介绍一下两者的区别与他们的执行顺序
一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载 html -> 加载 js 和 CSS -> 加载图片等其他信息。 那么我们在编写 JS 脚本时什么情况下使用 $(document).ready() 又在什么情况下使用 $(window).load 呢,我们先来了解一下两者的功能
一、$(document).ready()
从字面的意思上理解,就是文档准备好了。也就是浏览器已经加载并解析完整个 html 文档,dom 树已经建立起来了, 然后执行此函数
原生 JavaScript 中的写法如下:
- document.ready=function(){
- alert("ready");
- }
jQuery 中的写法如下:
- $(document).ready(function(){
- alert("ready");
- });
或
- $(function(){
- alert("ready");
- });
二、$(window).load
在网页中所有元素 (包括页面中图片, css 文件等所有关联文件) 完全加载到浏览器后才执行
原生 JavaScript 中的写法如下:
- window.onload = function(){
- alert("onload");
- };
jQuery 中的写法如下:
- $(window).load(function(){
- alert("onload");
- });
两者的区别在于:
1. 执行时间不同
$(document).ready() 是在页面完成 HTML 的加载并建立了 DOM 树之后就开始执行,但这并不代表页面的所
有数据已经全部加载完成,一些大的图片有会在建立 DOM 树之后很长一段时间才行加载完成,而
$(window).load() 就是整个页面已经加载完毕后才执行,包括图片等一些关联文件。
2. 可以被执行的次数不同
$(document).ready() 可以在 JavaScript 代码中出现多次,并且里面的函数或者代码都可以执行;而 $(window).load() 只能在 JavaScript 代码中出现一次,如果有多个 $(window).load(),那么只有最后一个 $(window).load() 里面的函数或者代码才会执行,之前的 $(window).load() 都将被覆盖;
3. 执行的效率不同
如要在 dom 的元素节点中添加 onclick 属性节点,这时用 $(document).ready() 就要比用 $(window).load() 的效率高;但是在某些时候还必须得用 $(window).load() 才行
总结一下就是:$(window).load() 在 $(document).ready 之后执行,且页面中所有内容全部加载完成后才会执行,两者的使用时机一目了然,大家可以自行决定。
来源: http://www.phperz.com/article/17/0526/327172.html