锋利的jqery学习笔记

1、JQuery 学习笔记一、 基础知识1、JQuery 库说明JQuery-1.5.2.js 完整无压缩版本，用于测试、学习和开发JQuery-1.5.2.min.js 经过 JSMin 等工具压缩后的版本，体积小，用于项目和产品【注：jQuery 正确写法是j 小写】2、使用 JQuery只要将的 JQuery 库引入到页面 JS处即可，方法如下：3、JQuery 对象与 DOM 对象转换JQuery 对象是一个数组对象，可以使用两种方式转换为 DOM 对象（1）var$cr = $(“#cr”) ;/JQueryobjectVarcr = $cr0 ;/DOMobject ;（2） var$

2、cr = $ (“ #cr “) ;varcr = $cr . get ( 0 );对于一个 DOM 对象，只需用$() 将 DOM 对象包装起来，就可以转换为 JQuery 对象Varcr=.geementById ( “ cr” );/DOMobjectVar$cr = $ ( cr ) ; /JQuery object4、JQuery 库与其他库的解决默认 JQuery$作为自身的快捷方式，在先加载其他 JS 库时，可能出现$，这时有以下几种解决方法：（1）在任何时候都可以调用 JQuery . no库。( ) 函数来将变量$的控制权移交给其他 JS示例：( ); /移动变量$控制权JQ

3、uery . no（2）还可以使用 JQuery . no( ) 方法自定义快捷方式，即 Var 新快捷方式 = JQuery .no( );（3）将变量$作为形参传递到 JQuery 中，在函数继续使用$快捷符号，示例如下：( ); /移动变量$控制权JQuery . noJQuery ( function ( $ )$(“ p” ) . click ( function () alet( $(this) . text () ); ) )（4）将 JQuery 库在其他库之前导入，这时无需调用 JQuery . noConfict () 函数就可以交出$控制权限。5、常用开发工具（1）Dre

4、amweaver ：可以通过安装扩展管理来实现 JQuery 代码的自动提示。首先JQuery_API.mxp 插件，然后在 Dreamweaver 中依次选择“命令”“扩展管理”“安装扩展”“JQuery_API.mxp”命令后，就可以安装插件了。【 注 意： 如 果HtDreamweaver 没有 扩 展管 理 功能 ， 说明 是简化 版本， 可 以 在/cn/exchange 中相应。】（2）Aptana：功能强大、开源、专注于 JS 的 AJAX 开的 IDEJQueryWTP 和 Spket 插件：可以使Eclipse 支持 JQuery 自动提示VisualStudio2008：安

5、装 KB958502/Release/ProjectReleases.aspx?releaseId=1736 补丁后，JQuery-1.5.2-vsdoc.js，将其与 JQuery-1.5.2.js 放在同一文件夹下，就可以实现 JQuery自动代码提示了。二、JQuery 选择器1、JQuery 选择器简介JQuery 选择器完全继承了 CSS 风格，可以非常快捷的找出特定 DOM 元素，然后添加相应行为，而无需担心浏览器是否支持定一选择。JQuery 选择器获取的是对象，即使没有此元素也不会报错，因此当要用 JQuery 检查某个元素在网页是否存在时，要用长度或转换为 DOM 对象进行判

6、断，示例如下：If ( $(“ #tt “) )/这样是错误的 应该这样： if ( $(“#tt”) .length 0 ) .或者 if ( $(“#tt”) 0 ) 2、常用选择器选择器描述返回示例选择给定类名的元素集合元素取所有 class 为 test 的元素.class$(“ .test”)匹配所有元素集合元素略*3、层次选择器选择器描述返回示例$(“antordescendant”)选择 antor 元素里 集合元素$( “divspan”)选择 div 里的所有span的所有 descendant元素（后代）元素Selector1,将每个选择器匹配的元素 集合元素$(“div

7、, span, p.myclass “) 选择所有,selector2,合并后一起返回和拥有 class 为myclass 的的一 ,selectorN组元素Element选择给定元素名的元素集合元素$(“P”) 取所有元素#id选择匹配 ID 的元素单个元素$( “test”)取 Id 为test 的元素选择 parent 元素下的child 元素集合元素$(“ div span ”) 取 div 下元素名是的素$(“parent child”)取prev 元素后的所有siblings 元素集合元素$(“#two div”)取 id 为 two 元素后面的所有div 兄弟元素$(“prev”

8、).nextAll(“div”)$( “prev siblings”)或 $(“prev”).nextAll();4、过滤选择器基本选择器描述返回示例选择最后一个元素单个元素$(“div:last”)所有 div 中最后一个 div 元素:last取索引是偶数的元素集合元素$(“input:even”)取索引是偶数的 input 元素:even取索引等于index 的元素单个元素$(“input :eq(1)”)索引等于 1 的元素:eq (index)取索引小于index 的元素集合元素:lt (index)$(“input :lt(1)”)取当前正在执行动画的所有元素集合元素$(“div

9、:animated”)取正在执行动画的 div 元素:animated取内容为text 的元素集合元素$(“div:contains(我)”):contains(text)取含有选择器所匹配的元素的元素集合元素$(“div :has(p)”)取含有元素的元素:haector)可见过滤取所有可见元素集合元素:visible$(“div :visible”):hidden取所有不可见元素集合元素$(“:hidden”) 包括 hiden 和 none:parent取含有素或文本元 集合元素$(“div: parent”) 注意与parent()方法的区别素:empty取不包含素或文本 集合元素$(

10、“div :empty”)的空元素内容过滤:header取所有标题元素集合元素$(“:header”):gt (index)取索引大于index 的元素 集合元素$(“input :gt(1)”)取索引大于 1 而不包括 1 的索引都从 0 开始计算元素:odd选择索引是奇数的元素集合元素$(“input:odd”):not(selector)去除与给定选择器匹配 集合元素$(“input:not(.myclass)”) 选取 class 不是 的元素myclass 的 input 元素:选择第一个元素单个元素$(“div :”)取所有 div 中第 1 个 div 元素$(“prev”) .

11、 siblings ()取prev 元素的所有同 集合元素$(“#prev”).siblings(“div”)取所有与 prev辈元素同辈的元素，无论前后位置$(“prev + next “)取prev 元素后的next集合元素$(“.one + div”) 或$(“.one”).next(“div”)取或 $(“prev”).next()元素class 为 one 的下一个 div 元素取有此属性的元素集合元素$(“divid”) 取有 id 属性的元素attribute取值不等于value 的元素集合元素attribute!=value$(“div title!=test”)取值以valu

12、e 结束的元素集合元素略attribute$=value用属性选择器合并成一个复合属性选择器集合元素$(“dividtitle$=test取有属性 id 且属性title 以test 结束的元素slector1selector2.取每个父元素下第 index集合元素注意与 :eq(index)的区别很常用的过滤器 :nth-child(2n);取索引值是 2 的倍数的元素，n 从 0 开始:nth-child(index/even/odd/equation)个素或奇偶元素，index 从 1 开始取每个父元素的最后一集合元素注意与:last 的区别:last-child个素表单属性过滤取所有不

13、可用元素集合元素略:disabled取所有被选中的选项元素（下拉列表）集合元素:selected$(“select :selected”)5、表单选择器选择器描述返回示例取所有单行文本框集合元素:text$(“:text”)取所有单选框集合元素略:radio取所有提交按钮集合元素:submit:checkbox取所有多选框集合元素略:password取所有框集合元素略:input所有的集合元素$(“:input”)和元素:checked取所有被选中的元素集合元素$(“input :checked”):enabled取所有可用元素集合元素$(“#form1 :enabled”)取 id 为 fo

14、rm1 的表单内的所有可用元素:only-child如果某个元素是它父元 集合元素$(“ul li:only-child”) 选择中是惟一素的中的惟一素，则素的匹配:-chile取父元素下第 1 个集合元素注意与:的区别素素过滤attribute*=value取值含有 value 的元素集合元素略attribute=value取值以value 开始的元素 集合元素$(“divtitle=test”)attribute=value取属性值为value 的元素 集合元素$(“divtitle=test”)属性过滤器描述返回示例取所有按钮集合元素:reset取所有不可见元素集合元素:hidden【注

15、意：选择器出现空格表示为后代选择器，与过滤选择器是不同的结果，例： Var $t_a = $( .test:hidden); /表示选取 class 为”test”的元素里面的隐藏元素 而 var$t_b = $( .test:hidden); /表示选中隐藏的class 为”test”的元素】三、DOM 操作1、查找节点和创建节点（1）查找节点：通过前面介绍的的选择器可以轻松查找节点，【例：var$li = $(“ul/取 ul 中的第 2 个节点】然后可以使用 attr () 方法来获取它的各种属性q(1)”);（2）创建节点：JQuery 中可以通过 $( HTML) 来实现节点的创建。

16、例：这是一个复杂的组合2、节点方法描述示例appendT0()将匹配元素追加到指定元素中， 实际是颠倒了上面的append()方法o”).appendTo(“p”)，结果o$(“prependTo()上面 prepend()方法的反操作略insertAfter()将匹配元素到指定元素的略后面，after()方法的颠倒操作insertBefore()Before()的颠倒方法略Before()在匹配元素前内容$(“p”).before(“o”)，结果oAfter()在匹配元素后内容$(“p”).after(“o”)，结果oPrepend()向匹配元素关添加内容$(“p”).prepend(“o”

17、);Append向匹配元素追加节点$(“p”).append(“o”):file取所有上传域集合元素:image取所有图像按钮集合元素3、删除节点remove()方法：删除匹配元素及其所有后代节点，返回值是指向已删除节点的使用这些元素empty()方法：并不删除当前节点，而是清空所有后代节点。，可以在其他地方或以后4、节点和替换节点（1）节点：Clone(bool)方法可以当前节点，默认参数为 False，可以不填写，指复制的新元素不具备原节点的任何行为，当为 True 时，新元素将同时具有被行为，包括事件。元素的所有（2）替换节点：ReplaceWith()与 ReplaceAll()可以将

18、所有匹配的元素都替换成指定的或者 DOM 元素，这两个方法互为颠倒。示例：$(“p”).replaceWith (“你不喜欢什么？”);或 $(“你不喜欢什么？”).replaceAll (“p”);HTML5、节点（1）wrap()方法：把每个匹配元素用指定示例如下：起来，每个匹配元素都一次$(“strong”).wrap (“”); /结果如果有 2 个元素，则为aaabbb(2)wrapAll()方法：将所有匹配元素在指定中，示例如下$(“strong”).wrap All(“”); /结果如果有 2 个元素，则为aaabbb（3）wrapInner()方法：将每个匹配元素的子内容用指定

19、起来，示例$(“strong”).wrap Inner(“”); /结果如果有 2 个元素，则为aaa6、属性操作（1）获取和设置属性： attr()Varp_txt = $para.attr (“title”) ; /获取 Title 属性值$(“p”).attr( “title” : ”o” , “name” : “test” ); /将一个“名/值”形式的对象设置为匹配元素的属性【注意：JQuery 中很多方法都是同一个函数来实现获取和设置，如 attr () 、html ()、text ()、 height ()、width ()、val ()和 css ()等方法。】（2）删除属性：

20、removeAttr ()例：$(“p”).removeAttr (“ title”);7、样式操作（1）获取设置样式：attr()获取样式示例：varp_class = $(“p”).attr (“class” ); /获取元素的 class设置样式：$(“p”) . attr (“class” ,”high”) ; /此处严格说只是替换了元素的样式（2）追加样式：addClass()示例： $(“p”) .addClass (“high” ); /即元素会具有以前和现在两格样式（3）移除样式：removeClass (“ 样式 1 样式 2”)和 removeClass()参数为空移除所有

21、样式（4）切换样式：toggleClass() /样式存在则删除，不存在则添加（5）判断样式是否存在：hasClass ()/实际是调用了 is()方法，所以等价于is()8、CSS-DOM 操作（1）设置和获取 style 对象的各种属性：css ()查看某元素css 属性的值： var p_value = $(“p”).css (“color”);改变元素样式：$(“p”).css (“ color” , “red”);（2）获取和设置高度宽度：height () 和 width ()示例：$(“p”) .heigth();$(“p”).height(100);（3）获取元素在当前视窗的相

22、对偏移：offset ()示例： varoffset = $(“p”).offset ();Varleft = offset.left ;Vartop = offset.top;（4）ition()方法：用于获取元素相对于最近一个ition 样式属性设置为 relative 或absolute 的祖父节点的相对偏移，同 offset ()一样，返回对象包括两个属性，即 top 和 left 。（5）获取元素的滚动条距顶端和距左侧的距离：scrollTop () 和 scrollLeft ()【注：height () 与css() 方法的区别是，height ()方法获取的高度是元素在页面中的实

23、际高度，且不带；而 css ()获取到的高度与样式有关，可能为”auto “ 或 “10px”之类】【注意：attr () 与 css ()，attr () 设置对象的class 属性，而 css () 设置对象的style 属性】【注：css()方法中如果属性有”-“号，如：font-size，不加引号时必须用驼峰式写法（fontSize），如果带上了引号，两种写法都可以。】9、设置和获取 HTML 与文本和值（1）设置和获取 HTML：html ()类似于 JS 中的 InnerHTML设置示例：$(“p”).html (“ 获取示例：$(“p”).html ();【注：html()方法不

24、能用于 XML 文档】o ”);（2）设置和获取文本：text ()类似于 JS 中的 InnerText【注：text()方法对 HMTL 和 XML 文档都有效，且支持所有浏览器】（3）设置和获取值：val ()类似于 JS 中的Value【注 1：val()方法不仅能设置和获取元素的值，还有一个用处就是能使 select 、checkbox 、radio 相应的选项被选中。注 2：val()方法是从最后一个选项往前。也可以使用 attr()方法来实现同样功能】示例：$(“ :checkbox”).val ( “check2” , “check3”);$(“#singleoption:eq

25、(1) “).attr ( “selected” , true);10、遍历节点（1）children ()：获取匹配元素的所有素，不考虑任何后代元素next ()：用于取得匹配元素后面紧邻的同辈元素prev ()：用于取得匹配元素前面紧邻的同辈元素siblings ()：用于取得匹配元素前后所有的同辈元素closest ()：用来取得最近的匹配元素【其他：find ()、filter ()、nextAll ()、prevAll ()、parent ()、parents ()等】四、JQuery 中的事件和动画1、加载 DOM 对象) .ready (function () /代码 $($()

26、 .ready (function () /代码 $ (function () /代码 三种方式是一样的。【注：使用 ready()方法的事件，只要 DOM 加载完毕就会被执行，如果此时元素关联的）则会报错，解决方法是使用 JQuery 的 load()方法，可以在文件未完毕（如较大的元素上绑定一个算处理函数。例：$(window).load ( function ( ); 等价于 window.onload ()】2、事件绑定在文档装载完毕后，可以通过 bind ( ) 方法来对匹配元素进行特定事件的绑定，语法为：Bind ( type , data , fn ) ;参数说明：第 1 个为事

27、件类型，包括：blur/focus/load/unload/click/mousedown/keypress/error第 2 个为可选参数，作为 event .data 属性值传递给事件对象的额外数据对象第 3 个是用来绑定处理函数的。示例：$(“#panel”).bind (“mouseover” , function () /处理代码 );【注：像click 、mouseover 、mouseout 这类在程序中常用的事件，系统提供了简写方法，效果与 bind () 方法一样，示例：$(“#panel”) . click (function () /代码 );3、事件（1）hover()

28、 方法结构为：hover (enter ,leave ); 用于模拟光标悬停事件，当光标移动到元素上时，触发第 1个函数（enter），当光标移出这个元素时，触发第 2 个函数（leave）。示例：$(“#panel”) .hover ( function () , function () );【注：hover () 方法是用来替代 JQuery 中的 bind (“ mouseenter”) 和 bind (“mouseleave”)方法的，而不是 bind (“mouseover”)和 bind (“mouseout”)方法，因此当需要触发第 2 个函数时，需要用 trigger(“mou

29、seleave”)来触发。】（2）toggle ()方法结构为：toggle (fn1 , fn2, fnN) ;用于模拟鼠标连续点击事件，依次触发多个函数。【注：常用于动态交替元素的可见状态，如果元素可见则切换为隐藏，如果元素是隐藏的，则单击后切换为可见，例：$(“#panel”).toggle (function () $(this).next().toggle();, function () $(this).next().toggle(); ) 】4、事件对象的使用（1）冒泡问题的解决：由于事件冒泡可能会预料之外的效果，所以要通过事件对象的一些属性来进行控制，因为 IE-DOM 与 DO

30、M 实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象变得比较，JQuery 对这个问题进行了必要的扩展和封装，从而使得在任何浏览器中都能很轻松的使用事件对象的一些属性。在 JQuery 中，只要为函数添加一个 event 参数，就可以轻松使用事件对象，示例如下：$(“element”) .bind (“click” ,function (event )/event：事件对象 ) ;停止事件冒泡：stopPropagation ()；示例：event . stopPropagation ();默认行为：preventDefault ()；示例：event . preventDefaul

31、t ();【注：以上两个方法都可以用简写方式代替：returnfalse；另外 JQuery 不支持事件捕获】（2）事件对象属性属性名描述示例默认事件preventDefaultEvent . preventDefault获取触发事件的相关元素略related在单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘按键WhickoriginalEvent指向原始的事件对象（3）模拟单击事件：可以使用 trigger()或 click()方法例：$(#btn).trigger(“click”);或者 $(#btn).click ();【注：trigger()不仅可以触发浏览器支持的具有相同名称

32、的事件，还可以触发自定义名称的事件，还可以传递参数，示例：语法：trigger(type,data);$(#btn).bind(“myclick” , function(event , message1, message2)$(#test) . append (“”+message1+message2+”););$(“#btn”).trigger (“ myClick” , “自定义” , “事件” );】metaKeyJQuery 中用于在键盘事件中获取Ctrl 键Event . pageX获取光标相对于页面的 JQuery 封装后可以兼容各种浏览器/event.PageYx/y 坐标获取触

33、发事件的元素Enevt . hrefType用以获取到事件类型Event . type（4）triggerHandler()方法：trigger()方法不仅会触发绑定的事件，同时也会执行浏览器的默认操作（如果有的话，例如 focus 事件，不仅会执行 focus 事件，也会使文本框获得焦点），而 triggerHnadler()方法则不执行浏览器默认操作。（5）绑定多个事件类型：bind ( “mouseouvermouseout ” , function () );（6）添加事件命名空间，便于管理：bind (“ click .plugin “, function () ) ; 删除时直接删

34、除命名空间，则相关事件都会被删除，例：unbind(“ .plugin”);【注：事件类型加感叹号表示匹配不包含在命名空间中的事件，例 click!】5、移除事件：unbind ()语法结构：unbind ( type , date ) ;参数说明：第 1 个是事件类型，如果没有参数，则删除所有绑定事件第 2 个参数是绑定时传递的数据，如处理函数名。【注：对于只绑定一次的事件，JQuery 提供了简写方法one()方法，使用方法与 bind ()相同，当处理函数执行一次后立即被删除。语法结构：one ( type , data ,fn );】6、JQuery 中的动画（1）显示与隐藏元素：Sh

35、ow()和 Hide()Show()与 Hide()在不带参数的情况下相当于CSS(“display”, “none/block/inline”)，不会有任何动画，通过指定速度参数可实现动画效果。示例：$(“element”) .show (“slow/normal/fast “); 或者 $(“element”).show (1000); /具体的值【注：这两个方用下面的方法】同时减少“内容”高度、宽度和不，如果只想改变不则使（2）自定义动画：animate ( params , speed ,callback );Params：一个包含样式属性及值的 Speed：速度参数，可选。，例：pr

36、operty1:”value1”,property2:”value2”,。Callback：回调函数，动画完成时执行的函数，可选，适用于所有的动画效果方法。【注：在 animate()方法中，多个属性会同时发生作用，只有当以链式方式应用时，动画才会按照顺序发生，形成动画队列。另外，要防止非动画方法插队，需要把非动画方法写在回调函数中。】（3）停止动画：Stop()语法结构：stop ( clearQueue, gotoEnd );参数都为可选，为布尔值（True 或 Flase），ClearQueue 表示是否要清空未执行完的动画队列， GotoEnd 代表是否直接跳转到当前动画末尾状态。不加

37、任何参数则表示停止当前动画，继续执行队列中的其他动画。【注：JQuery 只能设置当前正在执行的动画状态，并没有提供直接到达动画队列最终状态的方法。】（4）判断动画状态： if ( ! $(element) .is (“ :animated”) )（5）动画方法说明：方法说明只改变不fadeIn() / fadeOut()只改变不fadeTo()用来代替 slideUP()和 slideDown()方法SlideToggle()【注：JQuery 动画需要在标准模式下执行，即 HMTL 文件头要包含 DTD 定义，否则会引起动画抖动。JQuery 中的动画都可以带参数，数值参数不需要引号。】五

38、、JQuery 对表单表格的操作1、表单应用（1）单行文本框应用：主要是改变样式，例如获取和失去焦点时的样式改变值得学习的 HMTL 代码：个人基本信息名称：【注：fieldset 可以在页面中形成groupbox，legend 则设置其标题。】（2）多行文本框应用：主要是动态改变多行文本框的大小或者通过 scrollTop 属性控制滚动条的状态Animate()自定义动画，以上各种动画方法实质都调用了该方法，所以也可以用些方法替代其他所有动画方法Toggle()用来代替 hide()和 show()方法slideUP() / slideDown()只改变高度Hide() / show()同时

39、修改多个样式属性即高度、宽度、不（3）复选框应用：主要是全选、反选等（4）下拉框应用：常用于级联操作或将一个区域内容添加到另一个区域中，如下图：（5）表单验证应用：动态添加验证标识，各类验证同 JS。2、表格应用（1）隔行变色：应用选择器 odd 和even 属性实现，注意下标从 0 开始例：$(“tbodytr:odd”).addClass(“odd”);/排除表头行为奇数行添加样式（2）表格开闭：应用选择器实现样式控制例：$(this).siblings(.child_+this.id).toggle().toggleClass(high);（3）表格内容筛选：通过contains()方法

40、配合 filter()方法实现内容过滤。示例：通过用户输入筛选表格内容显示$(“#filterName”).keyup(function()$(“table tbody tr”).hide().filter(“:contains(”+($(this).val()+”)”).show(); /为 filterName 文本框绑定输入事件);3、其他页面应用（1）动态调整页面字体大小。VarthisEle=$(“P”).css(“font-size”); /获取字体大小 VartextFontSize=parseFloat ( thisEle ,10); /去掉 Varunit=thisEle.s

41、lice(-2); /获取TextFontSize +=2;，第 2 个参数表示进制$(“p”).css (“font-size” , textFontSize + unit); /设置字体大小（2）网页选项卡：通过显示隐藏层实现（3）网页换肤：通过 JQuery 改变样式文件首先创建样式选择列表：白色紫色然后为 HTML 代码添加样式，注意一定要有一个带 ID 的样式表，便于操作其 href 属性。最后就可以通过代码修改网页样式了：Var $li= $(“#skinli”);$li.click (function() $(“#”+this.id).addClass(“high”)/显示当前选

42、项.siblings().removeClass(“high”); /移除其他选项显示$(“#cssfile”).attr(“href” , “ css/”+ this.id +”.css”) ; /设置皮肤);【注：还可以通过 JQuery 的插件将用户选择保存起来，或者保存到服务器上持久化。】六、JQuery 与 Ajax 的应用1、Ajax 简介（1）Ajax 是“AsynchronousJavaScriptandXML”（异步 JavaScript 和 XML）的缩写。拥有只要浏览器的 JS 就可以使用，提高用户体验和 Web 性能，减轻服务器带宽和负担等特点。之处在于各大浏览器对 X

43、MLHttpRequest 对象的支持，同时对搜索引擎的支持不好，开发和调试工具缺乏。（2）JQuery 对 Ajax 作了封装，兼容各大浏览器，其中$.ajax()方法属于最底层方法，第 2 层是 load() 、$.get() 、$.t()方法，第 3 层是$.getScript()和$.getJSON()方法。2、JQuery 中的 Ajax（1）Load()方法：载入 HTML 文档，load()方法常用来从 Web 服务器上获取静态数据文件语法结构：load (url , data ,callback)url 参数：请求 HTML 页面的 URL 地址，通过添加选择符可以筛选要加载的

44、页面元素例：$().load (“ test.html.para”);/注意中间有空格，将 test.html 中样式是 para 的元素加载出来。data 参数：发送至服务器的key/value 数据，如果有参数则为t 传递方式，没有则为Getcallback 参数：回调函数，共有三个参数 responseText（请求返回的内容）、textSus（请求状态：sucs/error/notmodified/timeout 共 4 种）、XMLHttpRequest（XMLHttpRequest 对象）。【注：在 load()方法中，无论 Ajax 请求是否成功，只要当请求完成（complete

45、）后，回调函数（callback）都将触发此函数。】（2）$.get()和$.t()方法：它们是 JQuery 的全局函数，语法和结构相同$.get()语法结构：$.get ( url ,data ,callback ,type)url 参数：请求 HTML 页的 URL 地址data 参数：发送到服务器的key/value 数据会作为QueryString 附加到请求 URL 中callback 参数：载入成功时的回调函数（与 load()方法不同，只有当 response 的返回状态是sucs 时才调用此方法）type 参数：服务器端返回内容的格式，包括XML/html/script/js

46、on/text 等【注：回调函数有两个参数 data 和textSus，分别表示请求返回的内容和请求状态。】在各种返回格式中，XML 是 Web 服务领域的“世界语”，JSON 体积小易和阅读，但格式严格，稍一有错，易导致终止或其他影响，下面用一个示例介绍 XML 的：$.get (“get2.” , username:$(“#username”).val() , content: $(“#content”).val() , function(data , textSus )Var username= $(data).find (“comment”).attr(“username”); Var

47、 content=$(data).find(“commentcontent”).text();Var txtHtml=”+username+”:”+content+”;$(“#resText”).html(txtHtml););（3）$.getScript()方法：动态加载 JS 文件JQuery 加载 JS 文件方法：$(.createElement(“script”).attr(“src” , “test.js”).appendTo(“head”);或 $(“”).appendTo(“head”);以上方法并不是很理想，$.getScript()方法可以像加载一个 HTML 片段一样来直接

48、加载 JS 文件，并且不需要对 JavaScript 文件进行处理，JavaScript 文件会自动执行，例：$.getScript ( test.js , function () . );/回调函数为可选，会在 JS 文件成功载入后运行。（4）$.getJSON()方法：用来加载 JSON 文件。语法结构：$.getJSON（Json 文件【，回调函数】）；$.getJSON ( test.json , function (data) Varhtml=;$(#resText).empty();$.each ( data , function ( commentIndex , comment

49、) Html += +comment username+:+commentcontent+”;);$(#resText).html ( Html););【注：$.each()与 JQuery 对象的 each()方法不同，它是一个全局函数，不操作 JQuery 对象，以一个数组或对象为第 1 个参数，以一个回调函数为第 2 个参数。回调函数有 2 个参数：第1 个为对象成员或数组索引，第 2 个为对应变量或内容。如果要退出循环，在$.each()中返回 False 即可。】（5）$.ajax()方法：是 JQuery 最底层的 Ajax 实现，结构为 $.ajax ( options );常用

50、参数如下表：参数名称类型说明请求方式，默认为GetTypeStringObject 和 String发送到服务器的数据。Get 请求中将附加在 URL 后，如果不是字符串将自动转换为字符串格式。对象必须为key/value 格式。Data发送请求前可以修改XMLHttpRequest 对象的函数，例如添加自定义 Http 头。如果返回 False 可以取消本次 Ajax 请求。其参数只有一个 XMLHttpRequest 对象beforeSendFunction请求成功后调用回调函数，有 2 个参数：SucsFunction由服务器返回的 da描述状态的字符串ype 指定的数据是否异步提交，为

51、 true 时异步，false 时同步提交Async默认为 true，表示会触发全局 Ajax 事件。AjaxStart 和 AjaxStop可用于控制各种 Ajax 事件Global给 Ajax 返回的原始数据进行预处理的函数，有 data 和 type 两个参数，data 是返回原始数据，type 是调用 Ajax 时提供的 da ype 参数。函数返回值将由 JQuery 进一步处理。dataFilterFunction在一个 jsonp 请求中重写回调函数的名字jsonpString响应 HTTP认证请求的passwordString只有当请求时 daype 为”jsonp”或”scr

52、ipt”，且 type 是 GET 时scriptCharsetString才会用于强制修改字符集编码prosData默认为 true，默认情况发送的数据将被转换为对象usernameString响应 HTTP认证请求的用户名ifModified默认为 false，仅在服务器数据改变时获取新数据contentTypeString当发送信息至服务器时， 内容编码类型 。默认为 “application/x-www-form-urlencoded”。cache默认为true，（当 daype 为 script 时默认为 false），设置为 false时将不会从浏览器缓存中加载请求信息ErrorF

53、unction请求失败时调用的函数，有 3 个参数：（1）XMLHttpRequest 对象；（2）错误信息 textSus（3）捕获的错误 errorThrown 对象CompleteFunction请求完成后调用的回调函数（请求成功或失败调用）。参数是 XMLHttpRequest 对象和一个描述成功请求类型的字符串daypeString预期服务器返回的数据类型，如果不指定，JQuery 将自动根据Http 包的 Mime 信息返回 responseXML 和 responseText，并作为回调函数传递。可用类型有 XML/html/script/json/textTimeoutNumb

54、er请求超时时间（毫秒），将覆盖$.ajaxSetup()方法的全局设置urlString发送请求的地址，默认为当前页3、序列化元素（1）Serialize()方法：将 DOM 元素内容序列化为字符串Ajax 中，为了获取表单元素，必须将字可以采用如下方法：逐个封装到 data 参数中，对于元素较少的表单$.get ( “get1.ashx”, username :$(#username).val() , content :$(#content).val() ,function() );但表单元素复杂时这种方式就缺乏弹性，这时可以使用 JQuery 提供的另一个简化方法序列化元素方法 Seri

55、alize()，用于 Ajax 请求，例：$( “get1.ashx”, $(“#form1”).serialize() , function () ); /结果与上面代码相同，且更灵活【注：$.get()方法中的 data 参数不仅可以使用方式（$(“#username”).val()），也可以使用字符串方式（”username=”ponent($(#username).val()），字符串方式需要注意对中文进行编码，如果不希望这么麻烦，可以使用 Serialize()方法，它会自动编码，另外其他选择器选取的表单元素也能使用它，如：$(“:checkbox,:radio”).serializ

56、e(); /序列化选中的值。】（2）SerializeArray()方法：将 DOM 元素序列化为数组示例：Var fields=$(“:checkbox,:radio”).serializeArray() ;$.each ( fields , function ( i , field)$(“#results”).append ( field.value +”,”););(3) $.param()方法：是序列化方法的Varobj=a:1 , b:2 , c:3 ;，用来对一个数组或对象按 key/value 进行序列化Vark=$.param(obj); /结果为：a=1&b=2&c=34、A

57、jax 全局函数方法说明Ajax 请求错误时执行的函数，捕捉到的错误可以作为最后一个参数ajaxError (callback)Ajax 请求成功时执行的函数ajaxSucs (callback)Ajax 请求结束时执行的函数ajaxStop (callback)【注：如果不想触发全局事件，则可以将$.ajax(options)方法中的 global 参数设置为 false。】ajaxStart (callback)Ajax 请求开始时执行的函数ajaxSend (callback)Ajax 请求发送前执行的函数plete (callback)Ajax 请求完成时执行的函数七、插件的写法和使用

58、1、表单验证插件（1）Validation 插件：标准的验证方法库，需要如果配合 JQuery.metadata.js（一个支持固定格式使用，默认为英文。的 JQuery 插件）使用，可以将 Validation插件的验证规则与 HTML 代码完全分离，利用字段 name 属性实现验证规则，更好的整合到代码中，示例如下：首先引入这两个库文件，然后添加如下 JS 代码：$(“#form1”).validate ( rules:username:/字段 name 属性required:true,minlength:2/最少 2 位字符,:required:true,:true, url:”url”

59、 ,comment:”required”);【注：如果要验证中文需要加载中文验证信息库JQuery.val.js】【注：自定义验证规则提示信息：】（2）美化提示信息对于 Validation 插件来说，想为验证提示信息加入漂亮的提示在 JQuery 代码中增加如下代码：errorElement : “em” ,/用来创建错误提示信息sucs : function (label) /验证成功后执行的函数/label 指向上面那个错误提示信息em也是很简单的事情，首先s “);/清空错误提示信息并加上自定义样式label.text ( “) . addClass (“suc然后在CSS 创建相应样

60、式，以便和 errorElement 相关联。em.error background:url(“images/a.gif”)no repeat0px0px;em.sucs background:url(“images/a.gif”)no repeat0px0px;（3）自定义验证规则示例为验证，HTML 代码如下：=7+9自定义验证规则方法：$.validator.addMethod(“formula”,/验证方法名function (value , element , param ) /验证规则 returnvalue = eval (param ); , 请正确输入公式计算后的结果/验证提