admin 管理员组文章数量: 1184232
2024年3月12日发(作者：异步透传)
基于ＪＱｕｅｒｙ框架技术开发的ＷＥＢ应用
，
ｂ 。
沿
口周志雄
Ｏ
（西华大学四川・成都６１００３９）
摘要：阐述ＪＱｕｅｒｙ框架的概念、组成和特点，研究ＡＪＡｘ异步的技术，以ＪＱｕｅｒｙ框架为例，说明如何使用框架
开发ＡＪＡＸ应用程序。
关键词：ＪＱｕｅｒｙ框架ＡＪＡＸ
中图分类号：ＴＰ３９３ 文献标识码：Ａ 文章编号：１００７．３９７３（２０１３）００１．０９１．０２
１前言
２ ＪＱｕｅｒｙ的组成及特点
ＪＱｕｅｒｙ是继ｐｒｏｔｏｔｙｐｅ之后又一个优秀的Ｊａｖａｓｃｒｉｐｔ框架。
２．１ ＪＱｕｅｒｙ的组成
它是轻量级的
．
ｊｓ库（压缩后只有２１ｋ），它兼容ＣＳＳ３，还兼容各
ＪＱｕｅｒｙ是一个兼容多浏览器的ｊａｖａｓｃｒｉｐｔ库，是免费的、
种浏览器（ＩＥ ６．０＋，ＦＦ １．５＋，Ｓａｆａｒｉ ２．Ｏ＋，Ｏｐｅｒａ９．０＋）。ＪＱｕｅｒｙ使
开源的，使用ＭＩＴ许可协议。ＪＱｕｅｒｙ的语法设计可以使开发
用户能更方便地处理ＨＴＭＬ ｄｏｃｕｍｅｎｔｓ、ｅｖｅｎｔｓ、实现动画效 者更加便捷，例如操作文档对象、选择ＤＯＭ元素、制作动画效
果，并且方便地为网站提供ＡＪＡＸ交互。ＪＱｕｅｒｙ还有一个比 果、事件处理、使用ＡＪＡＸ及其他功能。除此以外，ＪＱｕｅｒｙ提
较大的优势是，它的文档说明很全，而且各种应用也说得很详
供的ＡＰＩ让开发者编写插件。其模块化的使用方式使开发者
细，同时还有许多成熟的插件可供选择。ＪＱｕｅｒｙ能够使用户
可以很轻松的开发出功能强大的静态或动态网页。
的ｈｔｍｌ页保持代码和ｈｔｍｌ内容分离，也就是说，不用再在ｈｔｍｌ
ＪＱｕｅｒｙ自身带有显示和隐藏元素的一些特效以外，可以
里面插入一堆ｉＳ米调用命令了，只需定义ｉｄ即可。 通过插件实现更多功能，如表单验证、Ｔａｂ导航、拖放效果、表
ＤＩ＝０； ／／Ｄ１灯亮
Ｄ４＝０：
）
）
ｅｌｓｅ ｅｌｓｅ
｛
｛
Ｄ＝１： ／／Ｄ１灯灭
Ｄ４＝１：
、
８０）：
ｄｅｌａｙ（８０）；
＝Ｏ）
ｉｆ（Ｋ５＝＝０）
｛
ＤＯ＝１；
Ｄ１＝１；
Ｄ２＝ｌ；
Ｄ３＝ｌ；
）
）
）
４结语
本文采用ＡＴ８９Ｃ５１单片机进行单台电动机控制器和多台
电动机控制器的制作，并用Ｃ语言进行软件设计开发，该控制
器在Ｐｒｏｔｅｕｓ软件中进行仿真，取得了预期的效果。
参考文献：
【Ｉ】朱传祥．一种定气圈细纱小样机的研制【Ｄ】．青岛大学，２００６．
【２】 龚运新，等．单片机Ｃ语言项目式教程【Ｍ】．北京：北京邮电
）
大学出版社，２０１２．
ｄｅｌａｙ（８０）；
【３】唐正．Ｐｒｏｔｅｕｓ在单片机教学中的应用【Ｄ】．华中科技大学，
ｉｆＫ４＝＝０）
２００８．
｛
——
斟协论坛・２０１３年第０ｌ期（下）——
格排序、树形菜单、图像特效以及ＡＪＡＸ上传等，极大地方便了
＜／ｓｃｒｉｐｔ＞
开发人员快速开发动态效果网页。ＪＱｕｅｒｙ技术已经被应用于
Ｇｏｏｇｌｅ、Ｄｅｌｌ、ＮＢＣ、ＣＢＳ等知名网站。
例子二：
＜ｓｃｒｉｐｔ ｔｙｐｅ＝’’ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＇’＞
ｆｕｎｃｔｉｏｎ ＰｕｓｈＧｅｔｖａｌ（ｔｈｉｓＯｂｊ，ｔｉｓＯｂｊｌＤ）＜
ｖａｒ￥ｔｄ一￥（ｔｈｉｓＯｂｊ）．ｐａｒｅｎｔｓ（’ｔｒ）．ｃｈｉｌｄｒｅｎ（’ｔｄＩ）：
导入ＪＱｕｅｒｙ框架文件方法如下：
＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ＝”路径／ｊｑｕｅｒｙ．ｊｓ”＞＜／ｓｃｒｉｐ・
ｔ＞
ｉｆ（ｔｉｓＯｂｊＩ￣
ｖａｒ ｗ
＿
＂．．＂）｛
ｉｄ＝￥ｔｄ．ｅｑ（０）．ｉｆｎｄ（”ｉｎｐｕｔ”）．ｖａｌ０； ２．２ ＪＱｕｅｒｙ的特点
ＤＯＭ元素选择，基于开源的选择器引擎ｓｉｚｚｌｅ：ＤＯＭ元素
遍历及修改；事件处理；动态特效；ＡＪＡＸ；通过插件开扩展；方
便的工具．例如浏览器版本判断；渐进增强；链式调用；多浏览
ｖａｒ ａ ｎａｍｅ＝￥ｔｄ．ｅｑ（５）．ｉｆｎｄ（”ｓｅｌｅｃｔ”）．ｖａｌ０；
￥．ａｊａｘ（｛
妙ｐｅ：’ｐｏｓｔ＇，
ｕｒｌ：’．．／Ｉ．／．．ｐｈｐ。．
ａｓｙｎｅ：ｆａｌｓｅ，
ｄａｔａＴｙｐｅ：’ｔｅｘｔ＇，
器支持，支持Ｉｎｔｅａｃｔｒ Ｅｘｐｌｏｒｅｒ ６．０＋、Ｏｐｅｒａ ９．０＋、Ｆｉｒｅｆｏｘ ２＋、Ｓａ－
ｆａｒｉ ２．０＋、Ｃｈｒｏｍｅ １．０＋。
３ＡＪＡＸ技术介绍
ａｊａｘ是Ａｓｙｎｃｈｒｏｎｏｕｓ ＪａｖａＳｃｒｉｐｔ ａｎｄ ＸＭＬ（异步ＪａｖａＳｃｒｉｐｔ
和ＸＭＬ）的缩写，是一种创建交互式网页应用的网页开发技术。
ｎａｍｅ｝，
Ａｊａｘ的开源脚本框架，ＪＳｅｒ。以下代码演示了如何使用
ＪＳｅｒ发送一个异步的ＡＪＡＸ ＰＯＳＴ请求：ＪＳｅｒ．ｕｒｌ（“ｓａｖｅ．ｊｓｐ”）．ｓｅｔ
（｛
ｄ，ａｎａｍｅ：ａ
ｄａｔａ：｛ｆａｄａｎｅｘｔ：ｔｉｓＯｂｊｌＤ，ｗｉｄ：ｗ
ｉ
＿＿
ＳＵＣＣＥＳＳ：ｆｕｎｃｔｉｏｎ（ｍｓｇ）｛ｉｆ（ｍｓｇ）｛
ａｌｅｒｔ（ｍｓｇ）；
ｒｅｔｕｒｎ ｆａｌｓｅ；｝
ｅｌｓｅ｛ ａｌｅｒｔ（””）；
ｋｅｙ：“ｔｅｓｔｌ”．ｎａｍｅ：“ｔｅｓｔ２” 向ｓａｖｅ．ｊｓｐ程序发送两个
ＰＯＳＴ参数，分别是ｋｅｙ＝ｔｅｓｔｌ，ｎａｍｅ－－－ｔｅｓｔ２｝／
））．ａｊａＸ（｛／／执行ＡＪＡＸ请求
￥（ｔｈｉｓＯｂｊ）．ｈｉｄｅ（）；
ｒｅｔｕｒｎｔｒｕｅ；｝），ｅｒｒｏｒ：ｆｕｎｃｔｉｏｎ（）｛｝，
））：
｝
５总结
ｍｅｔｈｏｄ：‘ｐｏｓｔ’，／／ＰＯＳＴ方式发送请求
ｓｕｃｃｅｓｓ：ｆｕｎｃｔｉｏｎ（ａ）｛Ｉ／ＡＪＡＸ请求成功时执行此回调函数
ａｌｅｒｔ（ａ）；／／弹出返回提示）））：
ＡＪＸ主要包含的技术：Ａ（１）ＷＥＢ标准ＸＨＴＭＬ＋ＣＳＳ的表 ＡＭＸ技术已经逐渐风靡网页设计行业，它采用传统技术
示。（２）使用ＤＯＭ进行动态显示及交互。（３）使用ＸＭＬ和ＸＳＬＴ 运用新的思维来实现用户良好体验的一种ＷＥＢ应用模型。
进行数据交换及相关操作。（４）使用ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ进行异 ＪＱｕｅｒｙ框架可以非常方便快捷的开发网站，网站设计结构清
步数据查询、检索。（５）使用ｊａｖａｓｃｒｉｐｔ将所有的东西绑定在一起。
晰，后期维护更加容易。
４使用ＪＱｕｅｒｙ框架进行Ａ Ｘ开发应用实例
通过ＡＪＡＸ事件及ＪＱｕｅｒｙ框架的异步处理方法，实现在
不刷新页面的前提下，弹出网页对话框进行提示操作。
例子一：
＜ｓｃｒｉｐｔ ｙｐｅ＝”ｔｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ’’＞
ｆｕｎｃｔｉｏｎ Ｏｎｓａｖｅ０｛
ｖａｔ ｓ－ｃｏｎｆｉｒｍ（．．）；
ｉ ！ＳＶ）
｛ｒｅｔｕｍｆａｌｓｅ；｝
ｖａｔ ｐａｒｍ＝￥（‘ａ＃ｆｒｍ’）．ｆｏｒｍＳｅｒｉａｌｉｚｅ（）；
ｐａｒａｍ＝ｐａｒａｍ＋‘＆ｅｄｉｔｓａｖｅ＝ｌ’；
￥．ａｊａｘ（｛
ｙｐｅ：‘ｐｓｏｔ’，ｔ
ｕｒｌ：’．．ｆ．－｛．．ｐｈｐ’、
ａｓｙｎｃ：ｆａｌｓｅ，ｄａｔａＴｙｐｅ：‘ｔｅｘｔ’，
ｄａｔａ：ｐａｒａｍ，
ｓｕｃｃｅｓｓ：ｆｕｎｃｔｉｏｎ（ｍｓｇ）｛
ｉｆ（ｍｓ￣－－＝０）｛
ａｌｅｒｔ（“”）；
ｒｅｔｕｍ ｆａｌｓｅ；｝
ｅｌｓｅ｛ａｌｅｒｔ（“”）；
ｒｅｔｕｒｎｔｒｕｅ；）），
ｅｒｒｏｒ：ｆｕｎｃｔｉｏｎ０｛｝，））；
｝
——
斟协论坛・２０１３年第０ｌ期（下）——
版权声明：本文标题：基于JQuery框架技术开发的WEB应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710239700a563853.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论