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 相关文章推荐
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
js生成随机数方法和实例
Jan 17 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 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
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js实现文字滚动效果
2016/03/03 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python字符串的常用操作方法小结
2016/05/21 Python
python的mysqldb安装步骤详解
2017/08/14 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python网页解析器使用实例详解
2020/05/30 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
战友聚会邀请函
2014/01/18 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
公司授权委托书范文
2014/08/02 职场文书
2014年手术室工作总结
2014/11/26 职场文书
通用员工手册范本
2015/05/14 职场文书
余世维讲座观后感
2015/06/11 职场文书
运动会致辞稿
2015/07/29 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL