下载LOFTER客户端
注册登录 
加关注

2012年7月从一个编程新手的点点滴滴

日志

 
 
 

$(function(){})和$(document).ready(function(){})  

2013-05-11 11:28:23|  分类: JS与JQ 订阅

下载LOFTER客户端
 
 
document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件
一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)
二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
 
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:

 

$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;

 

$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
 
 
以上还是本人新手时写的。。。感觉大家阅读,5000+的阅读量鄙人在此就加点内容吧,不让广大技术朋友白支持!!
2014-8-18 -----鄙人现在已经不算新手了,在此给大家再深入说点内容吧
 
1.window.onload方法
 
⑴执行时机:
在网页中所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行,即JavaScript 此时可以访问网页中的所有元素。
window.onload=function(){  $(window).load(function(){
//编写代码 等价于  //编写代码
}  });
 
⑵多次使用:
JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数。

function one(){

alert("one");

}

function two(){

alert("two");

}

window.onload=one;

window.onload=two;

//运行代码后只有 two

2.$(document).ready()方法
 
⑴执行时机:在DOM完全就绪时就可以被调用。(这并不意味着这些元素关联的文件都已经下载完毕)
举个例子:$(document).ready()方法明知要DOM就绪就可以操作了,不需要等待所有图片下载完毕。
 
⑵多次使用:

function one(){

alert("one");

}

function two(){

alert("two");

}

$(document).ready(function(){

one();

});

$(document).ready(function(){

two();

});

//运行代码后

//先是:one

//先是:two

 
 
 
阅读(3)
转载

 

javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
javascript  jquery document.ready window.onload
 
 
 

评论

点击登录|昵称:
 
javascript  jquery document.ready window.onload
2014-08-19 11:32
Zjmainstay
“域名解析-加载html-加载js和css-加载图片等其他信息” 这个说法有待考究,CSS加载部分。
回复
javascript  jquery document.ready window.onload
2014-07-16 11:44
good!
回复
javascript  jquery document.ready window.onload
2014-08-18 21:58
 Holyson 回复 西风兽
呵呵,这里都快被我遗忘了。。。。
回复
 
 
 
 
 
博客风格 - 手机博客 - 下载LOFTER APP -订阅此博客

网易公司版权所有 ©1997-2015

 
 
 
加入网易博客注册

相关文章:

  • 2022-02-14
  • 2022-01-29
  • 2022-12-23
  • 2021-12-13
  • 2022-12-23
  • 2021-11-30
猜你喜欢
  • 2022-12-23
  • 2021-11-24
  • 2022-01-10
  • 2021-11-08
  • 2021-12-09
  • 2021-07-10
相关资源
相似解决方案