jquery知识点总结

一：认识jquery

jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Ajax功能，强大的选择器功能，出色的DOM操作封装，出色的浏览器兼容性，可靠的事件处理机制，隐式迭代和链式编程操作，免费开源的库

二：初始化jquery

jQuery方式监听页面的加载：
       1.函数内部的代码页面加载(HTML)完毕之后执行
       2.调用N次,会执行N次
       3.jQ监听的代码可以简写

监听页面加载完成                                                                                                                                                                                      $（function（）{                                                                                                                                                                                             

}）                                                                                                                                                                                                          

三：jquery定义活动模板

$(function(){
   
})

四：jquery解决命名$冲突的问题

设置的时候一定要放在最上面$还没被定义变量之前  var xx = $.noConflict();

五：jquery的属性操作的样式 和css操作的样式                

1、css方法

语法：第一种：$("元素名称").css(' name') 获取第一个匹配元素的样式属性。

         第二种：$("元素名称").css(' name'，'value') 设置样式属性

         第三种：是以对象的形式写多种样式

  $("").css({       
        ' name'：'value'，
        'backgroundColor': '#ddd',
        'fontWeight': '', 
     })  

2、addClass方法

语法：$("p").addClass('属性名1 属性名2'); 给某个元素添加一个类名，可以是多个类名 

3、removeClass方法

 语法：语法：$("p").addClass('属性名1 属性名2'); 给某个元素删除一个类名，可以是多个类名

4、toggleClass方法

语法：$("元素名称").toggleClass(“class”)  如果存在类就删除，如果没有就添加一个类

5、hasClass方法

语法：$("元素名称").hasClass(“class”)  查询指定的标签中是否有指定的类，有返回true，没有则返回false；

6、获取内容和修改内容的方法 text()和html()

01.$("元素名称").text()  如果没有内容则获取到元素的内容，

    $("元素名称").text('value') 有内容则修改该元素的内容为value

02.$("元素名称").html() 如果没有内容则获取到该元素的内容，

    $("元素名称").html('value') 有内容则修改该元素的内容为value

区别：一：html()操作的是innerHtml属性节点的内容

                text() 操作的是innerText属性节点的内容

          二：html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容

                text传递参数是标签，则以文本形式展示

          三：html方法没有传参,获取第一个标签的节点内容

                text方法没有传参,获取所有标签的文本内容拼接在一起返回

7、width() 方法和height()方法

适合获取window 和 document 的宽高，对元素的话值获取到内容宽高，不包括padding，margin，border

语法：  $("元素名称").width() 如果不传值就是获取该元素的宽度，

            $("元素名称").width(20) 如果传值就是修改该元素的宽度，

            $("元素名称").height() 如果不传值就是获取该元素的高度，

            $("元素名称").height(20) 如果传值就是修改该元素的高度，

8、val()方法

语法：$("input元素名称").val(); 获取input元素的值 

          $("input元素名称").val(value); 设置input元素的值为value    

9、offset()方法  

语法： $("元素名称").offset() 获取该元素相对于当前可视窗口的位置top和left值；返回一个对象{top：29，left：29}

方法：$("元素名称").offset().top ;    $("元素名称").offset().left  ;      

10、position()方法

语法：$("元素名称").position() 获取当前标签距离父标签的距离 top和left值；返回一个对象{top：29，left：29}

方法：$("元素名称").position().top ;    $("元素名称").position().left  ;    

11、scrollTop()方法 滚动条滚动距离

语法：$(window).scrollTop() 获取滚动条滚动的距离参数可选规定以像素计的新位置。一般不设置，设置100，就是会跑到100的位置,一般设置为0；点击回到顶部
$(window).scrollLeft() 参数可选规定以像素计的新位置。一般不设置

滚动条监听事件：$(window).on("scroll",fn)

点击回到顶部案例：

//滚动到一定距离按钮出现

$( window). on( "scroll", function(){

var a = $( window). scrollTop();

console. log( a)

var b = $( ".x1"). offset(). top

console. log( b)

if( a > b){

$( ".x3"). css(' display', "block")

} else{

$( ".x3"). css(' display', "none")

}

})

//这里是一个按钮，点击回到顶部

$( ".xi"). on( "click", function(){

$( window). scrollTop( 0)

})

12、innerHeight()和innerWidth() 方法

这个方法是获取到元素的宽度和高度不包括边框和margin，包括padding，这个不适合获取window 和 document 的宽和高

语法：$(“元素标签”).innerHeight() 获取元素高度

          $(“元素标签”).innerWidth() 获取元素宽度

六：jquery的选择器

1、基本选择器

     ID选择器：$("#myDiv") 匹配唯一的具有此id值的元素 

     类选择器：$(".myClass") 匹配具有此类样式值的所有元素

     标签选择器：$("div") 匹配指定标签名称的所有元素 

     通配符选择器：$("*") 匹配所有元素 

     并集选择器：$("div,span,p.myClass") 联合所有匹配的选择器 

     交集选择器：$("p.myClass") 匹配到p标签里面的类名 不常用

2、层级选择器

     后代选择器：$("form input") 后代选择器，选择ancestor的所有子孙节点 

     子代选择器：$("#main > span")main下一级的的所有span子节点 

     兄弟选择器：$("label + input") 兄弟相邻选择器，选择所有label相邻的第一个input节点 

     兄弟选择器：$("#prev ~ div") 相邻后边的所有，选择prev的所有后面的div同胞节点

3、筛选选择器，也是过滤选择器

     $("li:first") 匹配第一个选择的li元素

     $("li:last") 匹配最后一个选择的li元素

     $("li:not(:first)")选择除了第一个标签之外的所有li标签

     $("li").eq(4)选择第5个li标签 索引0开始

     $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)

     $("li:odd") 选择索引为奇数 索引0开始

     $("li:even") 选择索引为偶数的li标签 索引0开始

     $("li:lt(3)")  $("li:gt(3)")选择索引大于或者小于3的所有li标签

     $(":animated") 获取正在执行动画效果的元素

4、属性过滤选择器 

     $("div[属性]") 匹配所有具有指定属性的元素 
     $("input[name ='newsletter']") 匹配所有具有指定属性值的元素 
     $("input[name !='newsletter']") 匹配所有不具有指定属性值的元素 
     $("input[name ^='news']") 匹配所有指定属性值以news开头的元素 
     $("input[name $='letter']") 匹配所有指定属性值以letter结尾的元素 
     $("input[name *='man']") 匹配所有指定属性值含有man字符的元素 
     $("input[属性1 =“值”][name2 $= 'man']") 匹配同时符合多个选择器的所有元素

5、父子元素过滤器

     $("ul li:nth-child(2)"), 匹配所有li标签的索引为2的li元素，索引0开始
     $("ul li:nth-child(odd)"), 匹配所有li标签的奇数元素 
     $("ul li:nth-child(3n + 1)") 匹配所有li标签的第4,7,11元素
     $("div span:first-child") 匹配所有span标签的第1个span元素 

     $("div span:last-child") 匹配所有span标签的最后一个span元素

     parent() 获取指定标签的父节点
     parents() 获取指定标签的祖先节点 父节点以上都是 传参如果指定祖先哪个就是哪个
     parentsUntil()  获取指定标签的祖先节点直到...为止（不包含自己）
     children()    获取指定标签的所有子节点 
     siblings()    获取指定标签的兄弟节点 除了自己以外的所有兄弟

     $(当前元素).find(所有的后代元素)查找获得当前元素集合中每个元素的后代，必须参数

 

七：jquery的核心函数方法   

 1、$(this).index()方法 ：

        作用：获取索引，角标

 2、get（）方法：和 eq()方法差不多 ，不过get方法返回的是DOM标签
        作用:获取指定索引对应的标签返回
如果没有传递参数:获取页面中所有指定的标签存储在数组中返回
001 参数是正数
002 参数是负数 如果是-1,表示获取倒数第一个

3、eq（）方法
作用:获取指定索引对应的标签并且包装成jQuery对象返回
没有参数:返回一个空的jQ对象(不是this)
001 参数是正数

002 参数是负数 如果是-1,表示获取倒数第一个

4、data（）方法 和 removeData()方法 ：
      作用：在元素上存取数据和删除数据
   1.在一个div上存取数据
      $("div").data("blah");  // undefined
      $("div").data("blah", "hello");  // blah设置为hello
      $("div").data("blah");  // hello
      $("div").data("blah", 86);  // 设置为86
      $("div").data("blah");  //  86
      $("div").removeData("blah");  //移除blah
      $("div").data("blah");  // undefined
   2.在一个div上存取名/值对数据
      $("div").data("test", { first: 16, last: "pizza!" });
      $("div").data("test").first  //16;
      $("div").data("test").last  //pizza!;
   3.在HTML5规范中div中读取预存的data-[key]值
     

      $("div").data("test"); //this is test!;

八：jquery动画

动画队列 : 如果某个标签身上被添加了多个动画任务,那么这些任务会被按顺序添加到队列中等待执行
       按照队列中任务的顺序一个接着一个的执行队列中的任务

1.显示和隐藏:显示show() ，隐藏hide() ，切换toggle()

        第一个参数:动画时间(速度)
        第二个参数:动画执行完毕之后的回调函数
        本质：显示和隐藏动画:控制标签的宽度和高度(透明度)来实现
2.展开和收起:展开slideDown() ，收起slideUp()， 切换slideToggle()
        第一个参数:动画时间(速度)
        第二个参数:动画执行完毕之后的回调函数
        本质：展开和收起动画:控制标签的高度
3.淡入淡出动画：淡入fadeIn（），淡出fadeOut（）， 切换fadeToggle(timer,callback)  
        第一个参数:动画时间(速度)
        第二个参数:动画执行完毕之后的回调函数
        淡入淡出到指定的值fadeTo （参数1，参数2，参数3）参数1为时间 ，参数2为透明度的值，参数3为回调函数
        本质:操作标签设置标签的透明度
4.自定义动画:animate 
        语法 jQ().animate(optionsObj,timer,callBack)
        第一参数为对象，键值类要做什么动画
        第二参数为时间
        第三参数为回调函数

5.stop():停止任务

        第一个参数:控制队列中的任务(是否清空)  true|false
        第二个参数:控制是否停止动画   true|false
        没有参数: 停止当前的动画, 后面的任务继续执行
       true true :立即完成当前的动画,后面的任务不再执行
       true false:所有动画任务立刻停止
       false false:停止当前的动画,后面的任务继续执行  默认的情况
       false true :立即完成当前的动画,后面的任务继续执行

6.delay():延迟执行任务

九，jquery常见方法

         jQ().addBack(); 把当前的jQ实例对象和上一个jQ实例对象合并成一个新的jQ实例对象 ，设置在标签后面
jQ().end(); 返回上一个jQ实例对象
jQ().add(); 在当前jQ实例对象的基础上再添加一个jQ对象成为一个新的jQ对象参数为需要设置的标签
jQ.isArray(); 检查参数是否是数组
jQ.isFunction(); 检查参数是否是函数 和jQ.isArray方法一样
jQ.grep(); 过滤数组
                    第一个参数:要处理的数组对象
                    第二个参数:过滤函数 要传值
                    第三个参数:布尔类型的值,控制过滤翻转 默认是false
jQ.makeArray(); 把类数组的结构转换为数组(伪数组-->数组)

jQ.each(); 迭代(遍历)     

jQ.map(); 数组映射

         .is(selector) ：判断括号里面的标签或者函数，如果真，为true

$(selector).next(expr)：获取$()紧邻的同级元素，expr筛选的条件有的话就指定，没有的话就是紧邻的元素               
方式一：   $("p").next().css("background-color", "red")  ; 获取p标签后面的第一个元素
方式二：   $("p").next(“.class”).css("background-color", "red")  ; 获取p标签后面的有类名为class标签

$(selector).nextAll(expr) ：获取$()所有后面的元素，expr为筛选条件，有指定就是指定，

         .first() 匹配所有同种元素中的第一个： $("ul li").first().addClass('highlight');第一个li。
         .last() 匹配所有同种元素中的最后一个： $("ul li").last().addClass('highlight');最后一个li。

         .not() 从匹配元素集合中删除元素。
                  从包含所有段落的集合中删除 id 为 "selected" 的段落：$("p").not("#selected")
                  从不是偶数中的li设置为红色  $('li').not(':even').css('background-color', 'red');

   遍历 each方法的语法:
[1] jQ.each(target,fn(key,value){//...this}) 遍历数组和对象 this指向value
[2] jQ().each(fn(key,value){//...this}) 遍历jQ实例对象 this指向value
作用:迭代(遍历)对象|数组|jQ实例对象(DOM节点)
each方法使用注意点
在回调函数中提供返回值,如果返回的是false,那么迭代就结束,循环终止.  return false;
回调函数中的this
each方法的回调函数中的this并非指向window,而是指向当前循环的value值(对象)

   map方法的使用
jQ.map(arr,fn(index,ele))
遍历数组映射,并且对数组进行处理(过滤|放大|重组)返回新的数组
return ele *2;

if(ele >3) return ele + "A";

十、jquery中的事件类型

 1.鼠标的移入和移出事件
mouseenter|mouseleave 常用
mouseover|mouseout : 移动到子标签有影响

hover（参数1，参数2）方法:本质上对mouseenter|mouseleave方法封装  

               第一个参数（回调函数）:鼠标移入事件

               第二个参数（回调函数）:鼠标移出事件

               只传递一个回调函数作为参数:不管是移入还是移出事件都会执行回调函数。就是移入和移出

2.绑定一个事件 3.0版本已经废弃
$("p").bind("click", function(){
               alert( $(this).text() );
        });
        bind( type, data, fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 
当元素获得焦点时，触发 focus 事件。data:focus(Data, fn) 可传入data供函数fn处理。
blur 当输入框失去焦点时使用
    常用在表单中，当输入以后放开时调用
focus( ) 元素获得焦点调用
change 当输入框发生变化时调用
    当元素的值发生改变时，会发生 change 事件。该事件仅适用于文本域
keydown() 鼠标按下事件
kyeup 鼠标抬起事件
ready事件，页面加载完成之后调用
mousemove() 鼠标移动事件
resize 窗口发生改变的事件
scroll() 滚动事件
submit 按钮点击表单事件
3.事件处理的两种方法
$("div").click(function(e){...})
          e.type : 事件的类型
          e.target: 事件作用的对象
jQ().on(事件类型,[obj],function(e){...}
          e.data.[对象名]:   传递对象参数给回调函数的对象可以省略
        $().data(k,value)获取在标签中的数据()里面也可以是保存数据的名称

注意点：给标签添加多个事件(可以是相同类型的),不会覆盖

4.事件冒泡: 子标签和父标签身上如果注册了相同类型的事件,那么子标签的事件被触发的时候,父标签的事件也会被触发,而且它是层               层向上触发的,我们称为事件冒泡.
5.如何阻止事件冒泡:

          [1] 在对应的标签返回return false;

          jQ().on(事件类型,[obj],function(e){...}

          [2] 调用事件对象的e.stopPropagation();方法来阻止 ，e为回调函数参数

6.标签的默认行为
有一些标签它们本身有一些默认行为,比如说a标签，input标签，再给他们注册事件(click...),那么会触发多个操作
取消事件 off 
jQ().off(type,function（){.....})
                第一个参数:事件的类型type
                第二个参数:过滤特定的事件fn
要取消按钮身上特定的某一个点击事件[把回调函数提取出来单独声明]
$("button").off("click"）;   //批量的取消按钮身上所有的点击事件

阻止标签的默认行为:事件对象e.preventDefault()

7.如何自动触发事件
        调用方式jQ().trigger(type事件类型)
① 作用的对象:jQ实例对象中所有的标签
② 不会阻止事件冒泡
jQ().triggerHandler(type)
① 作用的对象:jQ实例对象中第一个标签
② 默认会阻止事件冒泡

③ 默认会阻止标签的默认行为(部分)

8.事件委托
   优点 (1) 可以给尚不存在的标签添加事件
          (2) 可以提高性能
  $("父或者祖父标签").on(参数1，参数2，function(){...})
          第一个参数:事件的类型
          第二个参数:给要做事件的子标签注册事件(选择器)
          第三个参数:事件发生后的回调函数

9.常用事件类型

     blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
     change( ) 用户改变域的内容 input, textarea, select 
     click( ) 鼠标点击某个对象 几乎所有元素 
     dblclick( ) 鼠标双击某个对象 几乎所有元素 
     error( ) 当加载文档或图像时发生某个错误 window, img 
     focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
     keydown( ) 某个键盘的键被按下 几乎所有元素 
     keypress( ) 某个键盘的键被按下或按住 几乎所有元素 
     keyup( ) 某个键盘的键被松开 几乎所有元素 
     load( fn ) 某个页面或图像被完成加载 window, img 
     mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 
     mousemove( fn ) 鼠标被移动 几乎所有元素 
     mouseout( fn ) 鼠标从某元素移开 几乎所有元素 
     mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 
     mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 
     resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 
     scroll( fn ) 滚动文档的可视部分时 window 
     select( ) 文本被选定 document, input, textarea 
     submit( ) 提交按钮被点击 form 

     unload( fn ) 用户退出页面 window

十一、jQueryDOM文档操作的常见方法

html() ==> innerHTML 没有参数表示获取,传递参数表示设置
text() ==> innerText
removeChild（）删除子元素
remove() 删除操作
把选中的指定标签删除掉(删除标签和内容和子标签)
removeAttr()
所有指定元素删除属性
$(selector).removeAttr(attribute)
                        attribute类型必需。规定从指定元素中移除的属性。
                        selector 指定要移除属性的标签
没有参数,那么返回实例对象本身
//removeProp == removeAttr
detach() 
删除被选元素
$().detach()和remove（）不一样就是保留事件
empty() 清空操作
把选中的指定标签删除掉(删除内容和子标签)不会删除标签
clone() 克隆（复制）操作
把已经有的标签再复制一份 ，复制的是标签和里面的所有
注意点:默认情况下,克隆标签的时候,不会包含事件,如果需要连同事件一起复制,那么就传递参数true
replaceWith() 替换操作
用一个新的标签和内容来替换当前的标签
replaceAll替换
用指定的 HTML 内容或元素替换被选元素
参数：$(content).replaceAll(selector)  selector规定要替换的元素
after()把内容或者标签插入到标签的后面
      $(selector).after(content)
               $(selector).after(function(index))
               content必需。规定要插入的内容（可包含 HTML 标签）
               selector选择器
before()把内容或者标签插入到标签的前面
$("span").before("");
                $(selector).before(content)
                content必需。规定要插入的内容（可包含 HTML 标签）
insertAfter() 把内容或者标签插入到标签的后面
$("").insertAfter("span")
                $(content).insertAfter(selector)
                content 选择器表达式，HTML 标记
                selector必需。规定在何处插入被选元素。
insertBefore()把内容或者标签插入到标签的前面
$("").insertBefore("span")
                $(content).insertAfter(selector)
                content 选择器表达式，HTML 标记
                selector必需。规定在何处插入被选元素
append()把内容或者标签插入到标签里面内容的后面
$("span").append("$('p')")
                $(selector).append(content)
                content必需。规定要插入的内容（可包含 HTML 标签）
               和有to的区别
               (1) 没有传递参数: 返回this
               (2) 不支持选择器
              （3）可以函数
        appendTo()把所有的标签和内容插入到标签内容的后面
$(content).appendTo(selector)
                content必需规定要插入的内容（可包含 HTML 标签）。
                selector必需规定把内容追加到哪个元素上。
                返回值:把插入的所有标签都保存到jQ实例对象中返回
prepend()
把所有的内容和标签插入到标签里面内容的前面
$("span").prepend("zs")
                $(selector).prepend(content)
                content必需规定要插入的内容（可包含 HTML 标签）。
                和有to的区别
                (1) 没有传递参数: 返回this
                (2) 不支持选择器
               （3）可以函数
prependTo()把所有的标签和内容插入到标签内容的前面
$(content).appendTo(selector)
                content必需规定要插入的内容（可包含 HTML 标签）。
                selector必需规定把内容追加到哪个元素上。
attr() 获取和设置指定元素的属性和值
$(selector).attr(attribute) 获取值
                $(selector).attr(attribute,value) 设置 
                jQ().attr({key：value，key：value}) 设置多个属性
                attribute 必选规定属性的名称。字符串
                value 可选规定属性的值。选了就是设置 参数可以是对象 字符串
语法：jQ().attr(没有参数)   报错 | jQ().attr(key) | jQ().attr(obj) | jQ().attr(key,value)
批量的给标签添加属性
传一个参数是获取属性值，传两个参数是删除指定属性和值
removeAttr
删除属性，传一个参数是删除属性，传两个参数是删除指定属性和值
prop方法
语法:jQ().prop() 操作的是DOM标签的属性
批量的给标签添加属性
removeProp 删除属性值
attr和prop的区别
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
prev()方法
    获得当前相同元素中前一个相同的元素
    $("p").prev(selector) 有值指定标签，获取p标签之前的指定的前一个标签
             selector 指定的类名，id等
$("p").prev()，没值，获取当前p标签之前的前一个p标签
prevAll()
   获得当前相同元素中之前所有相同的元素
   $("p").prevA(selector) 有值指定标签，获取p标签之前的指定的所有标签
            selector 指定的类名，id等
   $("p").prevAll()，没值，获取当前p标签之前的所有p标签
val方法
语法：jQ().val()
如果没有传递参数,表示获取第一个input标签的value值
如果传递参数,表示批量的设置所有input标签的value值
val方法操作的是属性不是属性节点
unwrap()
删除被选元素的父元素。

$("p").unwrap(); 被选元素是p标签

十二：DOM属性节点的操作

  1.dom操作增删改查

添加|修改:setAttribute()
查询获取:getAttribute() ，hasAttribute()
删除:removeAttribute()

  2. 属性和属性节点对比
属性:所有的对象(包括DOM)都有属性,保存在对象身上.

属性节点:只有DOM标签有属性节点,保存在对象身上的attributes对象上面.比如heaf=“”

  3.jquery获取内容和修改内容 
html() 操作的是innerHTML属性 节点内容
        text() 操作的是innerText属性 纯文本内容
html方法没有传参,获取第一个标签的节点内容
        text方法没有传参,获取所有标签的文本内容拼接在一起返回
html如果传递了参数表示设置标签的内容覆盖之前的内容,传递的是标签加内容会覆盖之前的标签和内容
text传递参数是标签，则以文本形式展示

        val（）获取修改input里面的内容

       (jquery转换DOM的常见方法)
       jquery ：$(标签).html() 
       DOM ：  标签.innerHTML
       注意:
       DOM对象访问 jQ的实例对象  ==> $(DOM标签).html();

       jQ实例对象访问DOM对象    ==>  jQ[i].innerHTML |  jQ.get(i).innerHTML  i为下标,   jQ 表示 $(标签)

  4.$.trim()方法
作用:清除字符串前面和后面的空格
兼容性处理
       function f(str) {
        if(str.trim) {
            return str.trim();
        }

        else {}

十三：js的绑定监听事件（js知识）

 监听DOM加载事件
 作用:给DOM添加事件监听
   document.addEventListener("事件类型",function () {
        //表示等DOM构造完成就执行这里的代码
        console.log(document.getElementsByTagName("div")[0]);
    })
    第一个参数:要监听的事件(DOM加载完毕) 比如onreadystatechange，load等原生的事件
    第二个参数:事件发生后的回调函数

十四：store框架文件用法

查询:store.get(key)
保存:store.set(key,value) “data”为key

清空:store.clear()

      一般用sessionstorage和localStorage等

十五：jquery中的ajax使用方法

1.Ajax-load方法
   语法:$(selector).load(URL,data,callback);
   参数一为路径。路径后面可以加指定的id或者类名标签等
   参数二为添加的参数(JSON对象|查询字符串)返回给服务器端。不要有空格
   参数三为回调函数 一般不写
   注意点:
1) 对返回的结果支持使用选择器来进行筛选
2)默认情况下,发送的是GET请求
3) load方法在使用的时候,支持提交参数到服务器端
参数的格式支持两种情况:
[1] JSON对象 发送的网络请求是POST请求
[2] 查询字符串 发送的网络请求是GET请求
2.Ajax-get方法
  语法:$.get(url,data,function(respoonse,status,xhr){},dataType)
  参数 url:请求路径
       data:参数(JSON对象|查询字符串)
       第三个参数:请求完成的回调函数
             response:服务器返回的响应体
             status:  网络请求状态(success | error)
             xhr:     请求对象
        dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text   一般不写
3.Ajax-post方法
  语法:$.post(url,data,function(respoonse,status,xhr){},dataType)
  参数 url:请求路径
       data:参数(JSON对象|查询字符串)
       第三个参数:请求完成的回调函数
             response:服务器返回的响应体
             status:  网络请求状态(success | error)
             xhr:     请求对象
        dataType:期望服务器返回的数据类型:json | xml | script |jsonP | text   一般不写
4.Ajax-ajax方法
  语法：
   (1) $.ajax(url,{})
   (2) $.ajax({})
  参数：
        url: 请求路径(不带参数)
        type: 请求方法 GET|POST
        data: 设置参数(JSON对象|查询字符串)
        success:请求成功的回调函数
              回调函数参数response:响应体
              status:响应的状态
              xhr:请求对象
        async:设置是否发送异步请求 默认是异步
        cache:是否要进行缓存处理
        timeout:请求超时的时间
        beforeSend:请求发送前要执行的回调函数
        complete:请求完成执行的回调函数
        context:设置所有回调函数中this(上下文)指向特定的jQ实例对象
        dataType:预期服务器返回的数据类型
        error:请求失败时调用此函数

             回调函数参数XMLHttpRequest, textStatus, errorThrown

5.jQuery框架Ajax事件方法
1.jQ().ajaxStart()  监听网络请求开始(第一个)
        2.jQ().ajaxStop()   监听网络请求结束(最后一个)
1.jQ().ajaxSend()   监听网络请求开始(每一个)
        2.jQ().ajaxComplete()   监听网络请求结束(每一个)

6.jQuery框架Ajax序列化操作
1.把表单中所有的key-value转换为字符串
          "data":$("form").serialize()
2.把表单中所有的key-value转换为查询字符串

          $("#demo").serializeArray()

方法说明：

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。 

//例1
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
//例2
$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。 

$.get("test.cgi", { name: “John", time: “2pm" }, function(data){
  alert("Data Loaded: " + data);
});

jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。和get一样

$.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
    $("span").html(result);
  });

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。 

$.getJSON("test.js", { name: “John", time: “2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行。 

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

ajaxComplete( callback ) 当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件 

$("#msg").ajaxComplete(function(request, settings){
  $(this).append("
Request Complete.
});

ajaxError( callback ) 当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件 

$("#msg").ajaxError(function(request, settings){
  $(this).append("
Error requesting page " + settings.url + “
});

ajaxSend( callback ) 在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件 

$("#msg").ajaxSend(function(evt, request, settings){
  $(this).append(" + settings.url+");
});

ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件 

//当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
  $(this).show();
});

ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件 

//当所有AJAX请求都停止时，隐藏loading信息。
$("#loading").ajaxStop(function(){
  $(this).hide();
});

ajaxSuccess( callback ) 当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件 

//当AJAX请求成功完成时，显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
  $(this).append("
Successful Request!
});

jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。

//设置默认的全局AJAX请求选项。
$.ajaxSetup({
  url: “/xmlhttp/",
  global: false,
  type: “POST"
});

$.ajax({ data: myData }); 

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列 

function showValues() {
  var str = $("form").serialize();
  $("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();

serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。

//从form中取得一组值，显示出来
function showValues() {
  var fields = $(":input").serializeArray();
  alert(fields);
  $("#results").empty();
  jQuery.each(fields, function(i, field){
    $("#results").append(field.value + " “);
  });
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();