一 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])方法
概述
访问匹配元素的样式属性。
参数
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();
$("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");
}
);
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
speed 描述:
用600毫秒的时间将段落缓慢的切换显示状态
jQuery 代码:
$("p").toggle("slow");
$("p").toggle("slow");
speed,fn 描述:
用200毫秒将段落迅速切换显示状态,之后弹出一个对话框。
jQuery 代码:
$("p").toggle("fast",function(){
alert("Animation Done.");
});
$("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