基于jQuery脚本库技术的插件开发方法研究

第２１卷第６期　ｖｏ１．２１　Ｎｏ．６　四川职业技术学院学报　Ｊｏｕｒｎａｌ　ｏｆ　Ｓｉｅｈｕａｎ　Ｖｏｃａｔｉｏｎａｌ　ａｎｄ　Ｔｅｃｈｎｉｃａｌ　Ｃｏｌｌｅｇｅ　２０ｌ１年１２月　Ｄｅｃ．２０１　１　基于ｊ　Ｑｕｅ　ｒ　ｙ脚本库技术的插件开发方法研究　陈印，马红春，夏先进　（四川职业技术学院，四川遂宁６２９０００）　摘要：在Ｗｅｂ开发中，出于安全和功能等方面的考虑，程序员可能更愿意选择用服务器端代码解决业务逻辑和用户交互问　题．但在实际应用中，过多的任务会让服务器性能急速下降，从而影响到系统的整体工作状态．因此，有必要将一些简单且不涉及　安全的任务剥离出来交由客户端完成，实现为服务器减负的目的．本文主要讨论Ｗｅｂ应用中客户端脚本编程相关问题，重点就　ｊＱｕｅｒｙ脚本库基本原理和使用方法进行分析和研究，并以基于ＪＳＯＮ描述的功能扩展方法提供案例探讨了基于ｊＱｕｅｒｙ的插件　开发方法．　关键词：ｊＱｕｅｒｙ；－￣件；ＪＳＯＮ　中图分类号：ＴＰ３９３．０２７　ｌ引言　文献标识码：Ａ　文章编号：１６７２－２０９４（２０１１）０６－０１０４—０３　但这的确是一件相当简单明了的事情；　３）用￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｎ）代替ｂｏｄｙ标签的ｏｎｌｏａｄ　ｊＱｕｅｒｙ脚本技术在Ｗｅｂ开发中已被广泛使用，各类基　于ｊＱｕｅｒｙ的插件也如雨后春笋般层出不穷．那么，什么是　ｊＱｕｅｒｙ，如何开发基于ｊＱｕｅｒｙ的插件，就成为众多从业者必　然的思考和探究的课题．　事件处理过程．这一变化能够很好地解决逻辑和表现分离的　问题．并且使用这种办法可以在不同的脚本文件中做重复的　ｒｅａｄｙ操作．也就是说，￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｎ）语句可以多　次出现而不会因此导致冲突。要开发ｊＱｕｅｒｙ插件，很多时候　就是利用这个特性来实现的；　４）事件处理机制。ｊＱｕｅｒｙ还可以利用ｂｉｎｄ　０、ｕｎｂｉｎｄ　０、ｌｉｖｅ　０、ｄｉｅ　０等方法轻松绑定或解除绑定事件；　５）支持Ａｊａｘ；　ｊＱｕｅｒｙ脚本库是由ＪｏｈｎＲｅｓｉｇ（美国）创建，由于其优　异的特性，迄今为止已吸引了成千上万的ＪａｖａＳｃｒｉｐｔ编程　高手加盟其团队，优化库代码，编写丰富多彩的功能插件．事　实上，ＪａｖａＳｃｒｉｐｔ编程是业界众所周知的难题．为了让广大　程序员从烦琐的脚本编程中解放出来，一些ＪａｖａＳｃｒｉｐｔ高　手决心利用其基本特性开发出旨在简化脚本编程的基础框　架，像ｐｒｏｔｏｔｙｐｅ等．ｊＱｕｅｒｙ是继ｐｒｏｔｏｔｙｐｅ之后业界诞生　６）支持插件（Ｐｌｕｇｉｎ）技术．　２　ｊＯｕｅｒｙ插件开发方法　的又～款卓越的基于ＪａｖａＳｃｒｉｐｔ的脚本编号基础框架．　ｊＱｕｅｒｙ的口号是“ＷＲＩＴＥ　ＬＥＳＳ，ＤＯ　ＭＯＲＥ（写得更少，做得更　多）”．ｊＱｕｅｒｙ是一个轻量级的Ｊａｖａｓｃｒｉｐｔ脚本库（压缩后　要实现ｊＱｕｅｒｙ插件的开发，必须先了解ｊＱｕｅｒｙ脚本库　的编程特点和基本使用方法．ｊＱｕｅｒｙ的最大特点就是可以　轻松定位ＤＯＭ元素并将其转化为ｊＱｕｅｒｙ对象，从而可以有　效利用ｊＱｕｅｒｙ对象封装的各类属性和操作实现编程者的意　图．为了扩展ｊＱｕｅｒｙ的功能，我们只需利用ｊＱｕｅｒｙ的插件　机制，扩展ｊＱｕｅｒｙ对象的功能，就可以轻松达到目的．　２．１让网站支持ｊＱｕｅｒｙ　要使用ｊＱｕｅｒｙ，必须引入基本的ｊＱｕｅｒｙ脚本库。本文使　用的版本是ｊＱｕｅｒｙ１．４．２，你可以从其官网ｈｔｔｐ：／／ＷＷｗ．　ｊｑｕｅｒｙ．ｃｏｍ／下载到其最新的版本．　只有２１ｋ），且与ＣＳＳ３完全兼容，同时还兼容各类浏览器，像　ＦｉｒｅＦｏｘ　１．５＋，Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　６．Ｏ＋，Ｏｐｅｒａ　９．Ｏ＋，Ｓａｆａｒｉ　２．０＋等．ｊＱｕｅｒｙ库具备快速、简洁的特点．用户如果使用　ｊＱｕｅｒｙ，就可以更加轻松地对ＨＴＭＬ文档、事件进行处理，并　ｉＪ。陕速实现页面动画效果、利用Ａｊａｘ交互改善用户体验．。　ｊＱｕｅｒｙ另一个突出优势是有相当完整的说明文档，同时还　有许多成熟的插件可供用户选择．ｊＯｕｅｒｙ能够有效剥离　ＨＴＭＬ页代码和ＨＴＭＬ内容，实现更加干狰的Ｗｅｂ设计与开　发．总的来说，ｊＱｕｅｒｙ的主要特点包括：　１）在网站项目下创建脚本文件央（本例中文件夹名为　Ｓｃｒｉｐｔｓ），将ｊＯｕｅｒｙ库文件复制到该文件夹下，如图１所　不．　１）更加方便灵活地选择ＤＯＭ对象．在ｊＱｕｅｒｙ中，用户　不必编写复杂的ＤＯＭ访问代码查找ＤＯｇ元素，利用￥函数及　类ＣＳＳ特征的条件描述法就可轻松搞定；　２）基于ｊＱｕｅｒｙ对象．ｊＱｕｅｒｙ席中内置提供了像ｅａｃｈ　２）在目标页面中引用ｊＱｕｅｒｙ脚本库．　＜ｈｔｍｌ　ｘｍｌｎｓ＝　ｈｔｔｐ：／／ｗ、啊．ｗ３．ｏｒｇ／１９９９／ｘｈｔｍｌ　＞　＜ｈｅａｄ　ｒｕｎａｔ＝　ｓｅｒｖｅｒ　＞　（ｆｎ）等很多遍历函数，能够清楚遍历匹配的ＤＯｇ觅索　当然，　使用这些函数的前提是遍历的集合必须为ｊＱｕｅｒｙ对象。至　于如何将ＤＯＭ集合变为ｊＱｕｅｒｙ对象，不在本文讨论的范围，　收稿日期：２０１卜Ｏ９—２８　＜ｔｉｔｌｅ＞ｊＱｕｅｒｙ演示＜／ｔｉｔｉｅ＞　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝　ｊａｖａｓｃｒｉｐｔ　ｔｙｐｅ＝　ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ　ｓｒｃ＝　Ｓｃｒｉｐｔｓ／ｊｑｕｅｒｙ一１．４．２．ｊｓ　＞＜／ｓｃｒｉｐｔ＞　作者简介：陈印（１９７９一），男，四川渠县人，四川职业技术学院计算机科学系讲师。　马红春（１９６８一），女．四川南部人，四川职业技术学院计算机科学系副教授。　１（）４　・　・　

陈印．马红春，夏先进　图１将ｊＱｕｅｒｙ脚本库引入项目　＜／ｈｅａｄ＞　３）在目标页面中利用ｊＱｕｅｒｙ脚本库进行客户端编程．　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝　ｊａｖａｓｃｒｉｐｔ　ｔｙｐｅ＝　ｔｅｘｔ／　ｊａｖａｓｃｒｉｐｔ　＞　￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｕｎｃｔｉｏｎ　０（　／／此处写入基于ｊＱｕｅｒｙ的页面交互代码　｝）：　＜／ｓｃｒｉｐｔ＞　２．２ｊＱｕｅｒｙ插件开发　ｊＱｕｅｒｙ脚本库的核心是ｊＱｕｅｒｙ系列函数，利用这些函　数，我们可以轻松遍历整个ＤＯＭ并对其施加影响，甚至可以　由它动态产生新的ＤｏＭ元素．为了便于编程控制，ｊＱｕｅｒｙ函　数将Ｄ０Ｍ元素转化为ｊＯｕｅｒｙ对象，从而可以利用ｊＱｕｅｒｙ对　象所具有属性和方法操控这些ＤＯＭ元素．这是一：种非常棒的　设计思路，如果我们需要更多个性化的交互操作要求，就只　需对ｊＯｕｅｒｙ对象的功能进行扩展即可，而这恰恰是ｊＯｕｅｒｙ　开放的体系架构（插件机制）所固有的优势．　在ｊＱｕｅｒｙ中有两种办法扩展ｊＯｕｅｒｙ功能．一是利用￥．　ｅｘｔｅｎｄ（ｏｂｊｅｃｔ）扩展定义静态全局函数，二是利用￥．ｆｎ．　ｅｘｔｅｎｄ（ｏｂｊｅｃｔ）扩展ｊＯｕｅｒｙ对象的实例方法．　文重点就　第二种方法展开讨论，因为这是制作ｊＯｕｅｒｙ插件的有效途　径和方法．　１）基本语法　假设我们要制作一个能批量选中或取消选中表单复选框的　插件并修改样式加以强调，则可以采用类似于以下语法进行　定义：　ｊＯｕｅｒｙ．ｆｎ．ｅｘｔｅｎｄ（｛　ｔｏＣｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０　ｆ　ｖａｒ￥ｒｅｓｕｌｔ＝ｔｈｉｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ　０　ｆ　ｔｈｆｓ．ｃｈｅｃｋｅｄ　＝ｔｒｕｅ：））．ａｄｄＣｌａｓｓ　ｇ＇ｈｉｇｈｌｉｇｈｔ”）：　ｒｅｔｕｒｎ　Ｓｒｅｓｕｌｔ：　），　ｔｏＵｎｃｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０（　ｖａｒ　Ｓｒｅｓｕｌｔ＝ｔｈｉｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ（）｛ｔｈｉｓ．ｃｈｅｃｋｅｄ　＝ｆａｌｓｅ：））．ｒｅｍｏｖｅＣｌａｓｓ（‘‘ｈｉｇｈｌｉｇｈｔ’，）：　ｒｅｔｕｒｎ　Ｓｒｅｓｕｌ　ｔ：　）　基于ｊＱｕｅｒｙ脚本库技术的插件开发方法研究　））：　其中，ｊＱｕｅｒｙ为基类，ｊＱｕｅｒｙ．ｆｎ．ｅｘｔｅｎｄ　０表示利用其　ｅｘｔｅｎｄ方法对ｊＯｕｅｒｙ对象进行功能扩展．该方法所带参数　为一个ＪＳＯＮ对象，用于描述扩展的方法细节．在本例中，共　扩展了两个方法，一个是ｔｏＣｈｅｃｋｅｄ方法，用于选中所有指　定条件的复选框并为选中的复选框添加高亮显示样式，一个　是ｔｏＵｎｃｈｅｃｋｅｄ方法，用于取消选中所有指定条件的复选框　并为取消选中的复选框移除高亮显示样式．　２）支持￥符号表示法　在实际使用中，很多人更习惯用￥代替ｊＯｕｅｒｙ，为此，可　以对上述代码作出改进：　（ｆｕｎｃｔｉｏｎ（￥）｛　￥．ｆｎ．ｅｘｔｅｎｄ（｛　ｔｏＣｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０　ｆ　ｖａｒ￥ｒｅｓｕｌｔ＝ｔｈｉｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ　０｛　ｔｈｉｓ．ｃｈｅｃｋｅｄ＝ｔｒｕｅ：））．ａｄｄＣｌａｓｓ（“ｈｉｇｈｌｉｇｈｔ”）：　ｒｅｔｕｒｎ￥ｒｅｓｕｌｔ：　），　ｔｏＵｎｃｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０｛　ｖａｒ￥ｒｅｓｕｌｔ＝ｔｈｉ　ｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ　０（　ｔｈｉｓ．ｃｈｅｃｋｅｄ：ｆａｌｓｅ：｝）．ｒｅｍｏｖｅＣｌａｓｓ（‘‘ｈｉｇｈｌｉｇｈｔ’，）：　ｒｅｔｕｒｎ　Ｓｒｅｓｕｌｔ：　｝　））：　））（ｊＯｕｅｒｙ）：　３）上下文与链接操作支持　在插件扩展方法中，“ｔｈｉｓ”关键字代表当前ｊＯｕｅｒｙ对　象集，而其ｅａｃｈ遍历函数内的“ｔｈｉｓ”则表示具体的Ｄ０Ｍ元　素．这一点很重要，因为我们为了让扩展的功能也能像内置　的ｊＯｕｅｒｙ函数一样支持链接操作，就需要让函数返回　ｊＯｕｅｒｙ对象自身．在上例中，ｊＯｕｅｒｙ对象的ｅａｃｈ　０函数就　将返回ｊＱｕｅｒｙ对象自身，因此，在完成选中或取消选中操作　后可以继续调用自他操作．如：　￥　（“ｉｎｐｕｔ　［ｔｙｐｅ＝ｃｈｅｃｋｂｏｘ］”）．ｃｈｅｃｋ　０．ＣＳＳ　（‘‘ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ’　ｅｄ’，）：　４）使用插件功能　＜ｈｔｍｌ　ｘｍｌｎｓ＝　ｈｔｔｐ：／／ｗｗｗ．ｗ３．０ｒｇ／１９９９／ｘｈｔｍ１　＞　＜ｈｅａｄ　ｒｕｎａｔ＝　ｓｅｒｖｅｒ　＞　＜ｔｉｔｌｅ＞ｊＯｕｅｒｙ演示＜／ｔｉｔｌｅ＞　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝　ｊａｖａｓｃｒｉｐｔ　ｔｙｐｅ＝　ｔｅｘｔ／　ｊａｖａｓｃｒｉｐｔ　ｓｒｃ＝　Ｓｃｒｉｐｔｓ／ｊｑｕｅｒｙ一１．４．２．ｊｓ　＞＜／ｓｃｒｉｐｔ＞　＜ｓｃｒｉｐｔ　ｌａｎｇｕａｇｅ＝　ｊａｖａｓｃｒｉｐｔ　ｔｙｐｅ＝　ｔｅｘｔ／　ｊａｖａｓｃｒｉｐｔ　＞　（ｆｕｎｃｔｉｏｎ（￥）｛　￥。ｆｎ．ｅｘｔｅｎｄ（｛　ｔｏＣｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０｛　ｖａｔ　Ｓｒｅｓｕｌｔ＝ｔｈｉｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ　０｛　・Ｉ（）５・　

第２ｌ卷第６期　ｖｏ１．２１　Ｎｏ．６　四川职业技术学院学报　Ｊｏｕｒｎａｌ　ｏｆ　Ｓｉｅｈｕａｎ　Ｖｏｃａｔｉｏｎａｌ　ａｎｄ　Ｔｅｃｈｎｉｃａｌ　Ｃｏｌｌｅｇｅ　２０１１年１２月　Ｄｅｃ．２０１　１　ｔｈｉｓ．ｃｈｅｃｋｅｄ＝ｔｒｕｅ：｝）．ａｄｄＣｌａｓｓ￣＇ｈｉｇｈｌｉｇｈｔ＇￥：　ｒｅｔｕｒｎ￥ｒｅｓｕｌｔ：　），　ｔｏＵｎｃｈｅｃｋｅｄ：ｆｕｎｃｔｉｏｎ　０｛　ｖａｔ￥ｒｅｓｕｌｔ＝ｔｈｉｓ．ｅａｃｈ（ｆｕｎｃｔｉｏｎ（）｛　ｔｈｉｓ．ｃｈｅｃｋｅｄ＝ｆａｌｓｅ：｝）．ｒｅｍｏｖｅＣｌａｓｓ（＂ｈｉｇｈｌｉｇｈｔ’，）：　ｒｅｔｕｒｎ￥ｒｅｓｕｌｔ：　）　））：　））（ｊＱｕｅｒｙ）：　￥（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｕｎｃｔｉｏｎ　０｛　／／此处写入基于ｊＱｕｅｒｙ的页面交互代码　￥（　ｉｎｐｕｔ＃ｂｔｎＣｈｅｃｋＯｒＵｎｃｈｅｃｋ　）．ｔｏｇｇｌｅ（　ｆｕｎｃｔｉｏｎ０｛　￥（　ｉｎｐｕｔ［ｔｙｐｅ＝ｃｈｅｃｋｂｏｘ］　）．ｔｏＣｈｅｃｋｅｄ　０：　），　ｆｕｎｃｔｉｏｎ０｛　￥（　ｉ　ｎｐｕｔ［ｔｙｐｅ＝ｃｈｅｃｋｂｏｘ］　）．ｔｏＵｎｃｈｅｃｋｅｄ　０：　）　）：　））：　＜／ｓｃｒｉｐｔ＞　＜／ｈｅａｄ＞　＜ｂｏｄｙ＞　＜ｆｏｒｍ　ｉｄ＝　ｆｏｒｍｌ　ｒｕｎａｔ＝　ｓｅｒｖｅｒ　＜ｄｉｖ＞　＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｃｈｅｃｋｂｏｘ　ｉｄ＝　ｃｈｋＳｐｏｒｔｓ　ｖａｌｕｅ＝　１　／＞＜ｌａｂｅｌ　ｆｏｒ＝　ｃｈｋＳｐｏｒｔｓ　＞体育＜／ｌａｂｅｌ＞　＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｃｈｅｃｋｂｏｘ　ｉｄ＝　ｃｈｋＭｕｓｉｃｓ　ｖａｌｕｅ＝　２　／＞＜ｌａｂｅｌ　ｆｏｒ＝　ｃｈｋＭｕｓｉｃｓ　＞音乐＜／ｌａｂｅｌ＞　＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｃｈｅｃｋｂｏｘ　ｉｄ＝　ｃｈｋＡｒｔｓ‘ｖａｌｕｅ＝　３　／＞＜ｌａｂｅｌ　ｆｏｒ＝　ｃｈｋＡｒｔｓ　＞艺术＜／ｌａｂｅｌ＞　＜ｉｎｐｕｔ　ｔｙｐｅ＝　ｂｕｔｔｏｎ　ｉｄ＝　ｔｎＣｈｅｃｋ０ｒＵｎｃｈｅｃｋ　ｖａｌｕｅ＝　选中／取消选中　／＞　＜／ｄｉｖ＞　＜／ｆｏｒｍ＞　＜／ｂｏｄｙ＞　＜／ｈｔｍｌ＞　・１０６・　页面操作演示效果如下：　ｍ　一　！；！ｉｉｉｌ蛾｝　一　ｄ　ｔ　叶　×目　｝　变件瞅强冁Ｉ鲫　誊　嚣　【嗣漾　秘　∞囊期赫　鞭　馘　鬻ｌ　溅强　晦霰　盛。Ｑ　沮彖　ｌ鐾黧　鞣　ｊ　广体育广音照广艺术［薹兰重要圈　■　冕磺　｝　ｌ　｛　‘叠ｈ－ｔ・ｒＭｔ。　｛《ａ－ｌ　Ｉ。昨・　图２点击按钮后复选框全部被取消选中　；　曼ｕ　ｎ‘　，ｍｔ　一　：　一　０　阡　。¨嘲呸Ｊ　量ｔ哩　‘阴蚝幢　工＾Ｉ　册期毗　煳ｔ是善锄Ｊｑ　．ｒ滩录　Ｉ　！ｉｉ！ｉｉｉ！ｉ［　ｊ　　Ｉ体育　音乐　艺术［　童受圈　二』　慕嚣糍辫　謦　瓣　臻　麓ｌ麓　：嚣　黧黧　黧　辫ｉ　《Ｉ　．　图３点击按钮后复选框全部被选中　３结论　随着Ｗｅｂ２．０理念的不断深入人心，ｗＥＢ应用开发技术越　来越注重用户体验的改善．要有效增强用户体验，就必须在　视觉效果、交互速度、人性关怀等方面改造传统Ｗｅｂ应用．利　用ｊＯｕｅｒｙ脚本库技术，可以让客户端编程更易于实施从而　被广大ｗｅｂ程序员接受和运用，最终达到有效分担服务器负　担的目的．同时，ｊＱｕｅｒｙ便捷的插件机制使ｊＯｕｅｒｙ的功能　可以得到几乎无限的延伸．　本文介绍了ｊＯｕｅｒｙ脚本库的特点和使用方法，分析和　演示了ｊＱｕｅｒｙ插件的开发方法和步骤，希望籍此为同行教　学和开发实践提供参考．　参考文献：　［１］邱小湖．天诚保险代理南充分公司内部业务管理系统设计与实　现［Ｄ］．电子科技大学，２０１０．　［２］ｊＯｕｅｒｙ．Ｐｌｕｇｉｎｓ／Ａｕｔｈｏｒｉｎｇ（ＥＢ／ＯＬ）．ｈｔｔｐ：／／ｄｏｃｓ．ｊｑｕｅｒｙ．ｃｏｍ　／Ｐｌｕｇｉｎｓ／Ａｕｔｈｏｒｉｎｇ／．　［３］百度百科．ｊＯｕｅｒｙ（ＥＢ／ＯＬ）．ｈｔｔｐ：／／ｂａｉｋｅ．ｂａｉｄｕ．ｃｏｍ／ｖｉｅｗ／１０２　０２９７．ｈｔｍ．　［４］６２９博客．ｊＯｕｅｒｙ１．４．２ＡＰＩ简体中文版［Ｊ］，ｈｔｔｐ：／／　．６２９ｄ．　ｃｏｍ／．　责任编辑：张隆辉