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之可拖动的iframe效果代码
Aug 01 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 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面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
处理单名多值表单的详解
2013/06/08 PHP
php实现的ping端口函数实例
2014/11/12 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue 巧用过渡效果(小结)
2018/09/22 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
Python类属性的延迟计算
2016/10/22 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
在python里从协程返回一个值的示例
2019/02/19 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
python多线程与多进程及其区别详解
2019/08/08 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
万户网络JAVA程序员岗位招聘笔试试卷
2013/01/08 面试题
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
正规的求职信范文分享
2013/12/11 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
创业计划书之宠物店
2019/09/19 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Python中json.dumps()函数的使用解析
2021/05/17 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android