JQuery插件

2024-06-01

JQuery插件(精选四篇)

JQuery插件 篇1

关键词:web,jQuery插件,对象级别

0 引言

j Query是一个优秀的javascript库,在2006年1月由美国人John Resig发布。它轻巧高效,兼容CSS3,同时还还兼容各种浏览器。使用户能更方便地处理HTML documents、events、实现动画效果,并且为网站提供AJAX交互。

j Query集方便、简洁、易于拓展等优秀品质为一身,吸引了众多程序开发者的加入,如今已经成为运用最为广泛的javascript库,大批功能强大的插件也应运而生,不过虽然有很多插件供用户免费下载使用,但每个项目的要求都不尽相同,如果能掌握插件开发的方式,就能进行更加个性化的定制。同时,优秀的j Query插件不仅能提高开发的效率和质量,也能不断推进web技术的向前发展。

1 插件的种类的分析

j Query插件开发方式主要有两种:

一是类级别插件,利用$.extend(object)扩展定义静态全局函数,将函数置于j Query命名空间中。如最为常见的就是$.ajax()、$.trim()全局性函数,都是以内部插件的形式植入j Query内核中。但这种方式无法利用j Query强大的选择器带来的便利,无法将插件运用于所选择的元素身上。

二是对象级别插件,利用$.fn.extend(object)扩展j Query对象的实例方法。该类插件首先通过j Query选择器获取对象,并为对象添加方法,然后,将方法进行打包,封装成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了j Query中功能强大的选择器。本文就基于j Query的自定义弹出框为例子对这种方法展开讨论。

2 插件开发的基本方法

2.1 插件的命名规则

插件的文件命名必须严格遵循j Query.[插件名].js的规则,以便于区分其他js文件,如新插件文件j Query.newqlugin.js。如果是类级别插件,所有的方法都应依附于jquery对象;如果是对象级别插件,所有的方法都应依附于jquery.fn主体对象。

2.2 插件的基本格式

类级别插件的格式就是往$.extend()里面添加一个或者多个全局函数:

对象级别插件的格式就是往$.fn.extend()里面添加一个或者多个方法,名字就是的插件名称,插件代码在这个方法里面展开。

3 基于j Query的对象级别插件开发

功能描述:网页任意元素绑定插件方法后,点击元素,弹出confirm弹出框,根据点击确认或者取消,弹出相应的alert弹出框。并且提供可以设置长宽的接口,开发者可根据需求改变弹出框的大小。

搭建一个js文件,命名为jquery.winpop.js,这是一个扩展j Query对象的实例方法的插件,在文件中使用$.fn.extend()方法完成框架的搭建。实现如下:

3.1 面向对象的开发模式

把插件抽象为一个弹出框对象,命名为Winpop,在插件里使用这个对象来编码:

3.2 让插件接受参数

一个好的插件是可以根据用户的需求定制的,为了提供更全面的功能支持,编写插件时要尽量提供合理的参数。

需要调用插件的元素毫无疑问应该作为参数传入;每个用户在设置弹出框时,对于弹出框的尺寸需求都不尽相同,所以这里把高和宽作为参数传入,同时也给出参数的默认值,用户可灵活设置参数或使用默认值。

调用插件的元素通过j Query选择器选中,如$(‘#btn’),已经是j Query包装类型,可以直接调用j Query的其他方法。但用户传入的只是普通参数,需要使用$.extend(object)方法进行处理。将默认值和用户输入值都传入到extend方法,它会将所有参数对象合并到第一个里。如果有同名属性,合并的时候后者会覆盖前者。这样就将用户输入值拓展为j Query包装类型,并保持默认值不被改变。

3.3 创造弹出框

将需要被创造出的元素全部放在一个对象里,分为主体部分ovl、alert部分中的确定按钮和confirm部分中的确定、取消按钮。

在Winpop中添加三个方法,create Dom方法用于创造弹出框的主体部分,弹出框的大小在没有用户输入的情况下使用默认值。alert和confirm方法分别创造不同形式的按钮。

4 引用插件

要使用j Query,必须引入基本的j Query脚本库。本文使用的版本jquery-2.1.4.min,可以从官网http://www.jquery.com/下载其最新的版本。接下来引入js文件,代码如下:

然后在js代码中调用,以网页中id为btn为按钮作为调用元素为例,调用插件的方法如下:

$('#btn').my Plugin();

这样,点击此按钮之后,出现如下弹出框:

在点击确认和取消按钮之后,分别出现如下弹出框:

也可以自定义弹出框的宽和高:$('#btn').MyPlugin({'height':'200px','width':'350px'});

5 总结

随着web技术的不断发展,用户对视觉效果,交互反应等方面的要求越来越高,利用j Query脚本库技术开发插件,有效的提高了代码的可重用性,节省了开发者的时间和精力。同时,便捷的插件机制使j Query的功能得到几乎无限的拓展,形成一个良好的生态圈,给j Query技术注入活力也推动了web技术的不断发展。作为开发者,编写插件时要严格遵守开发的要素,先搭框架,后进行开发,不同的插件使用不同的拓展方法。

参考文献

[1]ZAKAS N C.Java Script高级程序设计(第3版)[M].人民邮电出版社,2012.

[2]BLANCHARD J.j Query实战开发[M].人民邮电出版社,2012.

[3]邢素萍.用j Query技术开发特色插件[J].微型电脑应用,2014,30(8):59-64.XING S P.Using j Query Technology to Develop Special Plug-Ins[J].Microcomputer Applications,2014,30(8):59-64.

[4]王晶,温向彬.利用j Query操作HTML元素[J].农业网络信息,2008(4):98-99.WANG J,WEN X B.Operate HTML elements using j Query[J].AGRICULTURE NETWORK INFORMATION,2008(4):98-99.

[5]邓佳源.j Query插件对Web应用的影响研究与讨论[J].电脑知识与技术,2016,12(3).DENG J Y.Research and Discussion on the Impact of j Query Plug-in on Web Application[J].Computer Knowledge and Technology,2016,12(3).

[6]付予.一种基于j Query的跨模块通信机制的改进方案[J].软件,2014,35(12):42-44.FU Y.An Improved Solution of multi-module Communication Based on j Query[J].SOFTWARE,2014,35(12):42-44.

[7]孙小淋.基于Java Script的消息管理机制探讨[J].软件,2013,34(5):70-71.SUN X L.Java Script-based Message Management Mechanism[J].SOFTWARE,2013,34(5):70-71

[8]荣艳冬.以岗位需求为导向的Javascript课程构建[J].软件,2015,36(6):18-20.RONG Y D.Construction of Javascript Course Based on the Guidance of Job Requirement[J].SOFTWARE,2015,36(6):18-20.

最佳jQuery插件网页设计 篇2

拉洋片

在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,20,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。

AnythingSlider

由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。

Easy Slider

这个 Content Slider 插件既包含传统“前后”导航模式,又包含页码式导航。

Coda-Slider 2.0

Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria

这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。

jQuery Panel Gallery

一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。

slideViewer

slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。

Supersized

一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口,

导航

我们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery导航插件。

jquery mb.menuHorizontal Scroll Menu with jQueryAutoSprites表单和表格

在 Web 设计中,表单和表格都是不是很讨人喜欢的东西,但你不得不面对,本年度出现几个不错的 jQuery插件帮你完成这些任务。

Password Strength

这个插件帮你评估用户输入的密码是否足够强壮。

Ajax Fancy Capcha

顾名思义,一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制。

Chromatable

这个插件可以帮助你在表格上实现滚动条。

jqTransform

一个式样插件,帮助你对表单中的控件进行式样控制。

Uploadify

实现多个文件同时上传。

jExpand

一个很轻量的 jQuery 插件,使你的表格可以扩展,在一些商业应用中,可以让表格更容易组织其中的内容。

本文来源:webdesignledger.com/resources/the-best-jquery-plugins-of-

JQuery插件 篇3

1 功能与效果

为了先给读者一个直观的印象, 描述一下该插件所要实现的功能及最终效果, 权当需求分析。

1.1 单击页面元素弹出

当用户单击页面上某个HTML元素 (暂限于元素) 时, 弹出“颜色选择器” (如图1), 以供用户选择颜色。

1.2 多种选择颜色的方式

本“颜色选择器”提供4种定制或选择颜色的方式。

1.2.1 自定义方式

如图2所示, 左边是一个根据色调 (H)、饱和度 (S) 和亮度 (L) 绘制的色盘, 亮度由右下角的亮度滑动条控制, 默认为50%。开始实验时还提供了R、G、B、H、S、L的滑动条控制, 并与色盘上点的位置同步, 但考虑到过于复杂, 插件体积太大, 故略去了。

1.2.2 从已命名颜色中选择

CSS Color Module Level 3①定义了16种基本颜色关键字和147种扩展颜色关键字, 将这些颜色以色块列表的方式显示在“颜色选择器”中, 供用户选择。图3中第一行是16种基本颜色, 第二行始是147种扩展颜色。

1.2.3 从 RGB 颜色列表中选择

以颜色的R、G、B分量每相差 #33画一色块, 得到一色块列表, 这些颜色即是网上所说的网页安全色。

1.2.4 从 HSL 颜色列表中选择

按照色调H、饱和度S、亮度L的不同组合, 也可画出一颜色块列表。这里不同的是色调H值通过下拉列表框进行选择, 分别有红、红-黄、黄、黄-绿、绿、绿-青、青、青-蓝、蓝、蓝-紫、紫、紫-红共12个选项, 对应的H值分别是0、30、60、……330; 色块列表的水平方向表示饱和度 (S), 从100%到0%, 两两相隔10%; 色块列表的垂直方向表示亮度 (L), 从90%到10%。鉴于CSS3规范规定, 不管H、S为何值, 亮度=0%时为黑色, 100%为白色, 50%为正常。所以我们略去了亮度为0%、100%两值。图5显示的是色调为蓝色 (H=) 时的HSL色块列表。

1.3 鼠标跟随与颜色选定

用户在色盘 (或色块列表) 上首次单击时, 启动鼠标跟随, 随后鼠标在色盘 (或色块列表) 上移动时, 将显示鼠标所在位置颜色的值、颜色预览, 再次单击, 将选定颜色, 并停止鼠标跟随。直接双击将立即选定颜色。

在选择方式⑴, 启动鼠标跟随后, 鼠标在色盘上移动时, (1) 将在右侧显示鼠标所在位置颜色的RGB值、HSL值、及颜色预览 (右侧中间有两个色块, 其中左侧为初始颜色———所单击的页面元素的value属性值 (应为颜色值), 右侧为当前颜色); (2) 在顶端中间的文本框 (id为tHex) 中显示当前颜色的十六进制值, 并以当前颜色为其背景色, 当前颜色的补色为文字颜色。

在其他选择方式中, 鼠标在色盘上移动时, 1) 在鼠标位置附近显示一提示信息, 其内容为鼠标所在位置颜色的关键字 (选择方式2) 或颜色的RGB值 (选择方式3、4); 2) 同上。

1.4 α 值的设置与调节

无论哪一种颜色选择方式, 都可通过选择器顶端的按钮及弹出的滑动条设置或调节颜色的α值。

在按钮为深色 (意即颜色值中不含α值) 的情况下, 单击按钮, 该按钮颜色变淡 (表示颜色值将包含α值), 并随之在该按钮下方显示一个滑动条, 拖动其滑块, 即可调节当前颜色的α值。 此时, 选择器顶端tHex文本框中的内容将在当前颜色的十六进制值后添加α值, 背景颜色将随α值变化而变化。

在选择方式⑴中, 还会将右侧显示RGB、HSL值的两文本框左边的标签分别将变成RGBA、HSLA, 相应文本框中都将包含α值, 色盘及预览色块也将随着α值的变化而变化。

在滑动条的滑块上松开鼠标 (α值调节完成) 时, 滑动条自动隐藏。

在按钮颜色较淡 (颜色值包含α值) 时, 单击按钮, 按钮颜色变深 (表示颜色值将不包含α值), 且不会显示调节α值的滑动条。同时, 在选择方式⑴, 右侧显示RGB、HSL值的两文本框左边的标签将变回为RGB、HSL, 文本框中包含的α值也将消失。

1.5 确认与取消

颜色选择或调节完成后, 单击“确认”按钮, 选定颜色的值将自动填入页面上的元素中, 并将该元素的背景色设置成选定颜色。填入的颜色值因有无α 值而异, 在有α值时, 填入的值为RGBA值, 无α值时, 为十六进制值。同时, 自动隐藏“颜色选择器”。

如果单击“取消”按钮, 则页面上的元素不发生任何改变, 并关闭“颜色选择器”。

2 基本流程与总体框架

根据以上分析, 可以得到程序的基本流程: 在页面载入完成时, 做好颜色选择器的准备工作, 用户单击页面上用于输入颜色的文本框时, 显示“颜色选择器”, 然后根据用户操作 (单击选择器顶端的哪个按钮) 作出相应的处理, 如表1所示。

根据表1, 不难得到程序的总体框架。

3 关键技术

3.1 色盘的绘制

一个简单的办法是从网上下载一幅“色盘”图片, 将其嵌入到“颜色选择器”中, 但会带来两个问题:(1) 用鼠标在色盘上选择颜色时, 根据光标位置计算得到的颜色与光标所在位置的实际颜色未必一致;(2) 使用本插件时, 必须将该图片文件复制到指定路径下, 为编程者增加了使用的不便。于是, 想到了直接绘制。也是因为HTML5新引入了Canvas和SVG才有此想法。用的是SVG, 这里主要用到了SVG的创建组、画矩形、 线性渐变、平移、旋转等功能。伪代码如下:

3.2 色盘随亮度变化而变化

二维的静态色盘仅包含色调H、饱和度S的变化, 无法反映亮度L的变化 (以上所画色盘, 亮度值固定为50%)。通过移动点在色盘中的位置, 只能调节颜色的色调和饱和度。要调节亮度, 只有借助用户输入了。这里提供给用户调节亮度的工具是一滑动条。当用户通过 “亮度”滑动条改变亮度 (L) 时, 不仅希望当前颜色值、预览色块随之而变, 还希望整个色盘也随亮度变化而变化。

为实现色盘随亮度改变而变化的效果, 开始的想法是给colorDisk () 函数设置一个亮度参数 , 亮度每次变化时 , 用改变了的亮度值再次调用colorDisk () 函数, 重绘色盘。但因每次重画, 要重新定义360个线性渐变、经过360次旋转变换, 画360个以线性渐变填充的矩形, 效率太低, 拖动“亮度”滑动条时有迟滞。 考虑到SVG滤镜是基于像素级的图像变换, 不少滤镜可改变每个像素的颜色, 便想用SVG滤镜试试。先后尝 试了feColorMatrix、feComponentTransfer、feBlend、feConvolveMatrix等滤镜, 虽能实现色盘亮度的改变, 但担心如此变换后某点 (某个像素) 处的颜色与实际的H、S、L值未必相符。因此, 还是回到了原点, 当然, 作了些改进。不是重绘色盘, 而只是用变化了的亮度值改变360个线性渐变两端的颜色值。经测试, 解决了时滞、不流畅的问题。代码如下:

3.3 鼠标在色盘上移动 (单击、 双击) 时, 鼠标所在 位置颜色的确定

由于SVG本身没有获取某像素颜色的函数, 因此, 要获取色盘中某位置的颜色, 必须根据位置及色盘生成规则计算得到。鉴于SVG元素g可以侦听鼠标事件, 因此可为色盘容器 (g1) 绑定mousedown、mousemove事件, 这两事件的属性offsetX、offsetY是鼠标位置相对于g1左上角的偏离值, 而色盘圆心位置ox、oy也是相对于g1左上角的偏离值, 位于同一坐标系中, 可直接据此计算该位置的H、S值。如图6所示, P为鼠标位置, O为色盘圆心位置, 于是H即等于OP与X轴正方向的夹角β (度数), S为OP长度与色盘半径比的百分数。伪代码如下:

3.4 色块列表的绘制

这里没有用

元素来构造色块列表, 而是也用SVG直接绘制。

(1) 对于命名色色块列表 , 先将所有颜色关键字放入数组, 如aClrs= ['black','navy','darkblue',……], 然后用jQuery的each () 函数 , 对每一数组元素画一用该元素作填充颜色的矩形, 当然, 在遍历各元素画矩形时, 需改变画矩形的位置。代码如下:

(2) 对于RGB色块列表, 则先定义数组hexs= ['F','C','9', '6','3','0'], 然后让R、G、B 3分量依次取数组中各元素值, 合成颜色, 并以此颜色为填充色画矩形。其结果是6个大块, 每个大块中有6×6=36个小块。6个大块反映了R分量依次从十六进制FF到00, 每个小块的纵向反映G分量依次从十六进制FF到00, 横向反映B分量从十六进制FF到00 (见图4)。代码为:

(3) 对于HSL颜色块列表, 其色调H由下拉列表框控制, 从0°~330°每隔30°一个选项, 饱和度S为横轴, 从100%到0%, 两两相隔10%, 亮度H为纵轴 , 从90%到10%, 两两相隔也是10%。

3.5 SVG 元素的动态创建

前面多次用到SVG的功能, 如创建组、画矩形、定义线性渐变, 组平移、旋转等。遗憾的是目前jQuery尚不支持直接创建SVG元素, 而用JS创建又觉繁琐。为此对jQuery进行扩展。由于jQuery强大的可扩展性, 扩展倒并非难事, 仅用几行代码, 即可完成创建SVG元素的功能, 进而可借助jQuery对这些SVG元素进行操控。

从代码中可以看到, 创建任何SVG元素都要用到SVG命名空间http://www.w3.org/2000/svg, 因而不能 用document. createElement () 函数创建 , 而需用document.createElementNS () 函数创建, 且第一个参数应为SVG命名空间。在为SVG元素添加属性时, 一般属性均可用setAttribute () 方法添加, 但遇到链 接属性xlink:href则需要xlink命名空间 , 从而要用setAttributeNS () 方法 , 在使用该方法时 , 第一个参数为xlink命名空间。该扩展函数的用法, 与jQuery中函数用法一致。假设文档中已有一id为 'svgCont' 的

元素, 现要在其中插入一SVG元素, 可用:

$('#svgCont').svg('svg',{width:300,height:200})

若想在该SVG中再添加一个矩形, 可在上面代码的末尾写上:

这样便在SVG中添加了一个位于 (10,10), 宽为100, 高为50, 用红色填充, 蓝色边框, 边框宽度为2的矩形。若要对矩形进行修改, 如将填充色改成黄色, 只需:

$('#rectA').attr('fill', 'yellow');

当然, 也可将所创建的SVG元素的jQuery对象赋值给一个变量, 再用该变量调用svg函数创建矩形, 如:

此时, 要将矩形填充色改成黄色, 只需写

rectA.attr('fill', 'yellow');

再举一个文中用到的例子: 当鼠标在色块列表上移动时, 在顶端中间的文本框 (id为tHex) 中显示鼠标所在色块的颜色值。只需在前面画色块列表的函数中写上:

以上第一行即是在第y行第x列画一宽、高为w, 填充色为c的矩形, 第二行添加鼠标在其上移动的事件处理函数。

至此,“颜色选择”插件的主要功能已基本实现, 另外本插件还要用到4种颜色值 (十六进制值, RGB值、HSL值和颜色关键字) 的相互转换, 离题太远, 不再赘述。到如需完整代码可参考本文所附源码。

4 插件用法

4.1 将插件导入 html 文档

与一般js文件的的导入无异, 只需将插件的全部代码保存为一js文件 (不妨设文件名为icp.js), 在文档的

中添加以下语句即可:

当然要注意文件的存放路径, 另外还需在该语句前先导入jQuery文件。

4.2 在 html 文档中添加 class='icp' 的元素

添加多少个这样的元素, 添加在什么位置没有任何限制, 完全可视需要而定。

经过这两步, 当html文档在浏览器 (支持SVG的浏览器) 中打开后, 单击这样的文本框, 即可弹出“颜色选择器”, 如图1所示。

JQuery插件 篇4

1 j Query插件

在网页的浏览和相关应用当中,插件是一项必不可少的内容,且在很多方面都表现出了较大的影响。从视频播放到在线音乐下载,从图片浏览到文字信息的查询,任何一项Web应用都离不开插件的帮助。在目前的插件类型当中,j Query插件是比较常见的一类,在具体的应用中表现出了较大的积极作用。从jQuery本身来分析,其官方的插件是jQuery UI,开发者在应用的过程中,可以针对j Query的函数库进行广泛的扩展,并且按照自身的需求,从多方面针对UI组件进行开发和使用。在现阶段的网络统计当中,存在数以万计的j Query插件,并且基本上覆盖了所有的网络需求。比较常见的需求包括数据表格、动态列表、拖拽等等。j Query插件在使用的过程中,其本身的文档说明是比较健全的,在各种应用方面也表现为详细的特点。另一方面,针对j Query插件的深入研究后,发现其存在较多的成熟插件可以进行选择,例如Component One Studio for ASP NET Wijmo。

在目前的网络发展中,j Query插件在网站建设的过程中,其使用率表现为逐步增加的趋势。因此,要想更好的提高Web应用的效果和体验,就必须与时代的步伐进行跟进,开发出较多的新插件、新的代码片段,从多方面来巩固用户的体验。

2 j Query插件对Web应用的影响

Web应用在发展的过程中,经历了很多的阶段,到目前为止,Web应用已经是用户的必要网络体验,不必过度的依赖客户端,也不必过度的依赖某些资源网站,而是可以通过大面积的搜索来满足自己的需求和享受某些体验。但所有的Web应用,都必须建立在插件的基础上来完成,包括网络视频、网络购物等等,每一项服务内容,都具有自身独特的插件,否则是不能完成相关操作的。j Query插件是众多插件当中的佼佼者,其针对Web应用产生的影响较大,有必要进行深入的研究。

2.1 Ajax的影响

在j Query插件当中,Ajax是一个比较重要的组成部分,在很多方面都表现出了较强的推动作用。在Web应用当中,Ajax隶属于一种新的Web数据交互方法,并不是Web开发技术。从客观的角度来分析,Ajax在应用的过程中,其针对客户端和服务器端之间的信息传输,具有良好的作用,即便是仅仅传输少量的信息,也可以在多方面完成用户的更多体验,给予用户较多的支持与帮助。在技术方面,Ajax在应用的过程中,集成了多项技术,促使其能够满足较多的需求。包括使用了基于标准HTML和CSS的表示技术;使用DOM进行动态交互、进行动态显示的技术;使用XML和XSLT进行数据交换技术、数据处理技术;使用XMLHttp Requset进行异步数据检索的技术;使用Java Script将以上技术,从多方面进行有效的融合,以此来满足服务器端的处理逻辑,为用户带来了较多的帮助。

由此可见,j Query插件当中的Ajax应用,产生了以下影响:第一,多项技术的集中使用,为Web应用带来了更多的良好体验,满足了不同用户群体的需求;第二,使用的过程中,可进行适当的调节,不会拘泥于固定的形式和方法,未来的优化空间较大;第三,Ajax的兼容性较好,能够在很多方面实现与其他技术的有效结合,促使Web应用表现出健全的特点,告别以往的繁杂问题。

2.2 j Query框架的影响

Web应用在长久的发展中,其所带来的经济效益和社会效益,都是非常理想的,并且在很多方面表现为突出的特点。在j Query插件当中,j Query框架也是比较重要的组成部分,且产生的影响比较积极,各方面均创造出了较大的价值。就j Query框架本身来分析,其隶属于Ajax的轻量级框架,在兼容性方面突出,能偶兼容CSS3 以及各种浏览器,使用范围比较广泛。在Web应用当中,有效使用j Query插件以后,利用其框架的作用,可为用户提供较多的便利。

第一,在Web应用当中,可以比较方便的编写代码,尤其是网页加载完毕后的自动执行代码。这对用户的日常使用而言,表现出了较大的积极作用,不仅提高了Web应用的服务速度,同时在流畅度方面,也获得了较大的进步。第二,简化了选择器的使用方式、简化了选择器的事件定义方式,能够直接为用户带来更好的体验,减少了过往的操作繁琐为难题。第三,通过有效的应用j Query框架,还可以实现对DOM的有效操作,总体上所表现出的积极意义较为重要。第四,j Query框架的使用,针对Ajax的操作,提供了较大的基础支持,促使整体的Web应用表现为良性循环的状态。例如,利用$.ajax(prop)能够有效的发送远程数据,针对Ajax的请求予以充分的满足。同时,可以利用很多的简单方式发送请求,主要是包括$.get()、$.post()等等。

2.3 JSON数据格式

Web应用在深入的研究过程中,表现为不断深化的特点,具体涉及到的各项影响因素均在增多。因此,仅仅针对上述的两项内容进行研究和应用,并不能充分地发挥出j Query插件的具体优势。在j Query插件的组成当中,JSON数据格式的重要性是不言而喻的。从JSON数据格式本身来分析,其主要是一种利用Java Script对象符号格式化文本的简单方法。该数据格式在使用的过程中,可更加方便用户在Web上进行阅读,针对机器的解析和生成,产生了较大的积极作用。为此,将JSON数据格式应用到Web以后,主要是被作为一种轻量级的数据交换格式来使用。例如,在对象的处理中,主要是作为一种无序特点的“名称/值”对集合。一个对象主要是以“{”来开始,以“}”来结束。在每一个名称的后面,都会增加“:”来处理,而针对名称/值分隔处理来讲,利用“,”来完成,操作相对简单。

3 关于j Query插件对Web应用的分析——购物车

j Query插件在目前的研究中,的确为Web应用产生了很大的积极意义,并且在很多方面都表现出了极大的优势。但考虑到现阶段的用户需求,还是应该根据不同的区域应用,将j Query插件的优势,针对不同的用户使用进行表现。例如,在购物车的模式设计与实现当中,应从多方面来有效的设计,一方面将j Query插件有效的安插,另一方面不要影响到用户的使用体验,以此来提高Web应用的水平。

3.1 购物车模式的设计与实现——基于Ajax的Web系统响应过程

Web应用当中,购物车是最常见的一类应用,在很多方面都表现出了较高的服务特点。以往的购物车在使用当中,每添加一件物品,都需要进行刷新处理,未能满足用户的需求。对此,在设计的过程中,将Ajax的异步作用有效发挥,在发送Http的请求过程中,告别了浏览器挂着等候服务器响应的问题。在实际的操作当中,促使浏览器对用户与界面的实际交互,直接进行响应。同时,在服务器响应到达的时候,进行有效的处理。实际的设定方面,可以在XMLHttp Request上面,有效的注册一个回调的函数,之后采取异步地分派的处理方法,控制就会返回浏览器当中,服务器响应到达的时候,将直接调用回调的函数。

3.2 服务器请求处理

购物车的j Query插件应用,是Web应用的代表部分,在很多方面都表现出了较大的进步。服务器的请求处理,应选择合理的方法来完成。考虑到购物车的实际使用,选择应用Servlet进行处理,针对XMLHttp Request进行有效的处理。在具体的方法上,与处理普通的浏览器HTTP的请求表现为一致的特点。服务器端的处理当中,购物车Cart可以作为一个Java的对象,设计人员使用JSON.simple程序包的JSONObject和JSONArray,能够比较方面的生成JSON的对象和、数组,从而完成系列的操作。

4 j Query插件的注意事项

j Query插件在目前的研究和使用中,表现为较大的积极特点。但从整体的情况来看,任何一种插件都不可能满足所有的需求,其具有特定的服务方向,在很多方面都具有限制性,不可随意的应用。j Query插件即便是插件中的佼佼者,依然要在使用过程中,针对注意事项引起关注,并且有效的遵守,否则很难得到理想的Web应用效果。

4.1 j Query插件类别

从插件本身来分析,j Query插件在应用的过程中,可以划分为一种兼容性比较突出的框架,其针对绝大多数的浏览器都可以有效的支持。但是,j Query插件在开发过程中,针对j Query类文件,属于一种二次开发,因此在种类方面,主要是划分为两个类别。第一种是类级别插件的开发,其能够针对j Query类本身,添加有效的方法。例如,j Query插件的全局函数,就是有效的命名空间的函数。第二种是对象级别的插件开发,也就是针对j Query的具体对象,添加不同的方法,实现Web应用水平的提升,满足用户的客观需求和主观体验。所以,在使用j Query插件的过程中,需根据插件的类别进行深入研究,避免造成Web应用的下降。

4.2 j Query插件的适当应用

目前,j Query插件在使用的过程中,为程序员提供了较多的帮助,尤其是在工作量方面,出现了明显的降低,减少了程序员的劳动强度。但是,任何一个Web应用当中,插件的应用数量都是有限的,不可能无限的加入插件,这将导致Web应用的崩溃。为此,在Web应用的设计过程中,j Query插件的加载数量需得到有效的控制,避免造成页面请求速度的下降,避免造成软件使用体验的下降。引用j Query插件时,需具有针对性的使用,才能针对Web应用产生改善的目的。值得注意的是,很多Web应用都具有特殊的要求,单纯凭借j Query插件一类,并不能实现较大的提升,而是多种插件共同作用,才能为用户带来最佳的体验,促使用户能够长久的保留Web应用,这样才可以带来持续的效益。

5 总结

本文对j Query插件对Web应用的影响展开讨论,从目前的情况来看,j Query插件的应用,促使Web应用进入到了一个新的时期,各方面的表现均是比较积极的。随着时间的推移,很多用户都对Web应用持有肯定的态度,在服务的体验上表现为水平的上升。今后,应针对Web应用的种类、服务效果展开深入的研究,配合优化j Query插件,减少插件加载数量的同时,提高j Query插件的使用效果,以此来实现价值的更大提升。

摘要:在网络迅速发展的今天,关于Web应用的研究不断深化。从客观的角度来分析,Web应用迅速扩大的今天,插件所产生的影响是绝对性的,且在很多方面都产生了较大的积极作用。另一方面,随着插件的泛滥,很多的Web应用都受到了较大的限制,不仅失去了广泛的用户群体,同时在很多方面都遭到了用户的抵制,造成了Web应用的矛盾局面。为此,针对Web应用的特点和需求,有效应用了jQuery插件,实现了Web应用的新进步,净化了插件的应用程度,为用户带来了更多的体验。今后,应针对jQuery插件的应用开展深入的研究,健全Web应用。

关键词:插件,网页,影响,讨论

参考文献

[1]陈印,马红春,夏先进.基于j Query脚本库技术的插件开发方法研究[J].四川职业技术学院学报,2011(6):104-106.

[2]曾满江,李勇文,刘娟,等.提升用户体验的移动图书馆网站优化研究——以四川移动手机图书馆项目为例[J].现代图书情报技术,2012(1):85-91.

[3]林亚明.基于ZK的MVVM与MVP设计模式应用研究[J].重庆文理学院学报:自然科学版,2012(6):72-74+78.

[4]蒋昊晟.基于Google API共享同城生活信息的Web GIS开发[J].常州工学院学报,2010(1):39-44+57.

上一篇:危险驾驶罪的法律下一篇:具象油画的色彩表现