• 1. jQuery基础入门1
  • 2. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件2
  • 3. jQuery简介3什么是jQuery? jQuery由美国人John Resig于2006年初创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaeffere ,罗马尼亚的Stefan Petre等等。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。 jQuery能做什么? 程序员:简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。 用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页。 特点:提供了强大的功能函数、解决浏览器兼容性问题、丰富的UI
  • 4. jQuery的安装与使用相关库文件说明及使用 下载jQuery类库 jQuery的项目下载放在了Google Code上, 下载地址: http://code.google.com/p/jqueryjs/downloads/list 上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类: min: 压缩后的jQuery类库,  在正式环境上使用.如:jquery-1.3.2.min.js release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip jQuery使用 在 页面头部head中,添加js 4
  • 5. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件5
  • 6. jQuery核心方法及DOM处理jQuery核心函数 $():这是在jQuery中最常使用的方式,它可以接受的参数形式为: $(selector,[context]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,在context范围内找和selector匹配的元素,返回一个元素 集合。 如:$(“div > p”);找到所有 p 元素,并且这些元素都必须是 div 的子 元素。 DEMO $(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。 on-the-fly方式创建一个html元素,没有append到文档流中,浏览器不会render这个dom元素 如:$(“

    HelloDiv

    ”).appendTo(“body”);动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body元素中 。 DEMO 6
  • 7. jQuery核心方法及DOM处理jQuery核心方法--$() $(elements) 将一个或多个DOM元素转化为jQuery对象 注意是jQuery对象,而不是DOM对象。如果我想得到DOM对象呢?很简单,只需在其后跟一个索引值(如[0])—因为它得到的是一个对象数组,即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。 如:$(document.body).css( “background”, “black” );设置页面 背景色 。 DEMO $(callback) 当DOM加载完成后要执行的函数。$(document).ready()的简写。 允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。 如: $(function callAlert(){alert(“……”);}) DEMO 注意:你可以在一个页面中使用任意多个$(document).ready事件。 7
  • 8. jQuery核心方法及DOM对象jQuery对象的方问 get() 取得所有匹配的 DOM 元素集合。 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组)。 如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。 get(index) 取得其中一个匹配的元素。 num表示取得第几个匹配的元素。 这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。8get()示例HTML 代码: jQuery 代码:$("img").get().reverse(); get(index)示例Html代码: jQuery代码:$("img").get(0);
  • 9. jQuery核心方法及DOM对象jQuery对象的方问 index(subject) 搜索与参数表示的对象匹配的元素,并返回相应元素的索引值值。 如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1 each(callback) 以每一个匹配的元素作为上下文来执行一个函数。 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。 返回 'false' 将停止循环 (就像在普通的循环中使用 'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。 9HTML 代码:
    jQuery 代码: $("div").index($('#foobar')[0]) // 0 $("div").index($('#foo')[0]) // 2 $("div").index($('#foo')) // -1HTML 代码:可以使用return来跳出each循环。 jQuery 代码: $("img").each(function(i){    this.src = "test" + i + ".jpg";  });
  • 10. jQuery核心方法及DOM对象jQuery对象的方法 length jQuery 对象中元素的个数。(当前匹配的元素个数。 size 将返回相同的值。) size() jQuery 对象中元素的个数。这个函数的返回值与 jQuery 对象的‘length’ 属性一致。10HTML代码: jQuery代码: $("img").size(); $("img").length;
  • 11. jQuery核心方法及DOM对象Dom对象和jQuery包装集 什么是Dom对象? 什么是jQuery包装集? 如何在Dom对象与jQuery对象之间进行转换? 如何对Dom对象进行处理? 11
  • 12. jQuery核心方法及DOM对象Dom对象和jQuery包装集 什么是Dom对象? 在传统的javascript开发中,我们都是首先获取Dom对象,比如: var div = document.getElementById("testDiv"); var divs = document.getElementsByTagName("div"); 我们经常使用 document.getElementById 方法根据id获取单个Dom对象, 或者使用 document.getElementsByTagName 方法根据HTML标签名称获取Dom对象集合. 什么是jQuery包装集? jQuery包装集可以说是Dom对象的扩充. 在jQuery的世界中将所有的对象, 无论是一个还是一组, 都封装成一个jQuery包装集 比如获取包含一个元素的jQuery包装集: var jQueryObject = $("#testDiv");12
  • 13. jQuery核心方法及DOM对象Dom对象和jQuery包装集 Dom转jQuery包装集 jQuery选择器直接构造jQuery包装集 1、如:$(“#testDiv”); //构造的包装集只含有一个id是testDiv的元素 2、如:var div = document.getElementById("testDiv"); //获取了一个Dom元素 var domToJQueryObject = $(div); //代码中div是一个Dom元素, 我们可以将Dom元素转换成jQuery包装集 jQuery包装集转Dom对象 jQuery包装集是一个集合, 所以我们可以通过索引器访问其中的某一个元素 var domObject = $("#testDiv")[0]; //注意, 通过索引器返回的不再是jQuery包装集, 而是一个Dom对象! 13
  • 14. jQuery核心方法及DOM处理万能的选择器 先来看看什么是选择器 //根据ID获取jQuery包装集 var jQueryObject = $("#testDiv"); 注意:使用了ID选择器, 选取id为testDiv的Dom对象并将它放入jQuery包装集, 最后以jQuery包装集的形式返回 比如下面两句话的效果相同: //根据ID获取jQuery包装集 var jQueryObject = $("#testDiv"); //$是jQuery对象的引用: var jQueryObject = jQuery("#testDiv");14
  • 15. jQuery核心方法及DOM对象各种不同的选择器 基本选择器:*, class,element, id, selector1, selector2等. 层级选择器:ancestor descendant, parent > child, prev + next , prev ` siblings 简单选择器:even, odd, eq[index], last, first等 内容选择器:contains[text], empty, parent, has[selector]等. 可见性选择器:hidden, visible. 属性选择器:[attribute *=value], [attribute =value], [attribute]等 子元素选择器:first-child, last-child, nth-child(index), only-child. 表单选择器:button, checkbox, file, hidden等. 表单对象属性选择器:checked, disabled, enabled, selected.15
  • 16. jQuery核心方法及DOM对象jQuery中对Dom中属性的操作 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值 attr(key,fn) 为所有匹配的元素设置一个计算的属性值 removeAttr(name) 从每一个匹配的元素中删除一个属性 16HTML代码: jQuery代码: $("img").attr("title", function() { return this.src }); $("img").attr("src","test.jpg"); $("img").attr("src"); $("img").attr({ src: "test.jpg", alt: "Test Image" }); $("img").removeAttr("src");
  • 17. jQuery核心方法及DOM对象对Dom中css class进行操作的方法 addClass(class) 为每个匹配的元素添加指定的类名。其中class (String) : 一个或多个要添加到元素中的CSS类名,请用空格分开。 removeClass(class) 从所有匹配的元素中删除全部或者指定的类。 toggleClass(class) 如果存在(不存在)就删除(添加)一个类17HTML代码:

    Hello

    jQuery代码: $(“p").addClass(“test”); $(“p"). removeClass(“ test"); $(“p"). toggleClass(“test");
  • 18. jQuery核心方法及DOM对象修改CSS样式18名称说明实例css( name )访问第一个匹配元素的样式属性。取得第一个段落的color样式属性的值: $("p").css("color"); css( properties )把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。将所有段落的字体颜色设为红色并且背景为蓝色: $("p").css({ color: "#ff0011", background: "blue" }); css( name, value )在所有匹配的元素中,设置一个样式属性的值。 数字将自动转化为像素值将所有段落字体设为红色: $("p").css("color","red");
  • 19. jQuery核心方法及DOM对象19名称说明举例height( )取得第一个匹配元素当前计算的高度值(px)。获取第一段的高: $("p").height();height( val )为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位(如:em或%),使用px。把所有段落的高设为 20: $("p").height(20); width( )取得第一个匹配元素当前计算的宽度值(px)。获取第一段的宽: $("p").width();width( val )为每个匹配的元素设置CSS宽度(width)属性的值。 如果没有明确指定单位(如:em或%),使用px。将所有段落的宽设为 20: $("p").width(20); innerHeight( )获取第一个匹配元素内部区域高度(包括补白、不包括边框)。 此方法对可见和隐藏元素均有效。见最后示例innerWidth( )获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。 此方法对可见和隐藏元素均有效。见最后示例outerHeight( [margin] )获取第一个匹配元素外部高度(默认包括补白和边框)。 此方法对可见和隐藏元素均有效。见最后示例outerWidth( [margin] )获取第一个匹配元素外部宽度(默认包括补白和边框)。 此方法对可见和隐藏元素均有效。见最后示例宽和高相关 Height and Width
  • 20. jQuery核心方法及DOM对象20名称说明举例offset( )获取匹配元素在当前窗口的相对偏移。 返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。获取第二段的偏移: var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );position( )获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。获取第一段的偏移: var p = $("p:first"); var position = p.position(); $("p:last").html( "left: " + position.left + ", top: " + position.top );scrollTop( )获取匹配元素相对滚动条顶部的偏移。 此方法对可见和隐藏元素均有效。获取第一段相对滚动条顶部的偏移: var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() );scrollTop( val )传递参数值时,设置垂直滚动条顶部偏移为该值。 此方法对可见和隐藏元素均有效。设定垂直滚动条值: $("div.demo").scrollTop(300);scrollLeft( )获取匹配元素相对滚动条左侧的偏移。 此方法对可见和隐藏元素均有效。获取第一段相对滚动条左侧的偏移: var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() );scrollLeft( val )传递参数值时,设置水平滚动条左侧偏移为该值。 此方法对可见和隐藏元素均有效。设置相对滚动条左侧的偏移: $("div.demo").scrollLeft(300);位置相关 Positioning
  • 21. jQuery核心方法及DOM对象对Dom中html进行操作 html() 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档 html(val) 设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档 val (String) : 用于设定HTML内容的值 DEMO 21HTML代码: HTML代码:

    hello

    jQuery代码: jQuery代码: $(“div”).html(); //结果是什么? $(“div”).html(“

    test

    ”);
  • 22. jQuery核心方法及DOM对象对Dom中html元素中的文本操作 text() 取得所有匹配元素的内容。 结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 text(val) 设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体). val (String) : 用于设置元素内容的文本 22HTML代码: HTML代码:

    Test abc.

    fff

    Test Paragraph.

    jQuery代码: jQuery代码: $(“div”).text(); //结果是什么? $(“div”).text(“

    test

    fa”);
  • 23. jQuery核心方法及DOM对象对Dom中html元素的值进行操作 val() 获得第一个匹配元素的当前值。 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值. 返回值:String,Array val(val) check,select,radio等都能使用为之赋值。 val (Array) : 用于 check/select 的值 val(val) 设置每一个匹配元素的值 val (String) : 要设置的值。 23HTML代码:
    check1 check2 radio1 radio2 jQuery代码: $("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);
  • 24. jQuery核心方法及DOM对象处理DOM结构和内容 jQuery提供了很多方便的方法来对文档结构和内容进行想要的处理。 想要进行什么样的处理? 1、在某个元素的内部/外部的最前/最后插入另一个元素 append(content): //向每个匹配的元素内部追加内容 appendTo(content); //把所有匹配的元素追加到另一个指定的元素元素集合中. prepend(content); //向每个匹配的元素内部前置内容 prependTo(content); //把所有匹配的元素前置到另一个指定的元素元素集合中。 after(content); //在每个匹配的元素之后插入内容 before(content); //在每个匹配的元素之前插入内容 insertAfter(content); insertBefore(content); 24
  • 25. jQuery核心方法及DOM对象处理DOM结构和内容 2.用某个元素将另一个元素包围起来 wrap(html); wrap(elem); wrapAll(html); wrapAll(elem); wrapInner(html); wrapInner(elem); 3、用某些元素替换另一些元素 replaceWith(content); //将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll(selector); //用匹配的元素替换掉所有 selector匹配到的元素 25HTML代码:

    Test Paragraph.

    jQuery代码: $("p").wrap(document.getElementById('content'));
  • 26. jQuery核心方法及DOM对象处理DOM结构和内容 4、删除或清空某些元素 empty(); //删除匹配的元素集合中所有的子节点。 remove([expr]); //从DOM中删除所有匹配的元素 . 如:$(“p”).remove(“.hello”); //把带有class=“hello”的段落删除. 5、复制clone()/clone(true) 26HTML代码:

    Hello, Person and person

    jQuery代码: $("p").empty(); $("p").remove();
  • 27. jQuery核心方法及DOM对象筛选jQuery包装集元素 1.过滤 Filtering 2.查找 Finding 3.串联 Chaining 参考相关文档27
  • 28. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件28
  • 29. 事件与事件对象 jQuery中的事件 $("#testDiv4").bind("click", showMsg); 注意:我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg 29使用jQuery事件处理函数的好处: 1.添加的是多播事件委托.  即为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数. 2.统一了事件名称 添加多播事件委托时, ie中事件名称前面有"on". 但是使用bind()函数我们不用区分ie和dom ,  因为内部jQuery已经帮我们统一了事件的名称 3.可以将对象行为全部用脚本控制 让HTML代码部分只注意"显示"逻辑. 现在的趋势是将HTML的行为, 内容与样式切分干净. 其中用脚本控制元素行为, 用HTML标签控制元素内容, 用CSS控制元素样式. 使用jQuery事件处理函数可以避免在HTML标签上直接添加事件.
  • 30. 事件与事件对象 30名称说明举例bind( type, [data], fn )为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。当每个段落被点击的时候,弹出其文本: $("p").bind("click", function(){   alert( $(this).text() ); });one( type, [data], fn )为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。当所有段落被第一次点击的时候,显示所有其文本: $("p").one("click", function(){   alert( $(this).text() ); }); trigger( event, [data] )在每一个匹配的元素上触发某类事件。 这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。 你也可以触发由bind()注册的自定义事件给一个事件传递参数: $("p").click( function (event, a, b) {   // 一个普通的点击事件时,a和b是undefined类型   // 如果用下面的语句触发,那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]);事件处理  Event Handling
  • 31. 事件与事件对象 31名称说明举例triggerHandler( event, [data] )这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作: $("#old").click(function(){   $("input").trigger("focus"); }); $("#new").click(function(){   $("input").triggerHandler("focus"); }); $("input").focus(function(){   $("Focused!").appendTo("body").fadeOut(1000); }); unbind( type, fn )bind()的反向操作,从每一个匹配的元素中删除绑定的事件。 如果没有参数,则删除所有绑定的事件。 你可以将你用bind()注册的自定义事件取消绑定。 如果提供了事件类型作为参数,则只删除该类型的绑定事件。 如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。把所有段落的所有事件取消绑定: $("p").unbind() 将段落的click事件取消绑定: $("p").unbind( "click" ) 删除特定函数的绑定,将函数作为第二个参数传入: var foo = function () {   // 处理某个事件的代码 }; $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo $("p").unbind("click", foo); // ... 再也不会被触发 foo事件处理  Event Handling
  • 32. 事件与事件对象 快捷事件 Event Helpers 虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件. 设置单击事件: $("#testDiv").click(function(event) { alert("test div clicked ! "); }); 等效于: $("#testDiv").bind("click", function(event) { alert("test div clicked ! "); }); 触发单击事件: $("#testDiv").click(); 等效于 $("#testDiv").trigger("click"); 32
  • 33. 事件与事件对象 33名称名称blur( )keyup( )blur( fn )keyup( fn )change( )load( fn )change( fn )mousedown( fn )click( )mouseenter( fn )click( fn )mouseleave( fn )dblclick( )mousemove( fn )dblclick( fn )mouseout( fn )error( )mouseover( fn )error( fn )mouseup( fn )focus( )resize( fn )focus( fn )scroll( fn )keydown( )select( )keydown( fn )select( fn )keypress( )submit( )keypress( fn )submit( fn )unload( fn )jQuery的快捷方法列表:
  • 34. 事件与事件对象 交互处理方法 hover( over, out )  一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。 over (Function) : 鼠标移到元素上要触发的函数 out (Function) : 鼠标移出元素要触发的函数 34jQuery代码: $("td").hover(   function () {     $(this).addClass("hover");   },   function () {     $(this).removeClass("hover");   } );
  • 35. 事件与事件对象 交互处理方法 toggle( fn, fn2, fn3,fn4,... ) toggle函数可以为对象添加click事件绑定函数,  但是设置每次点击后依次的调用函数。 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。 可以使用unbind(“click”)来删除。 fn (Function) : 第一数次点击时要执行的函数。 fn2 (Function) : 第二数次点击时要执行的函数。 fn3,fn4,... (Function) : 更多次点击时要执行的函数 35HTML代码:   
          
    • Go to the store
    •     
    • Pick up dinner
    •     
    • Debug crash
    •     
    • Take a jog
    •   
    jQuery代码:     $("li").toggle(       function () {         $(this).css({"list-style-type":"disc", "color":"blue"});       },       function () {         $(this).css({"list-style-type":"disc", "color":"red"});       },       function () {         $(this).css({"list-style-type":"", "color":""});       }     );
  • 36. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件36
  • 37. jQuery中的AjaxjQuery对AJAX的封装 jQuery对AJAX的底层实现做了很好的封装,为我们提供了调用AJAX方法的接口,简化了AJAX的开发。 jQuery提供的常用的AJAX方法: $.ajax(options); // 通过远程HTTP请求载入信息 jQuery.load(url,[data],[callback]); //载入远程HTML代码并插入至DOM中 jQuery.post(url,[data],[callback],[type]); //通过远程HTTP POST请求载入信息 jQuery.get(url,[data],[callback],[type]); //通过远程HTTP GET请求载入信息 jQuery.getJSON(url,[data],[callback]); //通过远程请求载入JSON格式的数据 jQuery.getScript(url,[callback]);//通过远程HTTP GET请求载入并执行一个js. 37
  • 38. jQuery中的AjaxAjax函数详解 load( url, [data], [callback] ) Returns: jQuery包装集 说明: load方法能够载入远程 HTML 文件代码并插入至 DOM 中 默认使用 GET 方式, 如果传递了data参数则使用Post方. 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。 讲解: load是最简单的Ajax函数, 但是使用具有局限性: 它主要用于直接返回HTML的Ajax接口 load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也还是会加载。38
  • 39. jQuery中的AjaxAjax函数详解 jQuery.get( url, [data], [callback], [type] )  Returns: XMLHttpRequest 说明: 通过远程 HTTP GET 请求载入信息。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 讲解: 此函数发送Get请求, 参数可以直接在url中拼接, 比如: $.get("../data/AjaxGetMethod.do?param=btnAjaxGet_click"); 或者通过data参数传递: $.get("../data/AjaxGetMethod.do", { "param": "btnAjaxGet2_click" });  两种方式效果相同, data参数会自动添加到请求的url中 39
  • 40. jQuery中的AjaxAjax函数详解 jQuery.getJSON( url,  [data], [callback] ) Returns: XMLHttpRequest 相当于:   jQuery.get(url, [data],[callback], "json") 说明: 通过 HTTP GET 请求载入 JSON 数据。 在 jQuery 1.2 中,您可以通过使用JSON 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。 讲解: getJSON函数仅仅将get函数的type参数设置为"JSON"而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了: $.getJSON("../data/AjaxGetCityInfo.do", { "resultType": "json" }, function(data, textStatus) { alert(data.length); alert(data[0].CityName); });   40
  • 41. jQuery中的AjaxAjax函数详解 jQuery.getScript( url, [callback] ) Returns: XMLHttpRequest 相当于:   jQuery.get(url, null, [callback], "script") 说明: 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。 jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。 41
  • 42. jQuery中的AjaxAjax函数详解 jQuery.post( url, [data], [callback], [type] ) Returns: XMLHttpRequest 说明: 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 讲解: 具体用法和get相同, 只是提交方式由“GET”改为“POST”。42
  • 43. jQuery中的AjaxjQuery.ajax( options ) Returns: XMLHttpRequest 说明: 通过 HTTP 请求加载远程数据。 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载) 讲解: 这是jQuery中Ajax的核心函数, 上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数, 使用这些参数可以完全控制ajax请求. 在Ajax回调函数中的this对象也是options对象. 因为平时使用最多的还是简化了的get和post函数, 所以在此不对options参数做详细讲解了。43
  • 44. jQuery中的AjaxjQuery.ajaxSetup( options ) 无返回值 说明: 设置全局 AJAX 默认options选项。 讲解: 有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项, 此后所有的Ajax请求的默认options将被更改. options是一个对象, 可以设置的属性请此连接:http://docs.jquery.com/Ajax/jQuery.ajax#toptions 比如在页面加载时, 我使用下面的代码设置Ajax的默认option选项: $.ajaxSetup({ url: "../data/AjaxGetMethod.jsp", data: { "param": "ziqiu.zhang" }, global: false, type: "POST", success: function(data, textStatus) { $("#divResult").html(data); } }); 上面的代码设置了一个Ajax请求需要的基本数据: 请求url, 参数, 请求类型, 成功后的回调函数. 44
  • 45. jQuery中的Ajax全局Ajax事件 全局Ajax事件是一系列伴随Ajax请求发生的事件 主要有如下事件: 45名称说明ajaxComplete( callback )AJAX 请求完成时执行函数ajaxError( callback )AJAX 请求发生错误时执行函数ajaxSend( callback )AJAX 请求发送前执行函数ajaxStart( callback )AJAX 请求开始时执行函数ajaxStop( callback )AJAX 请求结束时执行函数ajaxSuccess( callback )AJAX 请求成功时执行函数
  • 46. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件46
  • 47. jQuery工具函数 什么是工具函数 工具函数是指在jQuery对象(即变量"$")上定义的函数. 这些函数都是工具类函数. 如:$.trim(" text "); 工具函数分类 浏览器及特性检测 数组和对象操作 测试操作 字符串操作 Url操作 47"$"其实是"window"对象的属性,  所以下面几句话是等价的: $.trim(" text "); window.$.trim(" text "); window.jQuery(" text "); jQuery.trim(" text ");
  • 48. jQuery工具函数 浏览器及特性检测 数组和对象操作 迭代\筛选\转换\合并 测试工具函数 测试工具函数主要用于判断对象是否是某一种类型, 返回的都是Boolean值: jQuery.isArray( obj ) jQuery.isFunction( obj ) 48jQuery.support1.3版本新增jQuery.browser已废除jQuery.browser.version已废除jQuery.boxModel已废除
  • 49. jQuery工具函数 字符处操作工具函数 目前核心类库中只有一个字符串工具函数: jQuery.trim( str ) 返回值: string 说明:去掉字符串起始和结尾的空格。 举例: 去掉字符串起始和结尾的空格: $.trim(" hello, how are you? "); 结果: "hello, how are you?"49
  • 50. jQuery工具函数 Url操作工具函数 jQuery.param( obj ) 返回值:string 说明: 将表单元素数组或者对象序列化。是.serialize()的核心方法。 数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化 举例: var params = { width:1680, height:1050 }; var str = jQuery.param(params); $("#results").text(str); 结果: width=1680&height=1050 50
  • 51. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件51
  • 52. jQuery UI常用组件简介 jQuery UI是一套基于jquery构建具有皮肤更换功能的UI控件和鼠标交互组件。用于帮助开发人员构建具有良好用户体验的Web应用程序。交互组件包括drag/dropping、sorting、selecting和resizing等。基于这些核心交互组件构建的UI控件有:accordion、date picker、dialog、slider、table sorter和tab等。 使用这些UI控件我们需要导入jQuery提供的相应的js文件和css文件。 http://jquery.org.cn/demo/UI/ http://jqueryui.com/download http://ui.jquery.com/download_builder/ http://www.cnblogs.com/terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html 52
  • 53. jQuery UI常用组件简介 Accordion组件 需要的js文件:jquery-1.3.1.js、ddaccordion.js 需要的图片文件:arrowbullet.png、silvergradient.gif、silvergradientover.gif 使用: 1.导入js文件 2.使用组件提供的方法初始化组件 DEMO53
  • 54. 内容简介jQuery简介 jQuery核心方法及DOM对象 事件与事件对象 jQuery中的Ajax jQuery工具函数 jQuery常用UI组件简介 jQuery插件54
  • 55. jQuery插件插件 官方插件网址 TerryLee Blog上的所做的240个jQuery插件索引 http://www.cssrain.cn/ 表单验证插件 validate validate自带的默认验证 扩展自定义验证方法 相关的JS文件 jquery.validate.js jquery.validate.min.js 55
  • 56. 56validate自带的默认验证:         required: "必选字段",         remote: "请修正该字段",         email: "请输入正确格式的电子邮件",         url: "请输入合法的网址",         date: "请输入合法的日期",         dateISO: "请输入合法的日期 (ISO).",         number: "请输入合法的数字",         digits: "只能输入整数",         creditcard: "请输入合法的信用卡号",         equalTo: "请再次输入相同的值",         accept: "请输入拥有合法后缀名的字符串",         maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),         minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),         rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),         range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),         max: jQuery.format("请输入一个最大为 {0} 的值"),         min: jQuery.format("请输入一个最小为 {0} 的值")
  • 57. jQuery插件扩展自定义验证方法 如:身份证验证、电话号码、邮编…… 代码举例: jQuery.validator.addMethod("isIdCardNo", function(value, element) { var tel = /^(\d{15}$)|(\d{17}(\d|x)$)/g; return this.optional(element) || (tel.test(value)); }, "请正确输入您的身份证号码"); 注意:验证时直接调用“isIdCardNo”  如: $("#form1").validate({ rules: { IdCardNo: { isIdCardNo: true }, …… } });57