基于jquery的封装与应用

《基于jquery的封装与应用》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基于jQuery的封装与应用i前言12选题背景13技术介绍与分析23.1、jQuery框架23・1・1、jQuery,总体架构23.1.2、构造jQuery对象53」.3、选择器Sizzle103.1.4、数据缓存Data113.1.5、属性操作Attributes123.1.6、DOM操作Manipulation143.1.7、异步请求Ajax173.2>json20321、语法规则20322、基础结构204系统应用开发214.1、应用说明214.2、应用场景214.3、核心源码分析225论文总结与展望43基于jQuery的封装与应用1前言在这个21世纪的信息时代，开

2、发者在近10年间的开发项目过程中，不得不面对这三大主要的平台：浏览器、服务器和木地/手机应用。现实是JavaScript已经成为事实上的Web标准语言。而一部分认为JavaScript正在把手伸向服务器端开发，比如说Node,jso在2012年9刀份，行业分析公司RedMonk就公布了JavaScript在开发语言里已经处于遥遥领先的地位。这主要得意于JavaScript所提供的丰富的、动态的网页内容的能力，以及JavaScript的轻便性和高易用性。正因为如此，基于javascript的库也如雨后春笋般涌现出来，其中不乏许多优秀的、应用广泛的javascript库，如

3、IjQuery、Prototype>Zepto>YUILibrary等，这些优秀的库给我们带来了更加便捷的项目开发。2选题背景在众多的javascript库屮，最受程序员段爱莫过于jQuery了,jQuery是一个兼容多种浏览器的javascript库，核心理念是writeless,domore,即写得更少，做得更多，多么美妙的理念。jQuery库在2006年1月由美国人JohnResig在纽约发布，吸引了來自世界各地的众多JavaScript爱好者及高手加入，由Dave率领团队进行开发。如今，jQuery框架已经成为最流行的javascript库,在世界前10000多

4、个访问最多的网站中，有超过55%的网站在使用jQueryoJQuery框架是免费、开源的，使用MIT许可协议。jQuery的语法设计使得开发更加方便，快捷，例如操作各种文档对象、选择D0M元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery框架提供APT让开发者可以方便的编写插件。其模块化的使用方式受到广大开发者的追捧与克爱，使得开发者可以很轻松的开发出功能强大的静态、动态网页。在这众多的jQuery爱好者当屮，毫无疑问，我也是其屮的一员，喜欢它的简单、快速、轻量。但是jQuery框架也有自己的局限性，虽然它在web项目里面能帮助我们解决大量的

5、问题，节省大量的代码，但是为了更进一步的优化项目代码，提高web项目的开发进度，所以我打算在JQuery的基础上，做更深层次的二次封装，方便今后项目的开发与维护。3技术介绍与分析3.1vjQuery框架3.1・1、jQuery总体架构jQuery的模块总体上可以分为3个部分：入口模块、底层支持模块、功能模块。如图3T所示。功能模块仓辽iQuery对骯Quwry；)底言乏捋播耳工具司去Utilties目凋函邈歹」表CallbacksObject异疔次列DeferredObject浏左語功能测试Support臥歹JQueue选滓器Si£e图3-1jQuery的模块分类在构建

6、jQuery对象的模块中，如果我们在调用构造函数jQuery()对象时传入了选择器表达式，jQyery则会调用Sizzle选择器來遍历文档，然后查找与Z匹配的D0M元素，并且创建一个包含了这些D0M元素引用的jQuery对象。jQuery的选择器Sizzle是一款全部由javacsript来实现的CSS选择器引擎，主要用于查找与选择器表达式所匹配的元素集合。jQuery的工具方法模块提供了很多编程辅助方法来用于简化对jQuery对象、DOM元素、字符串、对象、数组等相关的操作，例如，map()>.each()>jQuery.map()、jQuery.each()等，其他

7、所有的模块都有用到工具方法模块。浏览器的功能测试模块提供了针对各种浏览器功能以及bug的测试结果，而其他模块则基于这些测试结果来解决浏览器之间令人讨厌的兼容性问题。在这些底层支持的模块中，回调函数列表主要用于增强对回调函数的相关管理，支持锁定、触发、移除、添加、禁用回调函数等功能；异步队列模块则用于解耦异步任务，冋调函数，它在冋调函数列表的基础上为冋调函数增加了不同的状态，并口提供了多个回调函数列表，支持传播任意同步或者异步回调函数的成功以及失败状态；数据缓存模块则用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于