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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 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代码
2007/03/08 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
jquery创建div 实现代码
2009/04/27 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js 窗口抖动示例
2013/09/04 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python实现句子翻译功能
2017/11/14 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python实现按关键字筛选日志文件
2019/12/24 Python
Python sqlalchemy时间戳及密码管理实现代码详解
2020/08/01 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
资源环境与城市管理专业推荐信
2013/11/30 职场文书
致百米运动员广播稿
2014/01/29 职场文书
租赁意向书范本
2014/04/01 职场文书
暑假学习心得体会
2014/09/02 职场文书
资料员岗位职责
2015/02/10 职场文书
2015年技术员工作总结
2015/04/10 职场文书
机械生产实习心得体会
2016/01/22 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python