jquery入门到精通.pdf

JQuery入门到精通系列第一篇：Hello JQuery2010.1JQuery入门到精通系列第二篇：选择器的使用.4JQuery入门到精通系列第三篇：D0M操作.6JQuery入门到精通系列第四篇：Jquery的事件.10JQuery入门到精通系列第五篇：jquery实现动画2010.15JQuery入门到精通系列第六篇：jquery使用ajax交互操作.19Jquery 全选 checkbox.30验证邮箱和身份证号VIS.30分享10个基于jQuery的文本编辑器与独立免费的JS网页编辑器.32JQuery操作iframe父页面与子页面的元素与方法.33jValidate表单检测插件，基于jQuery的表单验证插件.34jquery.form,js 应用 jquery 表单验证 Form 插件例子.35jQuery插件星级评分,Jquery实现星级评分效果.40简简单单使用正则表达式提取图片地址（img的src值）.42下面介绍使用 JQUERY 获取 text,areatext,radio,checkbox,select 值的方法.43jquery弹出对话框组件下载，看下这个Jquery模态对话框终极版效果.47jQuery s3Slider插件实现产品效果炫丽，非常不错.48jQuery实现分页功能，使用PagedTable插件.51jQuery 插件之 pop弹出框.52学习jquery分享资源站.52最强大最好最全的javascript验证表单的例子.52JQuery入门到精通系列第一篇：Hello JQuery2010第一个JQuery程序：head runat二server”script type二text/javascript”$(document).ready(function()alert(hello world，);)；首先要导入jquery库文件/script在 JQuery 中$代表的是 JQuery,$(document)等价于 JQuery(document)o$(document).ready(function()/*.*/)；上面这段代码会在以后的JQuery代码中经常用到。它类似于JavaScript的 window,onload();在文档加载完成后会执行function()中的内容。但它们之间又有细微 的不同之处：a.执行时机不同：window,onload()是等待页面所有内容加载完成后被触发。而$(document).ready();是等待页面中DOM元素绘制完成后被触发。如果页面中有大量图片，window,onload()是等待所有图片都显示完成后再被触发；而$(document),ready();是页面中HTML生成完成后就被触发，可以此时图片还没来得及显示 出来。b.编写个数不同：如果页面中有多个$(document),ready(),那这些代码都能被执行。如：$(document).ready(function()alert(hello world，);)；$(document).ready(function()alert(，hello again，);)；执行结果：会依次弹出两个提示框。如果页面中有多个window,onload(),那只有最后一个的代码会被执行如：window.onload=function()alert(/zhello world);；window.onload=function()alert(/zhello again);执行结果：只会弹出一个提示框“hell。again”。四、稍微复杂的点JQue可程序/scriptscript type=text/javascript”)$(document).ready(页面加载执行function()$(#btn).click(/绑定按钮点击事件,$(#btn)代表id是btn的DOM对 象。function()$(#dd).html($(枇xt).val();将文本框中的内容写入 id二dd的 div中去。)；)；div id=dd“/div执行的效果是：当点击按钮的时候会在div中显示文本框中的内容(原创：灰灰虫的家 http: 学好。学习JQuery不要被它纷繁复杂的表现特效所迷惑，特效你是学不完的，但“万变不离其宗”，我们需要学习的是JQuery中“根本的东西”和“相对稳定的东西”，并熟练应用，然后“以 不变应万变”，达到掌握JQuery的目的。文章来 自学T 网：http: 象。$(标记名称)相当于document.getElementByTagName(标记名称)，是通过元素名称来获 取元素组。2.隐式迭代$(标记名称).css(/zbackground-color/z,/zred/z);“$(标记名称)”代表页面中一组元素；$(标记名称).css(background-colorred)则是为这组元素中每个元素的样式都加上 红色背景。JQuery自动迭代每个元素，这就免去了我们编写代码编历每个元素对象的操作了。3.无需判断对象是否存在如果页面上不存在 id 为 test 的 D0M 元素，$(#test).css(background-color,red)不会产生任何异常，而 document.getElementByld(/ztest/z).style.backgroundColor=，red 就会产生未找到对象的异常。JQuery入门到精通系列第二篇：选择器的使用JQuery选择器的分类：基本选择器，层次选择器，过滤选择器，表单选择器一、基本选择器：1.#ID选择器：根据给定的ID匹配一个元素$(#one)选取id为one的元素$(#one).css(backgroundbbffaa);图12.class选择器：根据class名选择匹配的元素$(.mini)选取 class 为 mini 的元素$(.mini).css(background,#bbffaa);图23.标签选择器：根据标签名选择元素$(div)选取所有div元素$(div).css(background,#bbffaa);图34.*选择器：选择所有的元素$(*)选取所有的元素$(*).css(background,#bbffaa);图4(包括body在内的所有元素)5.selectorl,selector2,selectors.selectorN：返回指定选择器的元素$(span,枇wo)选取所有的span标签元素和id二two的元素。$(span,#two).css(background,#bbffaa);图5文章来自学 IT 网：http: descendant)：选取 ancestor 元素后所有的 descendant 元素：$(body div)：选取body元素下所有的div元素$(body div).css(background,#bbffaa);图6(外层的DIV和内层的DIV 一起都被选中，即页面body中的有的DIV一起被选中)2.$(parent child)：选取 parent 元素下的第一级 child。$(body div)：选取body元素下所有的div元素$(body div).css(background,#bbffaa);图7(只选择body下第一级DIV元素)三、过滤选择器(一)基本过滤1.:fist选取第一个元素$(div:first)：选取所有div中的第一个$(div:first).css(background,#bbffaa);图82.:last选取最后一个元素$(div:last)：选取所有div中的最后一个$(div:last).css(background,#bbffaa);图93.:not(selector)除去指定的选择器外的元素$(，div:not(.one)：选取 class 不是.one 的 div 元素$C div:not(.one)，).css(background,#bbffaa);图10文章来自学 IT 网：http: id=dd);2.插入节点：假设页面中HTML代码：p我想说：JQuery 代码：$(p).append(b您好/b);运行结果为：p 我想说:您好 等价于$(您好).appendTo(zzpz，);$(p).prepend(您好);运行结果为:b您好/b我想说:等价于$(您好).prependTo(p);$(p).after(b您好);运行结果为:我想说:您好/b等价于$(“您好/b).insertAfter(p);$(p).before(b您好/b)；运行结果为：b您好/bp我想说：/p等价于$(b您好).insertBefore(p);实现节点移动操作：页面代码：你最喜欢的水果是?li title苹果苹果橘子/li菠萝JQuery 代码：$(ul li:eq(l)/z).before($(zzul li:eq(2);或$(ul li:eq(2).before($(ul li:eq(l)/z);运行结果：你最喜欢的水果是？苹果菠萝橘子3.删除节点：$(ul li:first).remove();返回被移除的元素对象，把列表中的第一个元素删除掉$(ul li:first),empty。；把列表中第一个元素项内容清空，但保留元素。4.复制节点：$(this).clone().appendTo(ul);复制当前节点并追加到ul元素中。$(this).clone(true).appendTo(z/ul/z);复制当前节点并追加到 ul 元素中。上面第一种方式中，只把元素内容复制过去，而第二种方式clone(true)能够把元素内容和 元素行为(事件)一起复制过去。5.替换节点：$(p).replaceWith(你喜欢的水果：);还可以使用 replaceAll(),replaceAll()只是颠倒 replaceWith()的操作。$(你喜欢的水果：).replaceAll(p);6.包装节点：就是在元素的外部再套一层元素$(zzpz/).wrap(zzzz);运行结果：b您最喜欢的水果：$(/zp/z).wraplnner(/z/z);运行结果：您最喜欢的水果：$(p).wrapAH(bX/b)；把所有的元素都包括在一个标签对中。如HTML代码如下：您最喜欢的水果：P您最不喜欢的水果：JQuery 代码：$(p).wrap(bX/b);运行结果:您最喜欢的水果：您最不喜欢的水果：$(p).wrapAH(bX/b);运行结果:您最喜欢的水果：P您最不喜欢的水果：二、属性操作：1.获取属性:使用attr(属性名)方法var$title=$(p).attr(title);2.设置属性：使用attr(属性名，属性值)方法$(p).attr(title，这是新设的属性);$(p).attr(title:mytitle”,name:test);3.删除属性：$(p).removeAttr(title);三、样式操作:1.获取样式和设置样式：var p class=$(p).attr(class);获取p元素的 class 值$(p).attr(class,bluestyle);设置p元素的 class 值为.bluestyle 样式，在替换 原来class设置的样式2.追加样式:使用addClassO来实现$(p).addClass(greenstyle);在p元素原有的class样式的基础上再追 加.greenstyle 样式运行结果：p class二bluestyle greenstyle”请选择你喜欢的水果/p会合并bluestyle和greenstyle两种样式，如果二者样式发生冲突，后者会覆盖前者。3.移除样式：使用removeClass()来实现$(p).removeClass(bluestyle);移除p元素中值为 bluestyle 的 class运行结果：p class二greenstyle”请选择你喜欢的水果/p如果要把bluestyle和greenstyle两种样式全都移除掉可以有以下三种写法：$(p).removeClass(bluestyle).removeClass(greenStyle);$(p)removeClass(bluestyle greenstyle);$(p).removeClass();/移除所有的 class 样式。4.切换样式：使用toggleClass(),如果不存在此样式，就添加此样式；如果已存在此样式 就删除此样式。$(p).toggleClass(otherstyle);运行结果：如果开始时是这样：p class=bluestyle greenstyle”请选择你喜欢的水果/p运行后就变为p class二bluestyle greenstyle another”请选择你喜欢的水果/p如果开始时是这样：p class二bluestyle greenstyle another”请选择你喜欢的水果/p 运行后就变为p class=bluestyle greenstyle”请选择你喜欢的水果/p5.判断元素是否包含某样式：使用hasClass(),返回true或falsevar ret=$(p).hasClass(another);如果p中存在.another样式，运行结果为true,否则运行结果为false文章来自学 IT 网：http: 代码：var s=$(p).html();s的值为：b您最喜欢的水果/b$(p).html(i您最不喜欢的水果/i);运行结果：您最不喜欢的水果/p2.text()：获取或设置元素内容文本内容HTML文本：您最喜欢的水果JQuery 代码：var s=$(p).text();s的值为：您最喜欢的水果$(p).text(您最不喜欢的水果);运行结果：您最不喜欢的水果3.val()：获取或设置表单无素的value值无论是文本框、下拉列表、单选框等都可以。defaultValue：表单元素的初始值。val()还可以设置下拉列表、单选框、复选框被选中。$(#single).val(选择1号);设置一个选中项$(:checkbox),val(选择2号,选择1号);以数字形式赋值，设置多个选中项在JQuery中，val()是从最后一个向前读取，如果value值或text中的任何一项符合都会 被选中。五、编历节点：1.children()：只考虑子元素，不考虑后代元素$(body).children()：body元素下的所有直接子节点2.next()：$(V).next()：p标记后紧邻的同辈元素3.prev()：$(p).prev(p标记前紧邻的同辈元素4.silbings()：$(V).siblings()：与p标记同辈的所有元素5.closest()：从当前元素开始，沿D0M树向上查找最近的匹配元素。另外还有 find。、filter()prevAll()next All()parent()parents()等方法。六、CSS DOM操作CSS DOM就是读取或设置style对象的各属性。1.直接使用CSS()获取或设置样式$(p).css(color)：获取 color 的值$(p).css(color”,red)：设置 color 为 red$(p).css(font-size:30px,background-color:gray)：设置复合属性$(p).css(opacity/0.5)：设置为半透明2.offset()方法：获取元素在当前视窗位置的偏移，返回对象包含两个元素top和left。它只对可见元素起 作用。var obj=$(p).offset();var left=obj.left;var top=obj.top;3.position()方法：获取postion为relative或absolute的元素位置，返回对象也包含两个元素top和left。var obj=$(p).position();var left=obj.left;var top=obj.top;4.scrollTop()和 scrollLeft()获取滚动条距顶端或左端的距离var scrolltop=$(p).scrollTop();获取滚动条的顶端距离var scrollleft=$(p).scrollLeft();/获取滚动条的左端距离$(V).scrollTop(300)：/设置滚动条竖向滚动的距离$(p).scrollLeft(300)：/设置 滚动条水平滚动的距离文章来自学 IT 网http: p,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select/Submit,keyd。聊 n,keypress,keyup,error等data：作为event.data属性传递给事件对象的额外数据对象.fn：用来绑定的函数.1,单击标题，显示与隐藏内容$(funccicn()$(wtpanel h5.headw)i.rkM,f J-var$content=$(tins).next(wdiv.content*);xf($content.xs(H:vxsxblew)$conent.hide();elseScontenx:.show();)1)http:/ hS.head).bindfunctionO图12,鼠标移到标题上，显示内容；移出标题隐藏内容$(function()$(wfp anel h5.hea d”),funcrcxon()($(this).next(wdxv.ccntentn).show();$(tpanel h5.head)ffc irid(ItscuaFecucr function()$(rhX3).next(ndxv.content).lude();)http:/hi.baidu.co m/grayworm图23 简写绑定事件：像click,mouseover,mouseoijt2笑的事件，程序中经常会用到，JQuery提供了简单的写法，可以有效减少代码量.像上面的代码可以作如下修改：Ocripr type=stexc/javascriprn$(function()($(w#panel h5.headw).njou3ecveif(function()($(thia).next(wdiv.content).show();)；_$(w#panel h5.headn).rcouaeout!(function()($(thia).nexr(wdiv.contentn).hide();)图23 简写绑定事件：像click,mouseover,mouseou之类的事件，程序中经常会用到，JQuey提供了简单的写法，可以有 效减少代码量.像上面的代码可以作如下修改：$(ftmcrtionO($(ntpanel h5.headw).ttouaecveirCfunction()($(thia).next(wdiv.content).show();)；_$(fpanel h5.headw).mo-aeo(function()$(thia).next(*div.contentn).hide();)http:/ eave)如：ocrxpt rypetext/javascriptR$(function()$(ntpanel bS.Nead).耻iTr(二二二二二二)($(this)next(n div.contentn).show();)，tunctioffiO($(thxs).next(ndiv.content;n).hide();y)http:/ 后一个,随后的每次单击都重复对这几个函数的轮番调用.JQuery代码如下：ocrxpt c*p=wrexr/java3crxpt.R$(function()$(tpanel h5.beadw).coggXe$(thxs).next(ndlv.content).show();$(this).next(wdv.content).hide();)http:/A worm三、事件冒泡如果页面DOM树底层的元素某事件被能发，它会沿DOM树依次向上调用父辈元素对应的某事 件.比如：页面DIV中的Span标记被单击，那它会依次触发Span的dick事件、Div的click事件、Body 的click事件.1.事件对象在JQuery中使用事件对象非常简单,只需要在事件绑定函数中传入一个参数即可$(eleinent,),bind(,c!ick,function(event)/even僦是事件对象)；2.停止事件冒泡使用事件对象event的stopPopagation()方法来停止事件冒泡。$(funstlGn()/为spanTT素绑定:。ckr事件$(1 span:.bind(nclickw,function(event)var txt=$i).hsl()+底层mpan元素被点击$(,tmsg1).html(txt);第I卜奎件冒洞2.停止事件冒泡使用事件对象event的stopPopagation()方法来停止事件冒泡。$(funrtian()为span元素绑定二Luk事件S(1 scan.bind(nclickn,zunccion(event)var 匕xc=S i tuisa*).htirl()+”底层spa口元素被点击 6(1txsg*).html(txt);-ai”-r F y厂、rr()：/阻止事件肩泡)；/为dxvc素绑定cl a二Jc事件$(,#content).bind(rclickw,tunerxor(event)var txt-Z(1 1).htral()”外JSdiT元聂被点击.八”$(1 txsg*).html(txc);二.二.n.“F;阻止事件冒泡);加E3Y元素绅定二工工二K事件$(body；.bind(click,fimccion()var cxr=5 i1 trnsg*).htrcl()+body元素祓点击n；S(txsg*).html(txt);)：1)http:/ 面.如果要阻止默认行为可以使用事件对象event的preventDefault()方法.$(function()$(w13ubw).bind(wclickwrfunction(event)(var usernanie=$(w#u3ernan:ew).val();/获取元素的值xf(U3ername=ow)/判断宿是否为空$(wtesgw).弥51(”文本框的值不能为空.。”，/提示信息event.preventDefault():阻止默认行为(表单提交)http:/ false”相当于同时使用event.stopPropagation()和event.prevent。efault();5.事件对象的其它属性event.pageX。和event.pageY。：代表鼠标相对于页面的横纵坐标。event.which()s鼠标的按键1-左键，2-中键，3-右键event.metaKey()：获取ctH按穗四、移除事件unbind(typerdata)1.如果不带任何参数，则移除相应对象上的所有绑定的事件.S(-Tiinrrirm()$().cxna(wziiccw rjnction(K.appud(，A强的绑定画秋工叫:.rxna I,CIICJCM,runctxon)$l Y3&L Iapper:d”我的绑定函数;)bindinclickM,function”$i iwpu二d(蓑出绑定函数3;:$Cael&ll,).lx-k 吧士口 0 1S(*fr，JMEI t，F 尸i:n；)*C/hectdburton 二点己我s/butxon)1H*LLUJU 二6-上除所有事件/b“uLh http:/ l);),bind(Hclickl function()$(#test),append,我的绑定函数 2)；),bind(click，ftinction()$C#test)append(“我的绑定函数 3)；)；$(#delAir),click(fijnction()$(,#btn),unbind(,click);)；)*3五.模拟操作trigger(type,data)来模拟用户操作，达到触发某个事件的函数。type：事件名称。data：要传递给事件处理函数的附加数据.r W=1:户$(function：)$(tbtn*).oijidCnclicc,funcxion()s Ctzesz*).append(1r我:勺绑定函敛;).bind(wolickn,funetion()S(*test,).append(我的绑定函数;H.bxnd(wclick,function()(*(,ttesf).append(我的绑定函数;$(bzn，.UEigqRr(*cLXcicit*:I)hLLp:/lii.baidu.curri/yf aywui HI图11JQuery入门到精通系列第五篇：jquery实现动画2010一、show()和 hide()方法：这两个方法是JQuery中最简单的两个动画效果。hide()是把元素的display样式设为“none”,show。是把元素的display样式设为原来的样式(除了 none之外的样式)。JQuery在调用 hide。时会记住元素原先的display属性，当调用show。的时候会根据hide()方法记住的 display属性来显示元素。语法：$(element).hide(speed,callback)$(element).show(speed,callback)speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数 的话，那不会出现动画过渡效果。callback：动画执行结束后回调函数以上两个动画会同时表现出三种效果：高度变化、宽度变化、透明度的变化。示例：$(element)show(1000);元素在一秒内动态显示出来。$(element).hide(1000);元素在一秒内动态隐藏起来。下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以动画形式反复显示、隐藏。function hideDiv()$(#dd).hide(2000,function()showDiv(););)function showDiv()$(#dd).show(2000,function()hideDiv(););二、fadeln()方法和 fade0ut()方法这两个方法只改变元素的透明度，不改变大小。语法：$(element).fadeln(speed,callback)$(element).fadeOut(speed,callback)speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数 的话，那也会出现默认动画过渡效果。callback：动画执行结束后回调函数示例：$(element).fadeOut(1000);在一秒内，元素越来越透明，直到完全消失。$(element).fadeln(lOOO);与 fadeOut()相反。下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以反复出现“褪色”与“上 色”的动画效果。function hideDiv()$(/z#dd/z).fadeOut(2000,function()showDivO;);)function showDiv()$(#dd).fadein(2000,function()hideDiv(););)三、slideUp()方法和 slideDown()方法这两个方法只改变元素的高度，不改变宽度和透明度语法：$(element).slideUp(speed,callback)$(element).slideDown(speed,callback)speed：动画速度的参数，一般以毫秒为单位，也查以使用slow,fast等，如果不加此参数 的话，那也会出现默认动画过渡效果。callback：动画执行结束后回调函数示例：$(element).slideUp(1000);在一秒内，元素高度逐渐变为0。$(element).slideDown(1000);与 fadeOut()相反。下面两个函数互为回调函数，一旦运行起来，就会把相应的元素以反复出现“褪色”与“上 色”的动画效果。function hideDiv()$(/z#dd/z).slideUp(2000,function()showDivO;);)function showDiv()$(#dd).slideDown(2000,function()hideDiv(););)四、自定义动画方法animate()上面的三组方法能够实现简单的动画，但如果需要一些高级动画时就需要使用animate。方 法来实现。语法：$(element).animate(params,speed,callback);params：包含样式属性：值的一组参数。如：backgroundColor:/zred/z,color:yellow”,height:160pxspeed：动画显示的速度，以毫秒为单位callback：回调函数1.自定义简单动画简单的一次性动画$(dd).animate(left:500px”,3000);该动画的效果是在3秒内使dd元素右移500像素。需要事选把dd元素的position设置为 absolute 或 relative。2.累加累减动画在现有的状态下进行属性的累加变化实现动态动画。$(dd).animate(left:+=500px”,3000);它的作用是在当前位置向后再移500像素。当然也可以设为left:-二500Px使动画向右累 加移动。3.多重动画a.同时执行多个动画，即同时改变元素的多个样式。$(z/#dd/z).animate(left:800”,width:200”,height:400”,3000);它的作用是dd元素在向右移动的同时把宽度加大为200像素，并把高度加大为400像素。b.按顺序执行多个动画，按一定的次序依次改变元素的多个样式。$(/z#dd/z).animate(left:800,3000).animate(top:300”,3000).animate(width:300”,left:-二150,3000);它的作用是dd元素先右移800像素，再下移300像素，最后再同时拉宽左移4.使用animate。的U调函数如果在上面“多重动画”的基础上，让动画执行完成后，把元素的颜色变成红色的话，有的 人会这样写代码：$(#dd).animate(left:800”,3000).animate(top:300”,3000).animate(width:300”,left:-二150”,3000).css(background-color,red);这种写法不正确，因为css()不会被加到动画过程中，而是立即被执行。我们可以把改变颜 色的代码放在回调函数中实现动画的排队效果。$(#dd).animate(left:800”,3000).animate(top:300”,3000).animate(width:300”,left:-二150,3000,function()changeColor(););function changeColor()$(#dd).css(/zbackground-color/z,/zred/z);在最后一个动画效果执行完成后回执行回调函数changeColor();5.停止动画停止当前执行的动画。语法：$(element).stop(clearQueue,gotoEnd);clearQueue：bool,代表是否要清空未执行的动画队列gotoEnd：bool,代表将正在执行的动画直接跳到末状态如果我们做了一个下拉菜单，当鼠标移上去的时候就菜单下拉，当鼠标离开的时候菜单上卷,下拉和上卷的动画时间都是3秒种。$(#dd).hover(function()$(#dd).animate(height:500,3000);function()$(#dd),animate(height:100,3000);)；如果我快速不断地将鼠标移入移出菜单(即，当菜单下拉动画未完成时，鼠标又移出了菜单)就会产生“动画积累，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行 完毕。这样导致动画效果与鼠标动作不一致。要解决此问题只需要在移入移出动画之前加入stop(),结束当前动画进入下个动画即可。代码如下：$(#dd).hover(function()$(zz#dd/z).stop().animate(height:500,3000);,function()$(/z#dd/z).stop().animate(height:100,3000);)；如果需到组合动画，在移入移出动画之前加入stop。来停止当前动画，如下$(#dd).hover(function()$(z/#dd/z).stop().animate(height:500”,3000).animate(width:500px,3000);,function()$(/z#dd/z).stop().animate(height:100,3000).animate(width:/z100px/z),3000);)；效果并不好，因为stop。只是停止了当前第一步的动画(即height:500),然后又进入 了第二步的动画(即width:500)。此时stop。的第一个参数就派上了用场，它会把下面没有执行的动画序列都清空掉。$(#dd).hover(function()$(#dd).stop(true).animate(height:500,3000).animate(width:500px,3000);,function()$(#dd).stop(true).animate(height:100,3000).animate(width:/z100px/z),3000);)；当然也可以使用第二个参数，让动画达到最后状态。如：stop(false,true)判断元素是否正处于动画中if(!$(element),is(：animated)文章来自学 IT 网：http来/ IT 网：http来/ Ajax方法，它只有一个参数options,该options参数中包含了请求 信息和回调函数的信息。参数内容都是key:value对形式出现，并且都是可选的。语法：$.ajax(options);url：(string)发送请求的地址，可以是服务器页面也可以是WebService动作。type：(string)请求方式，POST 或 GETdata：(object)向服务器发送请求时带去的数据。是key:value对形式，如：name:/zgraywormz，,sex:male,如果是数组works:workl，work21dataType：(string)预期返回的数据类型。xml,html,json,text 等beforeSend：(Function)发送ajax请求前被触发，如果返U false则取消本次请求。如果 异步请求需要显示gif动画，那应当在这里设置相应img的可见。function(XMLHttpRequest)complete：(Function)请求调用完成后的U调函数(请求成功或失败时均调用)，如果异步 请求显示gif动画，那应当在这里设置相应的img不可见。function(XMLHttpRequest,textStatus)/textStatus是描述返U状态的字符串)success：(Functi on)请求执行成功时的回调函数function(data,textStatus)/data是服务端返回的数据可以是xml、json、text等格式/textStatus是描述返状态的字符串)error：(Function)请求执行失败时的回调函数function(X