欢迎来访~

jquery知识点总结

个人展示 管理员 13浏览 0评论
一:认识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" ></div>

      $("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结点。 

[javascript] view plain copy
//例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请求一个页面。 
[javascript] view plain copy
$.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数据。 

[javascript] view plain copy
$.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事件 
[javascript] view plain copy
$("#msg").ajaxComplete(function(request, settings){  
  $(this).append("<li>Request Complete.</li>");  
});   
ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件 
[javascript] view plain copy
$("#msg").ajaxError(function(request, settings){  
  $(this).append("<li>Error requesting page " + settings.url + “</li>");  
});   
ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件 
[javascript] view plain copy
$("#msg").ajaxSend(function(evt, request, settings){  
  $(this).append("<li<Starting request at " + settings.url+"</li<");  
});   
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时,执行一个函数。这是一个Ajax事件 
[javascript] view plain copy
//当AJAX请求开始(并还没有激活时)显示loading信息  
$("#loading").ajaxStart(function(){  
  $(this).show();  
});   
ajaxStop( callback ) 当所有的AJAX都停止时,执行一个函数。这是一个Ajax事件 
[javascript] view plain copy
//当所有AJAX请求都停止时,隐藏loading信息。  
$("#loading").ajaxStop(function(){  
  $(this).hide();  
});   
ajaxSuccess( callback ) 当一个AJAX请求成功完成后,执行一个函数。这是一个Ajax事件 
[javascript] view plain copy
//当AJAX请求成功完成时,显示信息。  
$("#msg").ajaxSuccess(function(evt, request, settings){  
  $(this).append("<li>Successful Request!</li>");  
});   
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
[javascript] view plain copy
//设置默认的全局AJAX请求选项。  
$.ajaxSetup({  
  url: “/xmlhttp/",  
  global: false,  
  type: “POST"  
});   
$.ajax({ data: myData }); 

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列 
[javascript] view plain copy
function showValues() {  
  var str = $("form").serialize();  
  $("#results").text(str);  
}  
$(":checkbox, :radio").click(showValues);  
$("select").change(showValues);  
showValues();   
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法),但是返回一个JSON数据格式。
[javascript] view plain copy
//从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();