使用jQuery,第3部分:用jQuery和Ajax构建富Internet应用程序

本文配套源码

简介

最近这几个月以来,JQuery 受欢迎的指数迅速攀升,现已成为 Web 开发人员首选的 JavaScript 库。与此同时,人们对富 Internet 应用程序(Rich Internet Application,RIA)的应用和需求也在迅速增长,并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格,还是薪水册和电子邮件应用程序,现在都在浏览器中再现了类似于桌面的体验。随着这些应用程序数量的增多和功能的日益复杂,JavaScript 库将会变得越来越重要,因为它是构建这些应用程序的坚实基础。JQuery 无疑成为了开发人员最佳选择。本系列文章深入探索了 jQuery,并提供了坚实的基础。开发人员借助这个基础就可以快速轻松地构建自己的 RIA。

在本系列 之前的一篇文章 中,您了解了用来构建 RIA 以及为页面添加交互性的三个基本组件。第一个模块是 Event 模块,借助此模块,能捕获用户对页面的任意交互并以编程的方式进行响应。比如,您可以向按钮点击、鼠标移动等事件附加代码。下一个模块是 Attributes 模块,它解释了如何在页面元素上获得/设置值,以及如何将其作为带有变量的数据对象。这些值包含了决定为用户提供何种响应的大部分信息。最后,您还看到了 如何进行 CSS 处理,以及如何在不重新加载页面的情况下更改页面上任意元素的布局、颜色、字体等。了解这三个模块之后,就等于掌握了交互 Web 页面的三个基本元素 — 获取用户交互(Event)、收集信息(Attribute)以及在事件和信息基础上提供反馈(CSS)。

在本文中,将对交互 Web 页面的这三个基本元素进行更进一步的探究,提供当今高级 Web 应用程序必备的 “酷” 效果和特征。这些附加的模块对提供 RIA 而言并不是至关重要的,但这些效果和特征会给用户留下深刻印象,并且还会极大地扩展 RIA 的可用范围和特性。您将看到的第一个模块是 Effects 模块,它包含很多特性,比如隐藏元素、随处移动元素、淡入淡出元素等。换言之,这些都是让 Web 页酷起来的 “亮点”。最后一个要讨论的模块是 Asynchronous JavaScript + XML (Ajax) 模块。大多数人都将该模块等同为 RIA。Ajax 让 Web 应用程序无需重载页面就能与服务器进行交互、向服务器传递信息并从中获取信息(与 Web 上的一些意见相反,Ajax 不 单纯是一个很酷的 JavaScript 动画工具)。您将发现 jQuery 提供了极其简单易用的 Ajax 工具。实际上,jQuery 使 Ajax 的使用与调用其他 JavaScript 方法一样简单。

本文中的示例应用程序是个总结,展示了 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中。我将向这个示例程序添加一些效果使其更加漂亮,而且更重要的一点是,我将添加一些 Ajax 代码,以便无需重载页面邮件应用程序就能显示信息。

Effects 模块

从其名字往往容易得出这样的结论,Effects 模块只包含一些动画和效果,而这些动画和效果往往是一些 “正规” 的 Web 页面所竭力避免的。但实际情况并非如此。几乎所有的应用程序都会遇到这样的情况,即某个页面元素需要隐藏或其视图应该根据另一个页面元素的状态进行切换。这类更改对于一个 RIA 而言非常重要,因为它们让您能够加载某个页面的所有页面元素,然后通过隐藏/显示特定的元素只显示所需的信息。重载页面的方式并不可取。比如一个具有两个选项的组合框,一个选项是隐藏 div,一个选项是显示此 div。很显然,与更改组合框并重载页面隐藏/显示 div 相比,用客户端代码隐藏/显示此 div 更简单和高效。而仅隐藏/显示还是要让它淡入/淡出,则完全取决于您。

如上所述,最基本的效果函数是 show()和 hide()函数。这非常直观;它们可分别用来显示和隐藏页面上的某个元素。

清单1. 隐藏和显示函数

// shows every <p> on the page
$("p").show();

// hides every <p> on the page
$("p").hide();

// hides every other <p> on the page
$("p:odd").hide();

除了这些基本操作,利用 show()和 hide()这两个函数,还能更多地控制页面元素如何显示和隐藏。相关文档将 hide()描述为 “优美” 的显示/隐藏,对于 show(),就是综合淡入和滑出的效果。

在开始深入探讨一些例子之前,不妨回过头来看看传递给这些效果函数的参数。每个函数(除了通用的 show()和 hide()函数之外)都允许在效果完成时传入要调用的速度和函数。速度用来控制效果出现的快慢。这个参数可以是一个 "slow"、"fast"或 "normal"字符串。此外,如果需要精确控制动画时间,那就需要用参数指定毫秒数。Effects 函数的第二个参数本身就是一个函数,此函数在效果完成后调用。如果想要将几个效果组合成一个较大规模的效果,这一点将非常重要,因为利用它,能够可靠地控制一个效果何时完成,下一个效果何时开始。

清单2. 复合效果

// the img with an ID of "picture" should start hidden
// when the "showPicture" button is pressed, show the img with an ID of "picture"
// and animate it, so it appears quickly in a fade In and slide out, and when
// it's done being shown, show the caption of the picture, which is
// always in the span right after the <img> tag 

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// jQuery code inside the document.ready() function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
  $("#picture").show("fast", function(){
    $("#picture").next().show();
  });
});

// notice how it took more text to describe what you want to happen than it took
// to actually code it!

时间: 2024-12-31 00:49:18

使用jQuery,第3部分:用jQuery和Ajax构建富Internet应用程序的相关文章

JQuery使用index方法获取Jquery对象数组下标的方法

  本文实例讲述了JQuery使用index方法获取Jquery对象数组下标的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

jquery.lazyload 实现图片延迟加载jquery插件

什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil

控件-怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度?

问题描述 怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度? 企业的代码是 .multiselect(); 库有用到jquery.jqueryui.jquery multiselect 试过在方法中,加height,minheight,但这个高度改变的是下拉列表的高度,不是控件的高度. 要怎么改变控件本身的高度呢? 控件的源码是 $.widget("ech.multiselect", { // default options options: { he

jQuery温习篇---强大的JQuery选择器

   学习jQuery已经有1年多的时间了,但是一直由于做WinForm程序开发没有经常实践.现在又开始重拾WebForm开发.写几篇jQuery系列,温习下jQuery框架的知识. 在jQuery出世以来,它取得很大的成就和认同.JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右.它能让你方便简洁的写出漂亮的动画效果.实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为.它的优点在于轻量级.简单易学.易扩展.跨浏览器和网上拥有大量的jQu

jQuery显示隐藏密码插件jquery.toggle-password演示

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery显示隐藏密码插件jquery.toggle-password演示_dowebok</title> <style> * { margin: 0; padding: 0; } body { font: 14px Arial, san

初学不会jquery,请教js和jquery的转换

问题描述 初学不会jquery,请教js和jquery的转换 $("signin").addEvents({ 'click':function(e){ new Request({ url:'<{link app=b2c ctl=site_member act=signin}>', data:'response_json=true', onSuccess:function(rs) { try{ rs = JSON.decode(rs); }catch(e){} if(rs.e

jquery邮箱 密码验证实例(jquery 验证插件)

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

jquery事件机制扩展插件 jquery鼠标右键事件。_jquery

jquery其实本身的事件机制就很完善了,包括了单击,双击,鼠标移入,鼠标移出等.但是却少了一个做事件.就是鼠标右击事件.当然大家也是直接用侦听鼠标按下事件,然后通过if来判断执行相应的函数.造成鼠标右击事件的效果. 但是这不是我想要的,我想要的似乎这个事件可以跟其它事件比如单击事件一样.可以被方便的使用,而不需要每次都去判断.这里通过编写jquery插件的形式扩展,让这个方法可以直接使用$().rightClick();来使用. jQuery的插件主要分3种类型 1.封装对象方法的插件 (这种