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 相关文章推荐
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
ThinkPHP路由详解
2015/07/27 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
设定php简写功能的方法
2019/11/28 PHP
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
解决python删除文件的权限错误问题
2018/04/24 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
模具专业推荐信
2013/10/30 职场文书
承办会议欢迎词
2014/01/17 职场文书
服务员岗位职责
2014/01/29 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
请假条应该怎么写?
2019/06/24 职场文书
python爬虫selenium模块详解
2021/03/30 Python
字典算法实现及操作 --python(实用)
2021/03/31 Python
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL