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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
常用的javascript设计模式
Jan 11 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 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
How do I change MySQL timezone?
2008/03/26 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue实现购物车案例
2020/05/30 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python中的测试框架
2020/11/13 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
大学生村官承诺书
2014/03/28 职场文书
司法建议书范文
2014/05/13 职场文书
初中教师个人工作总结
2015/02/10 职场文书
居住证明范文
2015/06/17 职场文书
大学生受助感言
2015/08/01 职场文书