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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
jQuery 实现评论等级好评差评特效
May 06 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
详解使用vue-admin-template的优化历程
May 20 Javascript
vue-cropper插件实现图片截取上传组件封装
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
php实现的支持断点续传的文件下载类
2014/09/23 PHP
PHP静态文件生成类实例
2014/11/29 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
javascript multibox 全选
2009/03/22 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
机器学习10大经典算法详解
2017/12/07 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
如何获取Python简单for循环索引
2019/11/21 Python
django框架两个使用模板实例
2019/12/11 Python
如何用Lucene索引数据库
2016/02/23 面试题
小学教师读书活动总结
2014/07/08 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
英文感谢信格式
2015/01/21 职场文书
骨干教师个人总结
2015/02/11 职场文书
期末个人总结范文
2015/02/13 职场文书
求职简历自我评价范文
2015/03/10 职场文书
活着观后感
2015/06/03 职场文书
休学证明范本
2015/06/19 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书