jQuery之$(document).ready()使用介绍


Posted in Javascript onApril 05, 2012

学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。
If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as theDOM is loaded and before the page contents are loaded.

$(document).ready(function() { 
// put all your jQuery goodness in here. 
});

有很多方法可以确保事件在页面上正常工作,$(document).ready()比其它方法要更有优势。首先,你不必在HTML上放置任何“ 行为性的”标记。另外,你可以将JavaScript/jQuery写入一个独立的js文件,这样既容易维护,又保证了js与页面内容的隔离。如果你在浏览网页时更加细心,你就会常常看见这种情况:当你将鼠标悬停在一个连接时,有时状态栏中会在显示“javascript:void()”这样的消息。这就是你把一个事件直接放在<a href>标签里所造成的。

在一些使用traditional JavaScript的页面,你会在<body>标签中看见“onload”属性。这会导致一个问题:它限定了在body上只能有一个函数事件。是的,因为它又往内容中添加的“行为性的”标签。如果你想解决这个问题,请参考Jeremy Keith的书:DOM Scripting,里面讲述了如何在一个单独的js文件里创建一个 “addLoadEvent” 函数,它允许多个函数可以在body里被加载。但是这种方法需要为本来很简单的问题编写相当数量的代码,另外,这种方法是在加载window时触发这些事件的,这不得不让我再一次想起 $(document).ready()的好处。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。所有你写在这个方法里面的都准备在最早的时刻加载或触发。也就是说,一旦DOM在浏览器中注册后,$(document).ready()里的代码就开始执行。这样用户在第一眼看见页面元素时,特效就可以运行了。

Javascript 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
JSON格式化输出
Nov 10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
js中eval详解
Mar 30 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
15种PHP Encoder的比较
2007/04/17 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP序列化操作方法分析
2016/09/28 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
python学习笔记之调用eval函数出现invalid syntax错误问题
2015/10/18 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
小学生自我评价范文
2014/01/25 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS