jQuery

jQuery模块

选择器、DOM操作、事件、AJAX与动画

匿名函数自执行

作用：解决命名空间与变量污染的问题

总结：全局变量是魔鬼, 匿名函数可以有效的保证在页面上写入JavaScript，而不会造成全局变量的污染，通过小括号，让其加载的时候立即初始化，这样就形成了一个单例模式的效果从而只会执行一次

jQuery与DOM

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素

如何把jQuery对象转成DOM对象：

    var $div = $('div')    //jQuery对象

    var div = $div.get(0)   //转化成DOM对象

    div.style.color = 'red'    //操作dom对象的属性

如何将DOM对象转化成jQuery对象：

    var div = document.getElementsByTagName('div'); //dom对象

    var $div = $(div); //jQuery对象

    var $first = $div.first(); //找到第一个div元素

    $first.css('color', 'red'); //给第一个元素设置颜色

jQuery 选择器

1. id选择器    $( "#id" )        =>dpcument.getElementById('id')

2. 类选择器   $( ".class" )        => document.getElementsByClassName('class');

3. 元素选择器  $( "element" )  => document.getElementsByTagName('div')

4. 全选择器   $( "*" )    =>document.getElementsByTagName('*')   

5. 层级选择器   $('div > p')  

6. 基本筛选选择器  

筛选选择器的用法与CSS中的伪元素相似

例如：$(".div:first")

7. 内容筛选选择器  

注意：

1》:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2》如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

3》:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

8. 可见性筛选选择器

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

可以隐藏一个元素的方式：

    1.CSS display的值是none。

    2.type="hidden"的表单元素。

    3. 宽度和高度都显式设置为0。

    4.一个祖先元素是隐藏的，该元素是不会在页面上显示

    5.CSS visibility的值是hidden

    6.CSS opacity的指是0

注意：如果元素中占据文档中一定的空间,元素被认为是可见的。

            可见元素的宽度或高度，是大于零。

            元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局

9. 属性筛选选择器

例如  $('input[type="text"]')

10. 元素筛选选择器

注意：

    1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

    2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

    3. 如果子元素只有一个的话，:first-child与:last-child是同一个

     4. :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

     5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

     6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

11. 表单元素选择器

12. 表单对象属性筛选选择器

注意：

    选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

    在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取元素

13. 特殊选择器this

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

注意：

    this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。

    $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

jQuery的属性与样式

1. attr()  prop() 

操作特性的DOM方法主要有3个：getAttribute、setAttribute、removeAttribute

jQuery：attr()  获取和设置元素属性、removeAttr()

获取Attribute就需要用attr，获取Property（特性）就需要用prop

2. html()  text()

.html()  获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容

注意：.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

.text()  得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容

3. .val()   用于处理表单元素的值

.html(),.text()和.val()的区别： 

    1>.html()、.text()、.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

    2>.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

    3>.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

4. .addClass()   .removeClass()

    .addClass()    增加样式

   .removeClass()   删除样式

5. 切换样式.toggleClass()

通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

6. 样式操作.css()

.css() ：获取元素样式属性的计算值或者设置元素的CSS属性

7. 元素的数据存储

通过$.data方式设置数据 取数据

jQuery操作DOM

JavaScript创建div节点元素

创建流程：

    创建节点(常见的：元素、属性和文本)

    添加节点的一些属性

    加入到文档中

流程中涉及的方法：

    创建元素：document.createElement

    设置属性：setAttribute

    添加文本：innerHTML

    加入文档：appendChild

1. jQuery 创建元素节点

    $("<div>是文本节点</div>")

2. DOM内部插入append() 、appendTo()

append()前面是被插入的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是被插入的对象

3. DOM外部插入after()、before()

before与after都是用来对相对选中元素外部增加相邻的兄弟节点

都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面

都支持多个参数传递

4. 内部插入prepend()与prependTo()

5. 外部插入insertAfter()与insertBefore()

使用

6. DOM节点删除  empty()  、remove()

    empty()   只移除了 指定元素中的所有子节点

    通过empty移除了当前div元素下的所有p元素 但是本身id=test的div元素没有被删除

    remove（ ）  会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据

.aaron下含有内容after的删除

empty和remove区别：

严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

empty不能删除自己本身这个节点

remove方法 该节点与该节点所包含的所有后代节点将同时被删除

提供传递一个筛选的表达式，删除指定合集中的元素

7. 保留数据的删除操作detach()

detach() 让一个web元素托管 即从当前页面中移除该元素，但保留这个元素的内存模型对象

var a = $("div").detach()   移除对象

$('body').append(a)   添加

detach()和remove()区别：

remove：

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据

有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：

移除的处理与remove一致

与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了

8. DOM拷贝   clone()

.clone()方法  深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

.clone(true) 深复制

9. DOM替换replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

10. DOM包裹   

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

unwrap()   将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置

$('p').unwrap();   调用unwrap方法，会删除p的父辈元素

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

    通过回调的方式可以单独处理每一个元素

.wrapInner( wrappingElement|function )：给集合中匹配的元素的内部，增加包裹的HTML结构

    $('div').wrapInner(function() {

        return '';

    })

jQuery遍历

1. children()

.children(selector)   返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

children()无参数

.children()方法选择性地接受同一类型选择器表达式

    $("div").children(".selected")

    $("div").children(":last")

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一个元素的第一级子元素

2. find() 

find是后代关系（包含父子关系）  children是父子关系查找

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的操作，可以传递通配选择器 '*'。

find只在后代中遍历，不包括自己。

选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)

如：$('.left').find('a:first').css('color','red')

3. parent()    快速查找合集里面的每一个元素的父元素

因为是父元素，这个方法只会向上查找一级

4. parents()   快速查找合集里面的每一个元素的所有祖辈元素

parent只会查找一级

parents则会往上一直查到查找到祖先节点

$( "html" ).parent()方法返回一个包含document的集合

$( "html" ).parents()返回一个空集合

5. closest() 方法

closest()   接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

parents()和.closest()区别

    1>起始位置不同：.closest开始于当前元素 .parents开始于父元素

    2> 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

    3>结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

6. next()   查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

    $('a').next(':last').css('border','1px solid blue')

7. prev()  查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

8. siblings()   查找指定元素集合中每一个元素的同辈元素

无参数: 取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

$('a').siblings(':last-child').css('border','1px solid blue')

9. add()   用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

10. each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

jQuery鼠标事件

1. click与dbclick事件

    click      方法用于监听用户单击操作

    dbclick  方法用于监听用户双击操作

2. mousedown与mouseup事件 鼠标按上按下

3. mousemove事件  监听用户移动的的操作

4. mouseover与mouseout事件   监听用户的移入移出操作

5. mouseenter与mouseleave事件   监听用户操作鼠标是否有移到元素内部或是元素外部

6. hover事件  

    $(selector).hover(handlerIn, handlerOut)

    1> handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

    2> handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

hover 取代mouseenter和mouseleave 可以避免冒泡问题

7. focusin事件   、focusout事件

focusin   当一个元素，或者其内部任何一个元素获得焦点的时候

focusout  当一个元素，或者其内部任何一个元素失去焦点的时候

jQuery表单事件

1. blur与focus事件  用于处理表单焦点的事件

事件focus在获得焦点时被调用

事件blur在失去焦点时被调用

本质区别：是否支持冒泡处理

focus()在元素本身产生，focusin()在元素包含的元素中产生

2. change事件

input元素监听value值的变化，当有改变时，失去焦点后触发change事件。

对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发

select元素：对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素：多行文本输入框，当有改变时，失去焦点后触发change事件

3. select事件

select事件只能用于<input>元素和<textarea>元素

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件

$("#test").select(function() { //响应文字选中回调

    //this指向 input元素

});

4. submit事件  表单的提交

    <div id="test">点击触发

    $("#test").submit(function(){

        alert('触发指定事件')

    })

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery键盘事件

1. keydown()与keyup()事件

keydown事件：当用户在一个元素上第一次按下键盘上字母键的时候，就会触发

keyup事件：当用户在一个元素上第一次松手键盘上的键的时候，就会触发

e.target.value获取输入表单的值

2. keypress()事件  捕获键盘输入

keypress事件与keydown和keyup的主要区别：

    只能捕获单个字符，不能捕获组合键

    无法响应系统功能键（如delete，backspace）

    不区分小键盘和主键盘的数字字符

jQuery事件绑定和解绑

1. on()的多事件绑定

.on( events ,[ selector ] ,[ data ] )

.on、 .click的区别：

1> .on 多个事件绑定同一个函数

    $("#elem").on("mouseover mouseout",function(){ });

2>  .on多个事件绑定不同函数

    $("#elem").on({

        mouseover:function(){}, 

        mouseout:function(){}

    });

3>  .on将数据传递到处理程序

    function greet( event ) {

      alert( "Hello " + event.data.name ); //Hello 慕课网

    }

    $( "button" ).on( "click", {

      name: "慕课网"

    }, greet );

   

2. 委托机制 .on

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

3. 卸载事件off()方法

    通过.on()绑定的事件处理程序

    通过off() 方法移除该绑定

    $("elem").off("mousedown mouseup")

    $("elem").off()   节点上绑定的所有事件讲全部销毁

4. 事件对象

事件对象是用来记录一些事件发生时的相关信息的对象。

事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

target 属性可以是注册事件时的元素，或者它的子元素

  event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

5. 事件对象的属性和方法

event.type：获取事件的类型

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

event.preventDefault() 方法：阻止默认行为

     event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过

event.stopPropagation() 方法：阻止事件冒泡

    事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

    左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

    冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

trigger() 方法触发被选元素的指定事件类型

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现

若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，不同：

    triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()

    .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素

    使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理

    与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

jQuery 动画

1. 隐藏元素 hide()  显示元素show()

.hide( options )

.hide( "fast / slow")  'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

$('elem').hide(3000).show(3000)

注意事项：

show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置

如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

2. 显示与隐藏切换toggle方法

    .toggle( [duration ] [, complete ] )

3. 下拉动画slideDown

.slideDown()：用滑动动画显示一个匹配元素

.slideDown( [duration ] [, complete ] )

下拉动画是从无到有，所以一开始元素是需要先隐藏起来的，可以设置display:none

如 果提供回调函数参数，callback会在动画完成的时候调用。将不同的动画串联在一起按顺序排列执行是非常有用的。这个回调函数不设置任何参数，但是 this会设成将要执行动画的那个DOM元素，如果多个元素一起做动画效果，那么要非常注意，回调函数会在每一个元素执行完动画后都执行一次，而不是这组 动画整体才执行一次

4. 上卷动画slideUp

    .slideUp( [duration ] [, easing ] [, complete ] )

5. 上卷下拉切换slideToggle

       .slideToggle( [duration ] ,[ complete ] )

注意：

display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值

当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局

6. 淡出动画fadeOut    淡入动画fadeIn

    fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

    fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果

    fadeIn：淡入效果，内容显示，opacity是0到1

    fadeOut：淡出效果，内容隐藏，opacity是1到0

 淡入淡出切换fadeToggle

fadeToggle切换fadeOut与fadeIn效果，所谓"切换"，即如果元素当前是可见的，则将其隐藏(淡出)；如果元素当前是隐藏的，则使其显示(淡入)

.fadeToggle( [duration ] ,[ complete ] )

7. 淡入效果fadeTo

.fadeTo( duration, opacity ,callback)

8. jQuery中toggle与slideToggle以及fadeToggle的比较

操作元素的显示和隐藏可以有几种方法，例如：

    改变样式display为none

    设置位置高度为0

    设置透明度为0

toggle、sildeToggle以及fadeToggle的区别：

    toggle：切换显示与隐藏效果

    sildeToggle：切换上下拉卷滚效果

    fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：

    toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

    slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeToggle方法

    fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。

    元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

    元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

    注释：隐藏的元素不会被完全显示（不再影响页面的布局）

9. 动画animate

.animate( properties ,[ duration ], [ easing ], [ complete ] )

.animate()方法允许我们在任意的数值的CSS属性上创建动画

    properties：一个或多个css属性的键值对所构成的Object对象

    duration时间 动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供'fast' 和 'slow'字符串，分别表示持续时间为200 和 600毫秒

    easing动画运动的算法 jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件

    complete回调  动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

.animate( properties, options )

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

10 . 停止动画stop

.stop()  当前正在运行的动画（如果有的话）立即停止

.stop( [clearQueue ], [ jumpToEnd ] )

.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

.stop(); 停止当前动画，点击在暂停处继续开始

.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行

.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

jQuery核心

1. each()

jQuery.each(array, callback )

jQuery.each( object, callback )

2. 查找数组中的索引 inArray

jQuery.inArray( value, array ,[ fromIndex ] )

jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1

如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于(或大于)-1来进行判断

$.inArray('Aaron',['test','Aaron', 'array','慕课网']);

3. 去空格神器trim()

jQuery.trim()函数用于去除字符串两端的空白字符

注意：

    移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）

    如果这些空白字符在字符串中间时，它们将被保留，不会被移除

4. DOM元素的获取get方法

如果需要单独操作合集中的的某一个元素，可以通过.get()方法获取到

注意：

    get方法是获取的dom对象，也就是通过document.getElementById获取的对象

    get方法是从0开始索引

负索引值参数

get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

5. DOM元素的获取index方法

.index()方法，从匹配的元素中搜索给定元素的索引值，从0开始计数

参数接受一个jQuery或者dom对象作为查找的条件

.index()

.index( selector )

.index( element )

 jQuery  Ajax应用

1. 使用load()方法异步请求数据

2. 使用getJSON()方法异步加载JSON格式数据

    使用getJSON()方法可以通过Ajax异步请求的方式，获取服务器中的数据，并对获取的数据进行解析，显示在页面中

3. 使用getScript()方法异步加载并执行js文件

    jQuery.getScript(url,[callback])或$.getScript(url,[callback])

4. 使用get()方法以GET方式从服务器获取数据

    $.get(url,[callback])

5. 使用post()方法以POST方式从服务器发送数据

    $.post(url,[data],[callback])

6. 使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求

7. 使用ajax()方法加载服务器数据

    jQuery.ajax([settings])或$.ajax([settings])

8. 使用ajaxSetup()方法设置全局Ajax默认选项

9. 使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数

jQuery 常用插件

1. 表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则

$(form).validate({options})

2. 表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据

$(form). ajaxForm ({options})

3. 图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片

$(linkimage).lightBox({options})

4. 图片放大镜插件——jqzoom

5. cookie插件

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

6. 搜索插件——autocomplete

$(textbox).autocomplete(urlData,[options])

7. 右键菜单插件——contextmenu

右键菜单插件可以绑定页面中的任意元素，绑定后，选中元素，点击右键，便通过该插件弹出一个快捷菜单，点击菜单各项名称执行相应操作

$(selector).contextMenu(menuId,{options});

jQuery UI插件

1. 拖曳插件——draggable

$(selector). draggable({options})

两个子类元素只能在外层的父元素中任意拖曳