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 加载并解析XML字符串的代码
Dec 13 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
当json键为数字时的取值方法解析
Nov 15 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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
德生H-501的评价与改造
2021/03/02 无线电
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
php一些公用函数的集合
2008/03/27 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
django模板结构优化的方法
2019/02/28 Python
python同步windows和linux文件
2019/08/29 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
医学生实习自荐信
2013/10/01 职场文书
策划助理岗位职责
2013/11/18 职场文书
行政部主管岗位职责
2013/12/28 职场文书
工作违纪检讨书
2014/02/17 职场文书
2014年保卫工作总结
2014/12/05 职场文书