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 判断Flash是否加载完成的代码
Apr 12 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Vue如何清空对象
Mar 03 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP实现合并discuz用户
2015/08/05 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
Python判断某个用户对某个文件的权限
2016/10/13 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
一份python入门应该看的学习资料
2018/04/11 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
浅谈python之新式类
2018/08/12 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
新闻专业应届生求职信
2013/10/31 职场文书
老人节主持词
2015/07/04 职场文书
《火烧云》教学反思
2016/02/23 职场文书
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
dubbo服务整合zipkin详解
2021/07/26 Java/Android