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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
详解JavaScript语法对{}处理的坑爹之处
Jun 05 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 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程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
模拟select的代码
2011/10/19 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
python实现随机漫步算法
2018/08/27 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
京东国际站:JOYBUY
2017/11/23 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
机关作风建设工作总结
2014/10/23 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
公司备用金管理制度
2015/08/04 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL