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 相关文章推荐
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 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中对用户身份认证实现两种方法
2011/06/04 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
php的4种常见运行方式
2015/03/20 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
jquery仿ps颜色拾取功能
2017/03/08 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
Python实现简单多线程任务队列
2016/02/27 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python3实现逐字输出的方法
2019/01/23 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
深入学习python多线程与GIL
2019/08/26 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
大学生简单自荐信
2013/11/10 职场文书
简单租房协议书范本
2014/08/20 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书