java web开发：ajax技术（五）——锋利的JQuery

一 Ajax——几种局部刷新技术的对比

（1）JavaScript——动态网页的基础

JavaScript的出现，是动态网页技术的一个里程碑的意义，从此网页结束了单调的展示效果和交互行为

优点：

给html设计人员提供了一种可编程的开发模式

语法清晰

静态网页能实现一些交互行为的动态效果

静态网页能实现一些比较人性化的交互提示效果

网页元素（内容）的动态交互展示

缺点：

并不是所有的浏览器或者浏览器版本完全兼容

不同的浏览器或者版本支持的JavaScript语法不一致

函数等太多功能相对强大但是不好编辑和维护

总结：代码的语法参考了Java和XPath等，很大程度上让JavaScript能轻易入门并且使用。但是浏览器的兼容性是JavaScript的一个死穴，不完全兼容的效果让开发人员焦头烂额，在实际开发中建议——慎用。

（2）Ajax——异步的JavaScript和Xml技术

Ajax的出现，在动态网页的基础上，实现了网页局部内容的刷新效果，它是以JavaScript为基础的一个多种技术的结合体

优点：

语法简单

操作步骤固定，开发入门简单

缺点：

需要开发人员对DOM模型编程有一定的了解

开发过程中不同的浏览器的兼容性能不一致，需要开发人员手工进行调整

开发过程中，绑架了客户端和服务器端的控制器servlet，必须有请求和对应的java类的映射关系才能实现局部请求和响应的流程

总结：做为较成熟的局部刷新技术的鼻祖，ajax给网页人性化交互提供了一种可实现的美好的前景，但是ajax本身对客户端和服务器的强耦合性，让开发人员头疼不已，建议实际开发中——慎用

（3）DWR——WEB远程调用框架

DWR——web远程调用框架，和DWR的经典logo一样，提供了客户端JavaScript和服务器java类之间的一个桥梁，无缝的结合让开发变的非常有趣

优点：

JavaScript和Java类之间的模拟直接调用

配置、开发固定

配合json等技术进行小数据交互非常方便

缺点：

配置繁琐

绑架客户端和服务器——必须是对应的处理视图和对应的服务器才能进行数据交互，并且服务器必须是java编程语言-客户端必须是JSP，DWR不能跨平台

总结：地球人都知道，dwr是一个非常好用的框架，提供JavaScript和Java之间的通信的功能，让开发人员兴奋不已。尤其是在实际开发中，几乎出现服务器对应的视图进行更换的情况、或者视图迁移到其他的服务器的情况。所以dwr在实际开发中运用相对还是比较广泛的。

但是，如果设计到中大型项目的开发，设计多模块集成开发时，不同模块可能使用不同的编程语言，这样会造成DWR客户端的效果错位。

所以，实际项目开发中，建议酌情使用。

（4）JQuery

JQuery的口号是：write less,do more

Jquery是继prototype之后又一个优秀的Javascript框架。

优点：

它是轻量级的js库

它兼容CSS3

兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）

jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html内容分离

缺点：操作太简单，让你爱不释手。

总结：jquery的简单易用，尤其新版本中新增的很多酷炫的效果，让开发变的非常精彩，很容易出现过度设计和开发的情况。建议——开发中根据需求使用即可。

二 JQuery的组成

JQuery主要由三部分组成

（1）JQuery核心

——主要实现JQuery操作页面的一些核心方法和功能，如操作页面标签极其属性、操作CSS样式表、操作页面事件、操作Ajax技术、文档处理等等

（2）JQuery UI

——主要实现页面可视化组建的可编程开发的实现

（3）JQuery插件

——对JQuery原有功能的扩展

三 JQuery核心方法

（1）JQuery选择器(具体更详细的选择器结构请参考本空间中在资源jQuery1.10.3_API_ZH.chm)

JQuery的选择器参考了CSS以及XPath等语言的语法结构

比较常用的选择器有

——标签选择器

概述

根据给定的元素名匹配所有元素

示例

描述:

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

 

——ID选择器

根据给定的ID匹配一个元素。

如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。

 

示例

描述:

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

——类选择器

概述

根据给定的类匹配元素。

描述:

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div><div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

 

（2）JQuery操作HTML标签属性(具体更详细的操作请参考本空间中在资源jQuery1.10.3_API_ZH.chm)

——attr()方法

概述——attr(name|properties|key,value|fn)

设置或返回被选元素的属性值。

参数

nameStringV1.0

属性名称

properties MapV1.0

作为属性的“名/值对”对象

key,value String,ObjectV1.0

属性名称，属性值

key,function(index, attr) String,FunctionV1.1

1:属性名称。

2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

 

示例

参数name 描述:

返回文档中所有图像的src属性值。

jQuery 代码:

$("img").attr("src");

参数properties 描述:

为所有图像设置src和alt属性。

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:

为所有图像设置src属性。

jQuery 代码:

$("img").attr("src","test.jpg");

参数key,回调函数 描述:

把src属性的值设置为title属性的值。

jQuery 代码:

$("img").attr("title", function() { return this.src });

 

（3）JQuery操作CSS样式(具体更详细的样式操作请参考本空间中在资源jQuery1.10.3_API_ZH.chm)

——css(name|pro|[,val|fn])方法

概述

访问匹配元素的样式属性。

jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

 

参数

nameStringV1.0

要访问的属性名称

nameArrayV1.9

一个或多个CSS属性组成的一个数组

propertiesMapV1.0

要设置为样式属性的名/值对

name,valueString, NumberV1.4

属性名,属性值

name,function(index, value)String,FunctionV1.0

1:属性名

2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

示例

 

参数name 描述:

取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

参数properties 描述:

将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({ "color": "#ff0011", "background": "blue" });

参数name,value 描述:

将所有段落字体设为红色

jQuery 代码:

$("p").css("color","red");

参数name,回调函数 描述:

逐渐增加div的大小

jQuery 代码:

  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

 

（4）JQuery操作事件

——blur([[data],fn])

概述

当元素失去焦点时触发 blur 事件。

这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的

 

参数

fnFunctionV1.0

在每一个匹配元素的blur事件中绑定的处理函数。

[data],fnString,FunctionV1.4.3

data:blur([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的blur事件中绑定的处理函数。

 

示例

 

描述:

触发所有段落的blur事件

jQuery 代码:

$("p").blur();

描述:

任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。

jQuery 代码:

$("p").blur( function () { alert("Hello World!"); } );

（5）JQuery操作展示效果

——toggle([speed],[easing],[fn])

概述

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

参数

fn,fn2,[fn3,fn4,...]Function,....V1.0

fn:第一数次点击时要执行的函数。

fn2:第二数次点击时要执行的函数。

fn3,fn4,...:更多次点击时要执行的函数。

[speed] [,fn]String,FunctionV1.0

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

fn:在动画完成时执行的函数，每个元素执行一次。

[speed], [easing ], [fn ] String,String,FunctionV1.4.3

speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"

easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn:在动画完成时执行的函数，每个元素执行一次。

switch BooleanV1.3

用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

示例

 

无参数描述:

对表格切换显示/隐藏

jQuery 代码:

$('td).toggle();

fn,fn2描述:

对表格的切换一个类

jQuery 代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

speed 描述:

用600毫秒的时间将段落缓慢的切换显示状态

jQuery 代码:

$("p").toggle("slow");

speed,fn 描述:

用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。

jQuery 代码:

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

switch参数描述:

如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

jQuery 代码:

$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}      

 

（6）JQuery操作Ajax

——详细操作请参考jQuery1.10.3_API_ZH.chm

 

四 JQuery UI

——详细操作请参考ui.jquery.com

五 JQuery插件

——详细操作请参考www.jquery.com