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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
js实现日历
2020/11/07 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
2014年平安创建工作总结
2014/11/24 职场文书
质检员工作总结2015
2015/04/25 职场文书
Python函数式编程中itertools模块详解
2021/09/15 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript