jQuery的文档处理程序详解


Posted in Javascript onMay 10, 2016

本文实例讲述了jQuery的文档处理程序。分享给大家供大家参考,具体如下:

jQuery文档处理程序

所谓的文档处理程序,是指jQuery中提供的$(document).ready事件,此事件会在dom加载完毕后触发,而window.onlaod和body.onload都是在页面完全加载后触发。

jQuery文档处理程序介绍

在jQuery中想实现在DOM加载完毕后的处理逻辑,只需要使用$(document).ready()事件。此事件函数称为"jQuery文档处理程序"。

可以在页面的任何位置,甚至是外部的js文件中,编写如下列语句:

$(document).ready(function (){ alert("document.ready")});

则在页面的DOM加载完毕后,会立刻执行alert语句。如果页面上有大的图片、js文件等外部资源需要加载,jQuery的文档处理程序会在其之前执行,而window.onload和boyd.onload是在所有的资源文件加载完毕后执行的。

Ready()函数时jQuery"事件函数"中提供的一个jQuery对象函数,签名位ready(fn)。

fn是ready事件发生时执行的函数。

因为是jQuery对象函数,意味着可以在任何jQuery对象上调用:

$("body").ready(function (){ alert("body.ready")});

上面的语句等同于:

$(document).ready(function (){alert("body.ready")});

虽然ready()函数可以作用在任何jQuery对象上,但是使用时一定要注意对象是否具有ready事件。

也可以使用"$(fn)"这种简化的形式:

$(function (){….})
//等效于$(document).ready(function(){…});

同jQuery中所有的事件对象一样,$(document).ready事件,会按照出现的先后顺序执行。

比如,可以调用两次$(document).ready事件:

$(document).ready(function (){alert("document.ready-1")});
$(document). ready(function (){alert("document.ready-2")});

则在DOM加载完毕后,首先输出"document.ready-1",然后输出"document.ready-2"。如果使用传统的:

Window.onload=function(){…..};

上面的代码会将window.onload原有的事件处理掉,然后绑定新的事件。

jQuery文档处理程序的优势

如果脚本需要在页面加载时执行,那么大部分的脚本都可以放在$(document).ready()事件中。

在举例jQuery文档处理程序的优势之前,先看一个常见的JavaScript编程错误:dom未加载完成即改变dom模型。

在传统的javascript编程中。有时会在页面的头部或者底部直接插入script模块并编写代码,比如下面的例子:

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQueryStorm ? 常见错误编程方式举例</title>
  <scriptlanguage="javascript"type="text/javascript"src="../include/jquery-1.7.1.js"></script>
</head>
<body>
<!-- 页面内容部分 ?>
<div id="divMsg" style="border:solid 1px#000000;padding:20px;"></div>
<!-- 尾部模块 -->
<script language="javascript" type="text/javascript">
  //这条语句在某些情况下会导致错误
  Document.getElementById("divMsg").innerHTML="<divstyle=\"border:solid 2px #FF0000\">动态添加的图层</div>";
</script>
</boyd>
</html>

此例子在所有的浏览器都运行良好,但是存在隐患。因为在页面加载时,就在divMsg容器中添加了一个新的div对象,也就是添加了一个dom对象,当网速变慢或者页面很大需要一定的加载时间,会出现"中止操作"的错误。

这个错误甚至曾经在Google首页、淘宝等知名网站上都出现过,因为此错误很难在测试时候发现。

所以做web开发是要记住一条真理:永远不要再dom加载时修改dom结构。

如果需要在页面加载时修改dom结构,原始的做法是通过window.onload和body.onload事件实现,比如针对上面的错误例子,可以修改为:

<script type="text/javascript">
Window.onload=function()
{
  Document.getElementById("divMsg").innerHTML="<divstyle="\border:solid 2px #FF0000\">动态添加的图层</div>";
};
</script>

具体的实现方式还有很多,应用window.onload和body.onload是因为这两个事件都是在dom加载完成并且所有页面资源加载完成后才执行的,这是最简单的做法。或者根据"document.readyState"判断dom的状态,如果是"complete"则进行某些操作,jQuery的文档处理程序$(document).ready内部正是使用的此原理。

希望本文所述对大家jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript中sort()的用法实例分析
Jan 30 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
layui选项卡效果实现代码
May 19 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 #Javascript
jQuery对象与DOM对象转换方法详解
May 10 #Javascript
jQuery对象的链式操作用法分析
May 10 #Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 #Javascript
Bootstrap按钮下拉菜单组件详解
May 10 #Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 #Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 #Javascript
You might like
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
简单的JS多重继承示例
2008/03/13 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
Python列表切片用法示例
2017/04/19 Python
Python探索之修改Python搜索路径
2017/10/25 Python
Django实现简单分页功能的方法详解
2017/12/05 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python基于jieba库进行简单分词及词云功能实现方法
2018/06/16 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
入党转预备思想汇报
2014/01/07 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
证婚人致辞精选
2015/07/28 职场文书
初中政治教师教学反思
2016/02/23 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
react 路由Link配置详解
2021/11/11 Javascript