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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jQuery图片滚动图片的效果(另类实现)
Jun 02 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
原生js实现弹出层效果
Jan 20 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
利用Vue2.x开发实现JSON树的方法
Jan 04 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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
用PHP4访问Oracle815
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
vue实例的选项总结
2020/06/09 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
Python 探针的实现原理
2016/04/23 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
安全生产计划书
2014/05/04 职场文书
5s标语大全
2014/06/23 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
《实心球》教学反思
2016/02/23 职场文书