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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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新手上路(七)
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
降低python版本的操作方法
2020/09/11 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Python 实现集合Set的示例
2020/12/21 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
电大毕业自我鉴定
2014/02/03 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
毕业生求职自荐书范文
2014/03/27 职场文书
小学元宵节活动总结
2015/02/06 职场文书
总结会主持词
2015/07/02 职场文书
文明礼貌主题班会
2015/08/14 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis