jquery中的$(document).ready()使用小结


Posted in Javascript onFebruary 14, 2014

window.onload = function(){ alert("welcome"); }
这样的写法作用是希望在页面加载完,自动执行定义js代码(function)。

$(document).ready(function(){.... })这个函数是用来取代页面中的window.onload;

document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。

Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作,jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。

比如:

<script type="text/javascript">
$(document).ready(function () {
alert("我的第一个jQuery代码!");
});
</script>

这段代码的意思是:当Dom Tree加载完成后,显示警告信息。document.ready()和传统的方法<body onload=”load()”> 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。

最后要注意两点:

确保在 <body> 元素的onload事件中没有注册函数,否则可能不会触发$(document).ready()事件。(
我尝试用下面的例子来演示这个情况,但是没有成功,所以我想这种情况只是可能发生。)

<html>
<head>
<title>My second jQuery</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
//下面是load的函数含有jquery注册函数$
function load(){
   $("p").append("<b>Hello</b>");
}
//下面是jQuery的代码
$(document).ready(function () {
$("p").append("我的第一个jQuery代码!");
$("p").append("<b>Hello</b>"); 
});
</script>
</head>
<body onload="load()">
<h2>jQuery 简单例子2</h2>
<p>I would like to say: </p> 
</body>
</html>

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。
Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
js实现简单模态框实例
Nov 16 Javascript
javascript 终止函数执行操作
Feb 14 #Javascript
中止javascript执行的方法
Feb 14 #Javascript
js replace替换所有匹配的字符串
Feb 13 #Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 #Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 #Javascript
jquery获取元素索引值index()示例
Feb 13 #Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 #Javascript
You might like
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP7 windows支持
2021/03/09 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
2018/05/04 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
对python函数签名的方法详解
2019/01/22 Python
django框架中间件原理与用法详解
2019/12/10 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Python hashlib模块的使用示例
2020/10/09 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
企业项目策划书
2014/01/11 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
三八妇女节主持词
2015/07/04 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
使用Django框架创建项目
2022/06/10 Python