权威指南之脚本化jquery

jqury函数

jquery（）（$()）有4种不一样的调用方式

第一种是最经常使用的调用方式是传递css选择器（字符串）给$()方法。当经过这种方式调用时，$()方法会返回当前文档中匹配该选择器的元素集。还能够将一个元素或jquery对象做为第二参数传递给$()方法，这时返回的是该特定元素或元素集的子元素中匹配选择器的部分。

第二种调用方式是传递一个Elment、Document或Window对象给$()方法。在这种状况下，$()方法只须简单的将该Elment、Document或Window对象封装成jquery对象并返回。这样可使得能用jqery方法来操做这些元素而不用原生DOM方法

第三中调用方式是传递HTML文本字符串给$()方法。在这种调用方式下，jquery会根据传入的文本建立好HTML元素并封装为JQuery对象并返回。当经过第三种方式调用时，$()接受可选的第二参数。能够传递Document对象来指定与所建立元素相关联的文档。第二参数还能够说object对象。此时，假设该对象的属性表示HTML属性的键/值对，这些属性将设置到所建立的对象上

var img=$("</img>",{src:url,css:{borderWidth:5},click:handleClick});

最后，第四种调用方式是传入一个函数给$()方法。此时，当文档加载完毕且DOM可操做时，传入的函数将被调用

jQuery(function(){});

$(document).ready(function(){});

传给jQuery()的函数在被调用时，this指向document对象，惟一的参数指向jQuery函数，这意味这能够释放全局的$（）函数，但在内部依旧能够延续该习惯

jQuery.noConflict//还原$（）为初始值

jQuery(function($){});让$（）成为jQuery对象的局部别名

经过$（）注册的函数将在DOMContentLoaded事件触发时由jQuery触发。当浏览器不支持该事件时，会在load事件触发时由jQuery触发。这意味这文档已经解析完毕，但图片等外部资源有可能还未加载。若是在DOM准备就绪后再传递函数给$()，传递的函数会在$（）返回以前马上调用

jQuery类库还使用jQuery（）函数做为其命名空间，

 一些概念

jquery对象

jquery对象是由jquery函数返回的对象。一个jquery对象表示一组文档元素。

选中元素

当传递CSS选择器给jquery函数时，它返回的jquery对象表示匹配该选择器的文档元素集。

jquery函数

jquery函数指定义在jquery命名空间中的函数。好比jQuery.noConflict（）。

jquery方法

jquery方法是有jquery函数返回的jquery对象的方法。

好比

$.each(a,f)

$("a").each(f);

查询和查询结果

传递CSS选择器字符串给$()，它返回的jquery对象表示匹配或者称为选中的元素集

$的返回值是一个jquery对象。jquery对象是类数组。它们拥有length属性和介于0～length-1之间的数值属性

$("body").length //1

$("body")[0] //document.body

若是不想把数组标志用在jquery对象上，可使用size（）方法来替代length属性，用get（）方法来替代方括号索引。可使用toArray（）方法来将jquery对象转化为真实数组。

jquery对象还有三个有趣的属性。selector属性是建立jquery对象时的选择器字符串（若是有的话）。context属性是上下文对象，是传递给$（）方法的第二参数，若是没有传递的话，默认是document对象，最后，全部jquery对象都一个名为

jquery的属性，检测该属性是否存在能够简单快捷地将jquery对象与其余类数组对象区分开来，jquery属性值是字符串形式的jquery版本号

var bodyscripts=$("script",document.body);

bodyscripts.selector//selector

bodyscripts.context //document.body

bodyscripts.jquery //1.4.2

$()和querySlectorAll（）区别

一、querySelectorAll在新近的浏览器中才实现，$在新、捞浏览器中都能工做

二、jquery能够经过手动实现选择，所以$()支持的css3选择器能够用在全部浏览器中，而不只是那些支持css3的浏览器。

三、$()返回的类数组对象（jquery对象）比querySelectorAll（）返回的类数组对象NodeList更加有用

each函数

它接受一个回调函数做为惟一参数，而后它对jquery对象中的每个元素调用回调函数。回调函数做为匹配元素的方法来调用，所以在回调函数里this关键字指代Element对象，each方法还会将索引值和该元素做为第一个和第二个参数传递给回调函数.注意：this和第二参数都是原生文档元素，而不是jquery对象；若是想使用jquery方法来操做该元素，须要先用$()封装它

jquery的each和foreach有一个显著区别：若是回调函数在任何一个元素上返回false，遍历将在该元素后停止（这就像在普通循环中使用break关键字）each返回调用自身的jquery对象。所以它能够用于链式调用。

$("div").each(function(index){

$(this).prepend(index+":");

if(this.id==="last")return false;

jquery的map方法

它接受回调函数做为参数，并为jquery对象的每个元素都调用回调函数，同时将回调函数的返回值收集起来，并将这些返回值封装成一个新的jquery对象返回。map调用回调函数的方式和each方法相同：元素做为this值和第二参数传入，元素的索引值做为第一参数传入。若是回调函数返回null或undefined，该值将被忽略，在本次回调中不会有任何新元素天骄到新的jquery对象中，若是回调函数返回数组或类数组对象（好比jquey对象），将会扁平化它并将其中的元素一个个添加到新的jquery对象中。注意：有map返回的jquery对象能够不包含文档元素，但它依旧能够像类数组对象同样使用

$(":header").map(function(){return this.id;}).toArrya().sort();

jquery.index()

该方法接受一个元素做为参数，返回值是该元素在此jquery对象中的索引值，若是找不到的话，则返回-1；

若是传递一个jquery对象做为参数，index方法会对该对象的第一个元素进行搜索。若是传入的是字符串，index会把它当成csss选择器，并返回该jquery对象中匹配该选择器的一组元素中第一个元素的索引值。若是什么参数都不传入，index方法返回jquery对象中第一毗邻元素的索引值。

is（）

它接受一个选择器做为参数，若是选中元素中至少有一个匹配该选择器时，则返回true

$("div").each(function(){

if($(this).is(":hidden"))return;

})

jquery的getter和setter

jquery对象上最简单、最多见的操做是获取get或设置（setter）HTML属性、css样式、元素内容和位置高宽的值

一、jquery使用同一个方法既当getter用又作setter用，而不是定义一对方法。若是传入一个新值给该方法，则它设置此值；若是没制定值，则它返回当前值。

二、用作setter时，这些方法会给jquery对象中的每个元素设置值，而后返回该jquery对象以方便链式调用

三、用作getter时，这些方法只会查询元素集中的第一个元素，返回单个值（若是要遍历全部元素，请使用map）getter不会返回自身的jquery对象，所以它只能出如今链式调用的末尾。

四、用作setter时，这些方法常常接受对象参数。在这种状况下，该对象的每个属性都指定一个须要设置的名/值对

五、用作setter时，这些方法常常接受函数参数，在这种状况下，会调用该函数来计算须要设置的值。调用该函数时的this值是对应的元素，第一个参数是该元素的索引值，当前值则做为第二参数传入。

获取和设置HTML属性

attr方法是jquery中用于html属性的getter/setter。处理浏览器的兼容性和一些特殊状况，还让HTML属性名和javascript属性名能够等同使用（当两者存在差别时）。例如，可使用for也可使用htmlFor，可使用class也可使用className。相反的函数是removeAttr（）；

获取和设置css属性

css（）方法做用于元素的css样式

在获取样式值时，css（）返回的是元素的当前样式（或称为“计算样式”）返回值可能来自style属性也可能来自样式表；注意不能获取复合样式的值，好比font或margin。而应该获取单个样式的值；好比font-weight、font-family、margin-top、margin-left。css方法容许在css样式名中使用连字符（background-color）或使用驼峰格式javascript样式名（backgroundColor），在获取样式值时，css会把数值转换成带有单位后缀的字符串返回。而在设置样式值时，则会将数值转化成字符串，在必要时添加“px”

获取和设置css类

addClasshe和removeClass用来从选中元素中添加和删除类。toggleClass的用途是，当元素尚未某些类时，给元素添加这些类；反之，则删除。hasClass用来判断某类是否存在。注意：hasClass不如addClass、removeClass、toggleClass灵活。hasClass只能接受单个类名做为参数，而且不支持函数参数。当选中元素中的任意元素有指定css类时，hasClass返回true；若是任何元素都没有，则返回false；is方法更灵活，可用来作一样的事。和classList方法相似，只是jquery的方法能够工做在全部浏览器中，而不只仅是那些支持html5 classList属性的浏览器。此外，毫无疑问。jquery的方法可操做多个元素并支持链式调用。

 

 

获取和设置HTML表单值

val方法用来设置和获取HTML表单元素的value属性，还能够用于获取和设置复选框、单选按钮以及select元素的选中状态

设置和获取元素内容

text和html方法用来获取和设置元素的纯文本或HTML内容。当不带参数调用时，text返回全部匹配元素的全部子孙文本节点的纯文本内容。该方法甚至能够工做在不支持textContent或innerText属性的浏览器中

若是不带参数调用html方法，它会返回第一个匹配元素的html内容，jquery使用innerHTML属性来实现：x.html和x[0].innerHTML同样高效

若是传入字符串给text或html，该字符串会用该元素的纯文本或格式化的HTML文本内容，它会替换掉全部存在的内容。和其余setter方法同样，咱们还能够传入函数，该函数用来计算出表示新内容的字符串：

获取和设置元素的位置高宽

当浏览器不支持getBoundingClientRect时。使用jquery方法能够更简单的获取元素的大小和位置，并兼容全部浏览器

使用offset方法能够获取或设置元素的位置。该方法相对文档来计算位置值，返回一个对象，带有left和top属性，用来表示X和Y坐标。若是传入带有这些属性的对象给该方法。它会给元素设置指定的位置

position方法很像offset方法，但它只能用作getter，它返回的元素位置是相对于其偏移父元素的，而不是相对于文档的。offset返回元素的绝对位置，用相对于文档的坐标来表示。而position则返回相对于元素的offsetParent（）的偏移量

width和height方法返回基本的宽度和高度，不包括内边距、边框、外边距。innerWidth和innerHeight返回元素的宽度和高度，包含内边距的宽度和高度。outerWidth和outerHeight一般返回的是包含元素内边距和边框的尺寸。若是像两个方法中的任意一个传入true值，它们还能够返回元素外边距的尺寸

width和heigth拥有其余4个方法（inner和outer开头的方法）所没有的特性。

首先，当jquery对象的第一个元素是window或document对象时，width和height返回的是窗口的视口大小或文档的总体尺寸。其余方法值适用于元素，不适用窗口和文档。

另外一个特性是width和height方法能够是setter也能够是getter。若是传递值给这些方法，它们会给jquery对象中的每个元素设置宽度或高度（注意：不能给window和document对象设置宽度或高度）。若是传入数值，会把它当成单位为像素的尺寸。若是传入字符串，会把它用做css的width和height属性的值，所以可使用任何css单位。最后，能够传入函数，用来计算要设置的宽度和高度。

在width和height的getter和setter行为之间有个小的不对称。用作getter时，这些方法返回元素的内容盒子的尺寸，不包括内边距、边框和外边框。用作setter时，它们只是简单设置css的width和height属性。默认状况下，这些属性也指定内容盒子的大小。可是，若是一个元素的css box-sizing属性设置为border-box，则width和height方法设置的尺寸包括内边距和边框。对于使用context-box做为盒模型的元素e，调用$(e).width（x）.width返回x值。然而，对于使用border-box模型的元素，这种状况下一部不会返回x值。

scrollTop和scrollLeft可获取或设置元素的滚动条位置。这些方法可用在window对象以及document元素上，当用在document对象上时，会获取或设置存放该document的window对象的滚动条位置。与其余setter不一样，不可传递函数给scrollTop或scrollLeft

获取和设置元素数据

jquery定义了一个名为data的getter/setter方法，可用来设置或获取与文档元素、document或window对象相关联的数据

需将数据与jquery对象中的元素关联，传递名称和值两个参数给data方法便可。还能够传递一个对象给data sette，此时，该对象的每个属性都将用作名/值对，用来与jquery对象的元素关联。注意，传递对象给data时，该对象的属性将替换掉与元素相关联的旧数据。data不接受函数参数。当将函数做为第二参数传递个data时，该函数会存储，就和其余值同样。

data方法也能够用作getter，当不带参数调用时，它会返回一个对象，含有与jquery对象中的第一个元素相关联的全部名值对，当传入一个字符串参数调用data时，它将会返回对于第一个元素与该字符串参数相关联的数据值

removeData方法用来从元素中删除数据（使用data设置值为null或undefined和实际上删除该值不是同一回事）。若是传递字符串给removeData，该方法会删除元素中与该字符串相关联的值。若是不带参数调用removeData，它会删除与元素相关联的全部数据

 

插入和替换元素

根据调用的方法不一样，会在选中元素的里面、前面或后面位置插入内容。若是待插入的内容是已存在于文档中的元素，会从当前位置移走它，若是它须要插入屡次，在必要时会复制该元素。这些方法都返回调用自身的jquery对象。注意，在replaceWith运行后，该jquery对象中的元素将再也不存在于文档中

这5个用于结构修改的方法的都接受函数参数，用来计算出须要插入的值，和日常同样，若是传入函数，该函数会为每一个选中元素调用一次。this值将指向该元素，在jquery对象中元素的索引值将做为第一参数。对于append、prepend和replaceWith，第二参数将是该元素当前内容的HTML字符串形式。对于before和after，该函数调用时没有第二参数

 若是传递字符串给第二列中的方法，会把他看成须要插入的html字符串，若是传递字符串给第三列中的方法，会把他看成选择器，用来标识目标元素。

第三列中的方法不接受函数参数，第二栏能够

第二列中的方法返回调用自身的jquery对象

复制元素

若是想复制元素到新位置而不是移动它，必须首先用clone方法来获得一个副本。clone建立并返回每个选择元素（包含元素全部子孙）的一个副本，返回的jquery对象的元素还不是文档的一部分，能够用上一节中的方法将其插入文档中：

 

clone不会复制事件处理程序和与元素关联的其余数据，若是想复制这些额外的数据，请传入true参数。

包装函数

wrap包装每个选中元素。wrapInner包装每个选中元素的内容，wrapAll则将选中元素作为一组来包装，这些方法一般传入一个新建立的包装元素或用来创新包装元素的HTML字符串，若是须要，HTML字符串能够包含多个嵌套元素，但必须是单个最内层的元素。若是传入函数给这些方法，它会在每一个元素的上下文中调用一次，this指向该元素，元素的索引值是惟一参数，应该返回须要返回表示包装元素的字符串、Element或jquery对象

删除元素

empty会删除每一个选中元素的全部子节点（包括文本节点），但不会修改元素自身，

对比而已remove方法会从文档中移除选中元素(以及全部元素的内容)—一般不带参数调用remove，此时会从文档中移除jquery对象中的全部元素。然而，若是传入一个参数，该参数会被当成选择器，jquery对象中只有匹配该选择器的元素才会被移除（若是只想将元素从选中元素集中移除，而不须要从文档中移除时，请使用filter，注意，将元素从新插入文档前，移除操做是没有必要的：简单的将其插入新位置，就会移动它们）

remove方法会移除全部事件处理程序以及可能绑定到被移到被移除元身上的其余数据，detach方法和remove相似，但不会移除事件处理程序和数据。想临时从文档中移除元素以便后续再次插入时，detach可能会更有用。

unwrap方法能够用来实现元素的移除。其方式是wrap或wrapAll方法的反操做：移除每个选中元素的父元素，不影响选中元素及其兄弟节点

与remove和detach不一样，unwrap不接受可选的选择器参数。

 事件处理程序的简单注册

好比给单击事件注册一个事件处理程序，只要调用clilck方法

$("p").click(function(){$(this).css("background-color","gay")});

 调用jquery的事件注册方法能够给全部选中元素注册处理程序

注意。focus和blur事件不支持冒泡，但foucusin和focusout事件都支持，相反的，mouseover和mouseout事件支持冒泡，但这常常不方便，由于很难知道鼠标是从本身感兴趣的元素中移开了，还只是从该元素的子孙元素中移开了。mouseenter和mouseleave是非冒泡事件，能够解决刚才的问题。

resize和unload事件类型只在window对象中触发，若是想要给这个两个事件类型注册处理程序，应该在$(window)上调用resize和unload方法。scroll方法常常也用于$(window)对象上，但它也能够用在有滚动条的任何元素上（好比，当CSS的overflow属性设置为scroll或auto）。load方法可在$(window)上调用，用来给窗口注册加载事件处理程序，但更好的选择是$()。固然，还能够在iframe和图片上使用load方法。用不一样的参数调用时，load还能够用于加载新内容（经过脚本化HTTP）到元素中。error方法可用在img元素上，用来注册当图片加载失败时调用的处理程序。hover（）方法用来给mouseenter和mouseleave事件注册处理程序。调用hover（f,g）就和调用mouseenter（f）而后调用mouseleave（g）同样。若是仅传入一个参数给hover，该参数函数就会同时用做enter和leave事件的处理程序。

toggle方法将事件处理程序绑定到单击事件。可指定两个或多个处理程序函数，当单击事件发生时，jquery每次调用一个处理程序函数

能够传递HTML字符串给$()方法来建立该字符串所描述的元素，还能够传入一个对象（看成第二个参数），该对象有属性组成，这些属性可设置到新建立的元素上。这第二个参数能够是传递给attr（）方法的任意对象。此外，若是这些属性中有任何一个与上面列举的时间注册方法同名，该属性值会被看成处理程序函数，并注册为命名事件类型的处理程序。

jquery事件处理程序

每一个事件处理程序都传入一个jquery对象做为第一个参数，该对象的字段提供了与该事件相关的详细信息（好比鼠标指针的坐标）。一般，调用事件处理程序时只带有事件对象这个惟一参数。若是用trigger显示触发事件，能够传入额外的参数数组。这样作时，这些参数会在第一个事件对象参数以后传递给事件处理程序。

jquery事件处理程序函数的返回值始终有意义。若是处理程序返回false，与该事件相关联的默认行为，以及该事件接下来的冒泡都会被取消。也就是说，返回false等同于调用event对象的preventDefault和stopPrapagation方法。一样，当事件处理程序返回一个值（非undefined值）时，jquery会将该值存储在Event对象的result属性中，该属性能够被后续调用的事件处理程序访问

事件处理程序的高级注册

在最简单形势下，bind须要一个事件类型字符串做为其第一参数，以及一个事件处理程序做为其第二个参数

$("p").click(f)等价于$("p").bind("click",f);

调用bind时还能够带有三个参数，在这种形式下，事件类型是第一个参数，处理程序函数时第三个参数。在这两个参数中间能够传入任何值，jquery会在调用处理程序前，将指定的值设置为Event对象的data属性。bind还有其余高级特性。若是第一个参数是由空格分隔的事件类型列表，则处理程序函数会为每个命名的事件类型注册，例如

$("a").hover(f)

$("a").bind("mouseenter mouseleave",f);

bind的另外一个重要特性是容许为注册的事件处理程序指定命名空间。甚至能够给处理程序分配多个命名空间

$("a").bind("mouseover.myMod",f);

$("a").bind("mouseout.myMod.yourMod",f);

bind的最后一个特性是，第一参数能够是对象，该对象把事件名映射处处理程序函数

$("a").hover(f,g);

$("a").bind({mouseenter:f;mouseleave:g});

当使用bind的这种形式时，传入对象的属性名可使空格分隔的事件类型的字符串，也可包括命名空间。若是在第个对象参数以后还指定第二个参数，其值会用作每个事件绑定的数据参数。

jquery还有另外一个事件处理程序注册方法，调用one（）方法就和bind同样，两者的工做原理也相似，除了在调用事件处理程序以后会自动注销它，使用one注册的事件处理器永远只会触发一次

使用addEventListener能够注册捕获事件的处理。bind和one没有改特性，IE（IE9如下版本）不支持捕获处理程序，jquery不打算模拟该特性。

注销事件处理程序

用bind（或任何其余更简单的事件注册方法）注册事件处理程序后，可使用unbind来注销它，以免在未来的事件中触发它。注意unbind只注销用bind和相关jquery方法注册的事件处理程序。经过addEventListener或IE的attachEvent方法注册的处理器不会注销，而且不会移除经过onclick和onmouseover等元素属性定义的处理程序 ，不带参数 时，unbind会注销jquery对象中全部元素的（全部事件类型的）全部事件处理程序

$("*").unbind();

带有一个字符串参数时，有该字符串指明的事件类型（能够是多个，当字符串含有多个名字时）的全部处理程序会从jquery对象的全部元素中取消绑定

$("a").unbind("mouseover mouseout");

若是模块使用命名空间来注册事件处理程序，则可使用unbind，传入一个参数，来作到只注销命名空间下的处理程序：

若是想当心的只取消绑定本身注册的事件处理程序，但没有使用命名空间，必须保留事件处理程序函数的一个引用，并使用unbind带两个参数的版本，在这种形式下，第一个参数是事件类型字符串（不带命名空间），第二个参数是处理程序函数

$("#mybutton").unbind("click",myclickhandler);

经过这种方式调用时，unbind从jquery对象的全部元素中注销特定类型的指定事件处理程序函数。注意，即使使用有3个参数的bind经过额外的数据值注册事件处理程序。也可使用有两个参数的unbind事件来取消绑定他们

能够传递单一对象参数给unbind，在这种状况下，unbind会轮询为该对象的每个属性调用一次。属性名会用做事件类型字符串，属性值会用做处理程序函数：

$("a").unbind({

mouseover:mouseoverHandler,

mouseout:mouseoutHandler

})

最后，还有一种方式来调用unbind。若是传递一个jquery event对象给unbind，它会取消绑定传入事件的事件处理程序。，调用unbind（ev）等价于unbind（ev.type,ev.handler）.

 触发事件

手动触发事件最简单的方式是不带参数调用事件注册的简单方法（click和mouseover），这些事件方法在带有一个参数时会注册事件处理程序，不带参数调用时则会触发事件处理程序。例如

$("my_form").submit();

上面的submit方法本身合成了一个event对象，并触发了给submit事件注册的全部事件处理程序。若是这些事件处理程序都没有返回false或者调用event对象的preventDefault，实际上将提交该表单。注意

jquery的事件触发方法会触发全部使用jquery事件注册方法注册的处理程序，也会触发经过onsubmit等html属性或element属性定义的处理程序。可是，不能手动触发使用addEventListener或attachEvent注册的事件处理程序（固然，在真实事件触发时，这些处理程序依旧会调用）

jquery的事件触发机制是同步的-不涉及事件队列。当触发一个事件时，在调用的触发方法返回以前，事件处理程序会马上调用。若是触发了一个单击事件，被触发的处理程序又触发了一个submit事件，全部匹配的submit处理程序会在调用下一个点击处理器以前调用。

一般，调用trigger时会传入事件类型字符串做为第一个参数，trigger会在jquery对象中的全部元素上触发该类型事件注册的全部处理程序

$("#my_form").trigger("submit");

与bind和unbind方法不一样，在传入的字符串中不能指定多个事件类型。然而，与bind和unbind同样的是，能够指定事件命名空间来触发仅在该命名空间中定义的处理程序。若是只想触发没有命名空间的事件处理程序，在事件类型后添加一个感叹号就行。经过onclick等属性注册的处理程序被认为是没有命名空间的

$("button").trigger("click.ns1");//触发某个命名空间下的单击处理程序
$("button").trigger("click!");//触发没有命名空间的单击处理程序

除了给trigger传入事件类型字符串做为第一个参数，还能够传入Event对象（或任何有type属性的对象）。type属性会用来判断触发什么类型的处理程序。若是传入的是jquery事件对象，该对象会传递给触发的处理程序。若是传入的是普通对象，会建立一个新的jquery event对象，普通对象的属性会添加到新对象中，这样，能够很容易传递额外数据给事件处理程序

给事件处理程序传递额外数据的另外一种方式是，在手动触发事件时，给trigger传入第二个参数。给trigger传入的第二个参数会成为每一个触发的事件处理程序的第二参数。若是传入数组做为第二参数，数组的每一项会做为独立参数传递给触发处理程序

$("button").trigger("click"，true);//传入一个额外参数
$("button").trigger("click",[x,y,z]);//传入三个额外参数

trigg（及调用它的便捷方法）在调用事件处理程序后，会执行与触发事件相关联的默认操做（假设事件处理程序没有返回false或调用事件对象的preventDefault）。若是想调用事件处理程序，但不执行默认操做，可使用triggerHandler替代

trigg。该方法和trigg相似，除了首先会调用event对象的preventDefault和cancelBubble方法。这意味这经过triggHandler手动触发的事件不会冒泡，也不会执行相关联的默认操做。

实时事件

若是使用bind给文档中的全部a元素绑定了事件处理程序，接着又建立了带有a元素的新文档内容，这些新元素和老元素不会拥有相同的事件处理程序，其行为将不同。要使用实时事件，须要使用delegate和undelegate方法来替代bind和unbind。一般，在$(document)上调用delegate，并传入一个jquery选择器字符串，一个jquery事件类型字符串以及一个jquery事件处理程序函数。它会在document或window上（或jquery对象中的任何元素上）注册一个内部处理程序。当指定类型的事件冒泡到该内部处理程序时，它会判断事件目标（该事件所发生在的元素）时候匹配选择器字符串，若是匹配，则调用指定的处理程序函数。

$(document).delegate("a","mouse",linkHandler);
$(".dynamic").delegate("a","mouseover",linkHandler);

与bind方法拥有三参数版原本指定事件对象的data属性同样，delegate方法拥有4参数版本用来干一样的事。使用这种版本时，将数据值做为第三参数传入，处理程序函数则做为第四参数。实时事件依赖于事件冒泡。当事件冒泡到document对象时，它哟可能已经传递给了不少静态事件处理程序，若是这些处理程序中有任何一个调用了Event对象的cancelBubble方法，实时事件处理程序将永远不会调用。

live也能够用来注册实时事件，和bind同样，lvie也有两参数和三参数的调用形式，

$("a").live("mouseover",linkHandler);
$("a",$(".dynamic")).live("mouseover",linkHandler);

在jquery对象上调用live方法时，该对象中的元素实际上并无使用。真正有关系的是用来建立jquery对象的选择器字符串和上下文对象（传递给$的第一个和第二个参数）。jquery对象经过context和selector属性来使得这些值可用，一般，仅带一个参数调用$时，context是当前文档。所以，对于jquery对象x，下面两行等效

x.live(type);
$(x.context).delegate(x.selector,type,handler);

要注销实时事件处理程序，使用die或undelegate，能够带一个或两个参数调用die。带有一个事件类型参数时，die会移出匹配选择器和事件类型的全部实时事件处理程序 。带有事件类型和处理程序函数参数时，它值删除指定的处理程序。                                                                   

$("a").die("mouseover");//移除a元素上mouseover事件的全部实时处理程序

$("a").die("mouseover",linkHandler);//只移除一个指定的实时处理程序

   undelegate相似die，但更显示的分开context（内部事件处理程序所注册的元素）和选择器字符串

           最后，undelegate也不带任何参数调用，在这种状况下，   它会注销从选中元素委托的 全部实时事件处理程序。                                                                                                 

动画效果fadeIn和fadeOut

每段动画都有时长，用来指定动画效果持续多长时间。能够用毫秒数值或字符串来指定时长。字符串fast表示200ms。字符串slow表示600ms。若是指定的字符串时长jquery没法识别，则采用默认时长400ms，能够个jquery.fx.speeds添加新的字符串到数值映射关系来定义新的时长名字：

jquery.fx.speeds["medium-fast"]=300;

jquery.fx.speeds["medium-slow"]=500;

jquery动画方法常用动画时长来做为可选的第一个参数。若是省略时长参数，一般会获得默认值400ms。

$("#message").fadeIn();//400ms

$("#message").fadeOut("fast")//200ms

禁用动画

$(".stopmoving").click(function(){jquery.fx.off=true;})

jquery动画是异步，调用fadeIn等动画方法，它会马上返回，动画则在后台执行，因为动画方法会在动画完成以前返回，所以能够向不少jquery动画方法传入第二个参数（哦也是可选的），该参数时一个函数，会在动画完成时调用。该函数在调用时不会有任何参数传入，但this值会设置为发生动画的文档元素。对于每一个选中元素都会调用一次该回调函数：

$("#message").fadeIn("fast",function(){$(this).text("hell world");});//用淡入效果快速显示元素，动画完成时，在元素里显示一些文字

给动画方法传入回调函数，能够在动画结束时执行操做。jquery动画方法能够接受可选的时长和回调函数。还能够传入一个对象来调用动画方法，该对象的属性值指定动画选项：

$("#message").fadeIn({
duration:"fast",
complete:function(){$(this).text("hello world");}
});

fadeIn fadeOut fadeTo

show hide toggle

fadeOut方法可让元素不可见，但依然保留了元素在文档布局中的占位。hide方法则会将元素从布局中移除，就好象把CSS的display属性设置为none同样。给toggle传入true和不带参数调用show是同样的，传入false则和不带参数调用hide是同样的。注意，若是传入两个或多个函数参数给toggle，它会注册为事件处理程序

slideDown slideUp、slideToggle

slideUp会隐藏jquery对象中的元素，方式是将其高度动态变化到0，而后设置css的display属性为none

animate方法

传给animate方法的第一个参数时指定动画内容，剩余参数指定如何定制动画。第一个参数时必需的：它必须是一个对象，该对象的属性指定要变化的css属性和它们的目标值。animate方法会将每一个元素的这些css属性从初始值指定的目标值

$("img").animate({height:0});

第二个参数时可选的，能够传入一个选项对象给animate方法

$("#sprite").animate({opactiy:.25,font-size:10},{durarion:500,complete:function(){this.text("goodbye");}

});

除了将选项对象做为第二个参数传入，animate方法还容许三个最经常使用的选项做为参数传入。能够将动画时长（数值或字符串）做为第二个参数传入。能够指定缓动函数名为第三个参数。最后能够将回调函数指定为第四个参数。

动画属性对象

animate方法的第一参数必须是对象。该对象的属性名必须是css属性名，这些属性的值必须是动画的目标值。动画只支持数值属性：对于颜色、字体或display等枚举属性是没法实现动画效果的，若是属性值是数值,则默认单位是像素。若是属性值

是字符串，能够指定单位。还能够指定相对值，用+=前缀表示增长，或用-=表示减小；例如

$("p").animate({"margin-left":"+=.5in",opacity:"-=.1"})

支持“margin-left”和“marginLeft”两种写法

除了数值（能够带有单位、+=或-=前缀），在进去而已动画属性对象中，还可使用三个其余值，hide值会保存属性的当前值，而后将该属性的值变化到0，show值会将css属性的值还原到以前保存的值，若是一段动画使用了show，jquery会在动画完成时调用show方法。若是一段动画使用了hide，jquery会在动画完成时调用hide方法

动画选项对象

duration属性指定动画持续的毫秒时间，该属性的值还能够是fast slow或任何在jquery.fx.speeds中定义的名称

complete属性指明在动画完成时的回调函数，step属性指定在动画每一步或每一帧调用的回调函数。在回调函数中，this指向正在连续变化的元素，第一个参数则是正在变化的属性的当前值

queue属性指定动画时候须要队列化-时候须要等到全部还没有发生的动画都完成后再执行该动画，默认状况下，全部动画都是

队列化的，将queue属性设置为false能够取消队列化。非队列化的动画会马上执行。随后队列化的动画不会等非队列化的动画执行完成后才执行。剩余的动画选项和缓动函数有关

动画的取消、延迟和队列

stop方法接受两个可选的布尔参数。若是第一个参数时true，会清楚该选择元素上的动画队列：除了中止当前动画，还会取消任何等待执行的动画。第一参数的默认值是false：若是忽略该参数，等待执行的动画不会被取消。第二个参数用来指定正在连续变化的css属性是否保留当前值，仍是应该变化到最终目标值。传入true可让它们变化到最终值。传入false（或省略该参数）会让他们保持为当前值。

load方法

向它传入一个url，它会异步加载该url的内容，而后将内容插入每个选中元素，替换掉已经存在的内容

setInterval(function(){$("#status").load("status_report.html");},60000);//每隔60秒加载并显示最新的状态报告

若是传给改方法的第一参数是函数而不是字符串，则load方法是事件处理程序注册方法而不是ajax方法。

若是只想显示被加载文档的一部分，能够在url后面添加一个空格和一个jquery选择器

$("#temp").load("wheather_report.html #temperature");//加载并显示天气预告的温度部分

除了必须的url参数，load方法还接受两个可选参数。第一个可选参数表示的数据，能够追加到url后面，或者与请求一块儿发送。若是传入的是字符串，则会追加到url后面，若是传入对象，该对象会被转化为一个用&分隔的名值对后一块儿发送，一般状况下，load方法发送http get请求，可是若是传入数据对象，则发送post请求：

$("#temp").load("wheather_report.html","zipcode=01243");//加载并显示天气预告

$("#temp").load("wheather_report.html",{zipcode:01234,units:'f'});//加载并显示天气预告

load方法的另外一可选参数是回调函数，当ajax请求成功或未成功，以及（当请求成功时）url加载完毕并插入选中元素时，会调用该回调函数。若是没有指定任何数据，回调函数能够做为第二个参数传入，不然，它必须是第三个参数。在jquery对象的每一元素上都会跳跃回调函数，而且每次调用都会传入三个参数：被加载url的完整文本内容、状态码，以及用来加载该url的XMLHttpRequest对象。其中，状态参数是jquery的状态码，不是http的状态码，其值相似success、error和timeout的字符串。