《锋利的JQuery》学习笔记

同事整理的一篇文章，觉得很实用，转发过来自己收藏！

据说是一本不错的jQuery书，看完后感觉总体也不错，介绍的挺全面的，列举了大量的例子，比较易懂。
加上之前学过一点CSS方面的知识，所以在看选择器这部分也比较容易理解（很多都是CSS的写法）。
总体感觉，JQuery大置分成了几大块：选择器、DOM操作、事件、动画、AJAX。
本书都一一的介绍了，特别是选择器，几乎每种选择器都列举了一个例子，很容易看懂。
此文为读本书的过程中，记录的一些笔记，例子不是书里面的，只是觉得自己比较容易理解，就随便写了个。
如果有出错的地方，麻烦指正。 ^_^

 

 

 // 锋利的JQuery 学习笔记
 // dier
 // 2009-10-17 至 2009-11-22

 //------------------------- 第一章 认识JQuery -------------------------

 ·页面加载事件（可以写多个ready()）
 $(document).ready(function(){
     alert("hello world");
 })

 ·链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等
 //选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式
 $("#myDiv").addClass("css1").children("a").removeClass("css2");

 ·JQuery中获得一个对象的所有子元素内容
 $("#myDiv").html()

 ·JQuery中的变量 与 DOM中的变量
 var $myVar = "";
 var myVar = "";

 ·DOM对象 转换成 JQuery对象
 var obj = documnet.getElementById("myDiv");
 var $obj = $(obj);

 ·JQuery对象 转换成 DOM对象
 var $obj = $("#myDiv");
 var obj = $obj.get(0);  //或者var obj = $obj[0];

 ·释放JQuery对$符号的控制权
 JQuery.noConflict();


 //---------------------------- 第二章 JQuery选择器 -------------------------------

 ·JQuery完善的处理机制
 document.getElementById("test").style.color = "red"; //如果test不存在，则页面出现异常
 $("#test").css("color","red"); //哪怕页面没有名称为test的元素，也不会报错。它是一个JQuery对象

 ·判断页面是否选择的对象
 if( $(".class").length > 0 ){
     // todo something
 }

 ·基本选择器
 $("#myDiv")    //根据给定的ID选择匹配的元素，返回：单个元素
 $(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素
 $("div") //根据给定的元素名称选择匹配的元素，返回：集合元素
 $("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素
 $("*") //选择页面所有元素，返回：集合元素

 ·层次选择器
 $("div span") //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素
 $("div>span") //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素
 $(".myClass+div") //选择样式名称为myClass的下一个DIV元素，返回：集合元素
 $(".myClass+div") //等价于 $(".myClass").next("div");
 $(".myClass~div") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素
 $(".myClass~div") //等价于 $(".myClass").nextAll();
 $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素

 ·过滤选择器（index从0开始）
 $("div:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素
 $("div:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素
 $("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素
 $("div:even") //选择所有索引是偶数的DIV元素，返回：集合元素
 $("div:odd") //选择所有索引是奇数的DIV元素，返回：集合元素
 $("div:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素
 $("div:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素
 $("div:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素
 $(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素
 $("div:animated") //选择所有正在执行去画的DIV元素，返回：集合元素

 ·子元素过滤选择器（index从1开始）
 $(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素
 $(":first-child") //选择每个父元素下的第一个子元素，返回：集合元素
 $(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素
 $("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素

 ·内容过滤选择器
 $(":contains(text)") //选择所有内容包含text的元素，返回：集合元素
 $("div:empty") //选择所有内容为空的DIV元素，返回：集合元素
 $("div:has(span)") //选择所有含有SPAN子元素的DIV元素，返回：集合元素
 $("div:parent") //选择所有含有子元素的DIV元素，返回：集合元素

 ·可见性选择器
 $(":hidden") //选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素
 $(":visible") //选择所有可见的元素，返回：集合元素

 ·属性过滤选择器
 $("[id]") //选择所有含有id属性的元素，返回：集合元素
 $("[class=myClass]") //选择所有class属性值是myClass的元素，返回：集合元素
 $("[class!=myClass]") //选择所有class属性值不是myClass的元素，返回：集合元素
 $("[alt^=begin]") //选择所有alt属性值以begin开始的元素，返回：集合元素
 $("[alt^=end]") //选择所有alt属性值以end结束的元素，返回：集合元素
 $("[alt*=some]") //选择所有alt属性值含有some的元素，返回：集合元素
 $("div[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素

 ·表单对象属性选择器
 $("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回：集合元素
 $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素
 $("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素
 $("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素

 ·表单选择器
 $(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素
 $(":text") //选择所有单行文本框元素，返回：集合元素
 $(":password") //选择所有密码框元素，返回：集合元素
 $(":radio") //选择所有单选框元素，返回：集合元素
 $(":checkbox") //选择所有复选框元素，返回：集合元素
 $(":submit") //选择所有提交按钮元素，返回：集合元素
 $(":image") //选择所有图片按钮元素，返回：集合元素
 $(":reset") //选择所有重置按钮元素，返回：集合元素
 $(":button") //选择所有按钮元素，返回：集合元素
 $(":file") //选择所有上传域元素，返回：集合元素
 $(":hidden") //选择所有不可见域元素，返回：集合元素
 $(":text") //选择所有单选文本框元素，返回：集合元素


 //---------------------------- 第三章 JQuery中的DOM操作 -------------------------------

 ·查找元素节点
 var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
 alert(str); //结果：123

 ·查找属性节点
 var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
 alert(str); //结果：hello

 ·创建元素节点
 var $li1 = $("<span></span>"); //传入元素标记，自动包装并创建第一个li元素对象
 var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML规则（闭合、小写）
 $("#myDiv").append($li1); //往id为myDiv的元素中添加一个元素
 $("#myDiv").append($li2); //结果：<div id="myDiv"><span></span><span></span></div>

 $("#myDIv").append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^

 ·创建文本节点
 var $li1 = $("<span>first</span>");
 var $li2 = $("<span>second</span>");
 $("#myDIv").append($li1).append($li2);
 //结果：<div id="myDiv"><span>first</span><span>second</span></div>

 ·创建属性节点
 var $li1 = $("<span title="111">first</span>");
 var $li2 = $("<span title="222">second</span>");
 $("#myDIv").append($li1).append($li2);
 //结果：<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>

 ·插入节点
 $("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素
 $("<span></span>").appendTo("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素

 $("#myDiv").prepend("<span></span>"); //往id为myDiv的元素内最前面插入span元素
 $("<span></span>").prependTo("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素内的最前面

 $("#myDiv").after("<span></span>"); //往id为myDiv的元素后面插入span元素（同级，不是子元素）
 $("<span></span>").insertAfter("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）

 $("#myDiv").before("<span></span>"); //往id为myDiv的元素前面插入span元素（同级，不是子元素）
 $("<span></span>").insertBefore("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）

 ·删除节点
 $("#myDiv").remove(); //将id为myDiv的元素移除

 ·清空节点
 $("#myDiv").remove("span"); //将id为myDiv的元素内的所有span元素移除

 ·复制节点
 $("#myDiv span").click( function(){ //点击id为myDiv的元素内的span元素，触发click事件
     $(this).clone().appendTo("#myDiv"); //将span元素克隆，然后再添加到id为myDiv的元素内
     $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数，表示同时复制事件
 })

 ·替换节点
 $("p").replaceWith("<strong>您好</strong>"); //将所有p元素替换成后者 <p>您好</p> --> <strong>您好</strong>
 $("<strong>您好</strong>").replaceAll("p"); //倒过来写，同上

 ·包裹节点
 $("strong").wrap("<b></b>"); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>
 $("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>
 $("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>

 ·属性操作
 var txt = $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
 $("#myDiv").attr("title","我是标题内容"); //设置id为myDiv的元素的title属性的值
 $("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个属性的值
 $("#myDiv").removeArrt("alt"); //移除id为myDiv的元素的title属性

 ·样式操作
 var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
 $("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式
 $("#myDiv").addClass("other"); //在id为myDiv的元素中追加样式
 $("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
 $("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中移除myClass和other多个样式
 $("#myDiv").removeClass(); //在id为myDiv的元素中移除所有样式
 $("#myDiv").toggleClass("other"); //切换样式，在有other样式和没other样式之间切换
 $("#myDiv").hasClass("other"); //判断是否有other样式

 ·设置和获取HTML、文本和值
 alert( $("#myDiv").html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）
 $("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码

 alert( $("#myDiv").text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）
 $("#myDiv").text("hello"); //设置id为myDiv的元素的HTML代码

 alert( $("#myInput").val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）
 $("#myInput").val("hello"); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）

 ·遍历节点
 var $cList = $("#myDiv").children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）
 var $sNext = $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
 var $sPrev = $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
 var $sSibl = $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
 var $pClos = $("#myDiv").closest("span"); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）

 ·CSS-DOM操作
 $("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
 $("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
 $("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color样式的值（多个）

 $("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度（兼容浏览器）

 $("#myDiv").css("height"); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）
 $("#myDiv").height(); //同上（实际高度）

 $("#myDiv").css("width"); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）
 $("#myDiv").width(); //同上（实际宽度）

 var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
 alert( offset.top + "|" + offset.left );

 var offset = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
 alert( offset.top + "|" + offset.left );

 $("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
 $("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
 $("#txtArea").scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
 $("#txtArea").scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离


 //---------------------------- 第四章 JQuery中的事件和动画 -------------------------------

 ·加载DOM
 $(window).load() 等价于 window.onload 事件

 $(document).ready() 相当于window.onload事件，但有些区别：
   (1)执行时机：
   window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行
   $(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕

   (2)多次使用：可以在同一个页面注册多个$(document).ready()事件
   (3)简写方式：可以缩写成 $(function(){ })  或  $().ready()

 ·事件绑定
 当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用
   bind( type, [data, ] fn );
   type：指事件的类型:
     blur（失去焦点）、focus（获得焦点）
     load（加载完成）、unload（销毁完成）
     resize（调整元素大小）、scroll（滚动元素）
     click（单击元素事件）、dbclick（双击元素事件）
     mousedown（按下鼠标）、mouseup（松开鼠标）
     mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）
     mouseenter（鼠标进入）、mouseleave（鼠标离开）
     change（值改变）、select（下拉框索引改变）、submit（提交按钮）
     keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）
     error（异常）
   data：指事件传递的属性值，event.data 额外传递给对象事件的值
   fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素

 ·合并事件
 hover(enter,leave)：鼠标移入执行enter、移出事件执行leave
 $("#myDiv").hover( function(){
     $(this).css("border", "1px solid black");0
 }, function(){
     $(this).css("border", "none");
 });

 toggle(fn1,fn2,...fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复
 $("#myDiv").toggle( function(){
     $(this).css("border", "1px solid black");0
 }, function(){
     $(this).css("border", "none");
 });

 ·事件冒泡
 下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。
 那么，click事件会按照DOM的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
 <body><div><span>我是SPAN我怕谁</span></div></body>
 $("span").bind("click", function(){ alert('span click'); });
 $("div").bind("click", function(){ alert('div click'); });
 $("body").bind("click", function(){ alert('body click'); });

 ·阻止冒泡
 解决这个问题的办法是：在SPAN执行完click事件后，停止事件冒泡。
 $("span").bind("click", function(event){
     alert('span click');
     event.stopPropagation(); //停止冒泡
 });

 ·阻止默认行为
 提交按钮在提交前做相应的逻辑判断，当不满足时
 $("#btnSubmit").bind("click", function(event){
     event.preventDefault(); //阻止默认行为 相当于return false;
 });

 ·事件对象的属性
 $("#myDiv").bind("click", function(event){ });
 event.type() //返回：click
 event.target() //获取当前元素
 event.relatedTarget() //引发事件的元素
 event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标
 event.which() //在单击事件中获取到对应的按键 鼠标左中右分别是123
 event.metaKey() //获取操作中的相关功能键（ctrl/alt/shift）

 ·移除事件
 $("#myDiv").bind("click", fn1 = function(){
     alert("function1");
 }).bind("click", fn2 = function(){
     alert("function2");
 }).bind("click", fn3 = function(){
     alert("function3");
 });
 $("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
 $("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
 $("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件

 ·一次性事件：绑定的事件执行一次后自动移除
 $("#myDiv").one("click", [data], function(){
     alert("function1");
 });

 ·触发事件
 $("#btn").trigger("click", [data]); //代码方式触发click事件
 $("#btn").click(); //另一种简写方式

 ·事件命名空间
 $("#myDiv").bind("click.hello", function(){
     alert("function1");
 });
 $("#myDiv").bind("click", function(){
     alert("function1");
 })
 $("div").unbind("click"); //两个事件都被移除
 $("div").unbind(".hello"); //只移除第一个
 $("div").unbind("click!"); //只移除第二个（注意感叹号，指没有名字空间的）

 ·JQuery中的动画
 $("div").hide(); //隐藏所有DIV元素，相当于sytle="display:none"
 $("div").show(); //显示所有DIV元素

 $("div").hide(1000); //一秒内隐藏所有DIV元素，其它参数还有：slow(600) normal(400) fast(200)
 $("div").show(1000); //一秒内显示所有DIV元素

 $("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）
 $("div").fadeIn(); //升高元素的不透明度，直至显示

 $("div").slideUp(); //由下至上收缩元素，直至消失（支持速度参数）
 $("div").slideDown(); //由上至下展开元素，直至显示

 ·自定义动画animate
 $(elem).animate(params, speed, callback);
 params：样式属性及值的映射 {protected:"value", protected:"value"}
 speed: 速度参数
 callback: 动画完成后执行函数，可选

 $("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
 $("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减
 $("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时执行

 $("#myDiv").animate({opacity:"0.5"}, 1000) //先变成50%透明
            .animate({top:"500px"}, 500) //移至离顶端500px
            .animate({left:"500px"}, 500) //移至离左边500px
            .fadeOut(1000); //显示出来 （四个动作为队列，一步步执行）

 $("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画，参数为boolean

 $("#myDiv").is(":animate") //判断元素是否在执行动画

 ·其它动画
 $("#myDiv").toggle(); //显示与隐藏元素
 $("#myDiv").slideToggle(); //展开与收缩元素
 $("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%


 //-------------------- 第五章 JQuery对表单、表格的操作及更多应用 ------------------------

 ·单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）
 $(":input").focus(function(){ this.addClass("inputFocus"); })
            .blur(function(){ this.removeClass("inputFocus"); });

 ·多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）
 var $txt = $("#textArea");
 $(".bigger").click(function(){
     if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
     //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
 });
 $(".smaller").click(function(){
     if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
     //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
 });

 ·复选框的应用（实现全选、全不选、反选）
 $("#btnCheckedAll").click(function(){ //全选
     $("[name=items]:checkbox").attr("checked", true);
 });
 $("#btnCheckedNone").click(function(){ //全不选
     $("[name=items]:checkbox").attr("checked", false);
 });
 $("#btnCheckedRev").click(function(){ //反选
     $("[name=items]:checkbox").each(function(){
         $(this).attr("checked", !$(this).attr("checked"));
         //this.checked = !this.checked;
     }
 });

 ·下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）
 $("#btnAdd").click(function(){ //将选中选项搬过去
     $("#mySelect1 option:selected").appendTo("#mySelect2");
 });
 $("#btnAddAll").click(function(){ //将全部选项搬过去
     $("#mySelect1 option").appendTo("#mySelect2");
 });
 $("#mySelect1").dblclick(function()[ //双击项搬过去
     $("#mySelect1 option:selected").appendTo("#mySelect2");
 }

 ·表单验证
 <form>
     <div>
         <label>用户名：</label>
         <input type="text" id="txtUid" class="required" value="" />
     </div>
 </form>
 $("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
     $(this).parent().append( $("<span class='star'>*</span>") );
 });
 $("form :input.required").blur(function(){ //失去焦点时验证域
     if( this.value == "" ){
         $(this).parent().append( $("<span class='error'>必填字段</span>") );
     }
     else{
         $(this).parent().append( $("<span class='success'>验证正确</span>") );
         $(this).parent().find(".error").remove();
     }
 }).keyup(function(){ //用户每点一个键触发
     $(this).triggerHandler("blur");
 }).focus(function(){ //控制有焦点时触发
     $(this).triggerHandler("blur");
 });
 $("#btnSubmit").click(function(){
     $("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
     var errNum = $("form .error").length;
     if( errNum ){
         alert("有验证字段失败，请重新填写");
         return false;
     }
 });

 ·表格应用
 $("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
 $("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

 $("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行，添加highlightTr样式

 $("tr").click(function(){
     $(this).addClass("selectedTr") //给当前行添加选中样式
            .siblings().removeClass("selectedTr") //反选移除选中样式
            .end() //结束，返回$(this)，否则则是反选的行
            .find(':radio").attr("checked",true); //在当前行查找单选框，选中它
 });


 //-------------------- 第六章 JQuery与Ajax的应用 ------------------------

 ·load( url [,data] [,callback] )方法
 url：要请求的页面的地址
 data：要发送的相关参数
 callback：回调函数

 $("#myDiv").load("hello.html"); //向myDiv元素加载hello.html的内容
 $("#myDiv").load("hello.html .myClass"); //筛选，只加载hello.html中myClass样式的内容

 $("#myDiv").load("hello.html", function(){} ); //没参数的，使用GET方式
 $("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有参数的，使用POST方式

 $("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回调函数
     //responseText : 请求返回的内容
     //textStatus : 请求状态 success error notmodified timeout
     //XMLHttpRequest : Ajax对象
 });

 ·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
 url：要请求的页面的地址
 data：要发送的相关参数
 callback：回调函数
 type：指定服务器返回内容的格式 xml html script json text _default

 $.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函数只有当状态是success才触发
     //data : 请求返回的内容
     //textStatus : 请求状态 success error notmodified timeout

     //当data是HTML时，直接加载
     $("#myDiv").html(data);

     //当data是XML时，可筛选 <user id="123" name="dier" age="27" />
     var age = $(data).find("user").attr("age");

     //当data是JSON时，可直接点出属性来 {id:"123", name:"dier", age:"27"}
     var age = data.age;
 });

 ·getScript(url [,callback])方法
 $(function(){ //动态加载JS脚本
     $.getScript("test.js");

     $.getScript("test.js", function(){ //回调函数
         //do something..
     });
 });

 ·getJSON(url [,callback])方法
 $(function(){ //动态加载JS脚本
     $.getJSON("test.js");

     $.getJSON("test.js", function(data){ //回调函数
         //do something..
         //data : 返回的数据
         $.each( data, function(index, item){ //遍历，相当于foreach
             //index : 索引
             //item : 当前项内容
             //return false; 退出循环
         });
     });
 });

 ·ajax(options)方法
 url : 请求的地址
 type : 请求的方式 GET POST 默认为GET
 timeout : 请求超时时间(单位：毫秒）
 data : 请求时发送的参数（String,Object）
 dataType : 预期返回的数据类型 xml html script json jsonp text
 bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
 complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
 success : 请求完成并且成功时触发事件 function(data, textStatus){}
 error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
 global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

 $.ajax({
     url : "test.aspx",
     type : "POST",
     timeout : "3000",
     data : {id:"123", name:"dier"},
     dataType : "HTML",
     success : function(data,textStatus){
         $("#myDiv").html( data );
     }
     error : function(XmlHttpRequest, textStatus, errThrown){
         $("#myDiv").html( "请求失败：" + errThrown );
     }
 });

 ·序列化字符串 serialize()
 $.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
     //将form1整个表单中的所有域序列化成提交的参数，支持自动编码
 });

 ·序列化数组 serializeArray()
 var arr = $(":checkbox, :radio").serializeArray();

 ·对象序列化 param()
 var obj = {id:"123", name:"dier", age:"27"};
 var kv = $.param(obj); //id=123&name=dier&age=27

 ·JQuery中的全局Ajax事件
 ajaxStart(callback) //请求开始时触发
 ajaxStop(callback) //请求结束时触发
 ajaxComplete(callback) //请求完成时触发
 ajaxSuccess(callback) //请求成功时触发
 ajaxError(callback) //请求失败时触发
 ajaxSend(callback) //请求发送前触发

 $("#loading").ajaxStart(function(){ //当有AJAX请求时显示，完成时隐藏
         $(this).show();
     }.ajaxStop(function(){
         $(this).hide();
     }
 );

 //第七章是插件的使用及编写 第八章则是一个实例 此处忽略