一 Ajax——几种局部刷新技术的对比 （1）JavaScript——动态网页的基础
JavaScript的出现，是动态网页技术的一个里程碑的意义，从此网页结束了单调的展示效果和交互行为
优点：
给html设计人员提供了一种可编程的开发模式
语法清晰
静态网页能实现一些交互行为的动态效果
静态网页能实现一些比较人性化的交互提示效果
网页元素（内容）的动态交互展示
缺点：
并不是所有的浏览器或者浏览器版本完全兼容
不同的浏览器或者版本支持的JavaScript语法不一致
函数等太多功能相对强大但是不好编辑和维护
总结：代码的语法参考了Java和XPath等，很大程度上让JavaScript能轻易入门并且使用。但是浏览器的兼容性是JavaScript的一个死穴，不完全兼容的效果让开发人员焦头烂额，在实际开发中建议——慎用。
（2）Ajax——异步的JavaScript和Xml技术
Ajax的出现，在动态网页的基础上，实现了网页局部内容的刷新效果，它是以JavaScript为基础的一个多种技术的结合体
优点：
语法简单
操作步骤固定，开发入门简单
缺点：
需要开发人员对DOM模型编程有一定的了解
开发过程中不同的浏览器的兼容性能不一致，需要开发人员手工进行调整
开发过程中，绑架了客户端和服务器端的控制器servlet，必须有请求和对应的java类的映射关系才能实现局部请求和响应的流程
总结：做为较成熟的局部刷新技术的鼻祖，ajax给网页人性化交互提供了一种可实现的美好的前景，但是ajax本身对客户端和服务器的强耦合性，让开发人员头疼不已，建议实际开发中——慎用
DWR——web远程调用框架，和DWR的经典logo一样，提供了客户端JavaScript和服务器java类之间的一个桥梁，无缝的结合让开发变的非常有趣
优点：
JavaScript和Java类之间的模拟直接调用
配置、开发固定
配合json等技术进行小数据交互非常方便
缺点：
配置繁琐
绑架客户端和服务器——必须是对应的处理视图和对应的服务器才能进行数据交互，并且服务器必须是java编程语言-客户端必须是JSP，DWR不能跨平台
总结：地球人都知道，dwr是一个非常好用的框架，提供JavaScript和Java之间的通信的功能，让开发人员兴奋不已。尤其是在实际开发中，几乎出现服务器对应的视图进行更换的情况、或者视图迁移到其他的服务器的情况。所以dwr在实际开发中运用相对还是比较广泛的。
但是，如果设计到中大型项目的开发，设计多模块集成开发时，不同模块可能使用不同的编程语言，这样会造成DWR客户端的效果错位。
所以，实际项目开发中，建议酌情使用。
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主要由三部分组成
（1）JQuery核心
——主要实现JQuery操作页面的一些核心方法和功能，如操作页面标签极其属性、操作CSS样式表、操作页面事件、操作Ajax技术、文档处理等等
（2）JQuery UI
——主要实现页面可视化组建的可编程开发的实现
（3）JQuery插件
——对JQuery原有功能的扩展
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
属性名称
propertiesMapV1.0作为属性的“名/值对”对象
key,valueString,ObjectV1.0属性名称，属性值
key,function(index, attr)String,FunctionV1.11:属性名称。
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])方法
概述
访问匹配元素的样式属性。
相关文章
精彩导读
热门资讯
关注我们
