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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
JavaScript的21条基本知识点
Mar 04 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 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文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
Javascript模板技术
2007/04/27 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python使用webbrowser浏览指定url的方法
2015/04/04 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python验证码识别教程之灰度处理、二值化、降噪与tesserocr识别
2018/06/04 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
村优秀党员事迹材料
2014/01/15 职场文书
信息技术教学反思
2014/02/12 职场文书
物流专业自荐信
2014/05/23 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
小学生暑假生活总结
2015/07/13 职场文书
运动会致辞稿
2015/07/29 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python