jQuery用法和结合struts2.0使用
一、jQuery的基本用法:?
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名
的有Prototype、YUI、?jQuery、mootools、Bindows以及国内的JSVM框架等，
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由?John?Resig?于?2006?年初创建
的，它有助于简化?JavaScript?以及Ajax?编程。
它具有如下一些特点：
???1.?代码简练、语义易懂、学习快速、文档丰富。
???2.?jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
???3.?jQuery支持CSS1-CSS3,以及基本的xPath。
???4.?jQuery是跨浏览器的，它支持的浏览器包括IE?6.0+,?FF?1.5+,?Safari?2.0+,?Opera?9.0+。
???5.?可以很容易的为jQuery扩展其他功能。
???6.?能将JS代码和HTML代码完全分离，便于代码和维护和修改。
???7.?插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、
tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
使用方法(同prototype)
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：<script?type="text/javascript"?src="js/jquery.js"></script>
引入之后便可在页面的任意地方使用jQuery提供的语法。
三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml ?
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用?jQuery?简化?Ajax?开发》(说明：以
上文档都放在了【附件】中)
四、语法总结和注意事项
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等
方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
如:
$("#msg").html();-->通过ID
$("div").html();?$("input").val();?-->通过元素名(jQuery获取的是一个集合)
$("div?p");?????????????-->第一行代码得到所有<div>标签下的<p>元素。
$("div.container")??????-->第二行代码得到?class为container的<div>元素???
$("div?#msg");??????????-->第三行代码得到<div>标签下面id为msg的元素。
$("table?a",context);???-->第四行代码得到context为上下文的table里面所有的连接元素。???
2、jQuery对象与dom对象的相互转换
2.1
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，普通的dom对
象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
2.2
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，
一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以
使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获
取，要注意，eq返回的是jquery对象，而?get(n)和索引返回的是dom元素对象。
如要获取第三个?<div>元素的内容。有如下两种方法：
$("div").eq(2).html();??????????????//调用jquery对象的方法
$("div").get(2).innerHTML;???????//调用dom的方法属性
3、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html();??????????????//返回id为msg的元素节点的html内容。
$("#msg").html("<b>new?content</b>");??????
//将“<b>new?content</b>”?作为html串写入id为msg的元素节点内容中,页面显示粗体的new?
content
$("#msg").text();??????????????//返回id为msg的元素节点的文本内容。
$("#msg").text("<b>new?content</b>");??????
//将“<b>new?content</b>”?作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new?
content</b>
$("#msg").height();??????????????//返回id为msg的元素的高度
$("#msg").height("300");???????//将id为msg的元素的高度设为300
$("#msg").width();??????????????//返回id为msg的元素的宽度
$("#msg").width("300");???????//将id为msg的元素的宽度设为300
$("input").val(");???????//返回表单输入框的value值
$("input").val("test");???????//将表单输入框的value值设为test
$("#msg").click();???????//触发id为msg的元素的单击事件
$("#msg").click(fn);???????//为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有这两种调用方法
4、
几个有用的jQuery方法:
0)
集合处理功能????
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提
供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})??????
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})??????
//实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})?????????????
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
1)
$.browser.浏览器类型：检测浏览器类型。有效参数：safari,?opera,?msie,?mozilla。如检测是
否ie：$.browser.isie，是ie浏览器则返回true。
2)
$.each(obj,?fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each(?[0,1,2],?function(i,?n){?alert(?"Item?#"?+?i?+?":?"?+?n?);?});
等价于：
var?tempArr=[0,1,2];
for(var?i=0;i<tempArr.length;i++){
???????alert("Item?#"+i+":?"+tempArr[i]);
}
3)
也可以处理json数据，如
$.each(?{?name:?"John",?lang:?"JS"?},?function(i,?n){?alert(?"Name:?"?+?i?+?",?Value:?"?
+?n?);?});
结果为：
Name:name,?Value:John
Name:lang,?Value:JS
4)
$.map(array,?fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返
回生成的新数组。
如：
var?tempArr=$.map(?[0,1,2],?function(i){?return?i?+?4;?});
tempArr内容为：[4,5,6]
var?tempArr=$.map(?[0,1,2],?function(i){?return?i?>?0???i?+?1?:?null;?});
tempArr内容为：[2,3]
5)
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：
$.merge(?[0,1,2],?[2,3,4]?)???????//返回[0,1,2,3,4]
6)
$.trim(str)：删除字符串两端的空白字符。
如：
$.trim("??hello,?how?are?you????");????//返回"hello,how?are?you??"
5、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background");??????????????//返回元素的背景颜色
$("#msg").css("background","#ccc")???????//设定元素背景为灰色
$("#msg").height(300);?$("#msg").width("200");???????//设定宽高
$("#msg").css({?color:?"red",
