第一章 選擇器##

1亮垫、基本選擇器###

<code>(".class")</code>：class選擇器甜橱，返回集合元素
<code>("*")</code>：通配符選擇器拂苹，選擇所有元素，返回集合元素
<code>$("selector1,selector2")</code>：選擇所有選擇器匹配的元素痰洒，返回集合元素

2瓢棒、層次選擇器###

<code>("parent>child")</code>：選擇parent下的child子元素,
<code>("prev~siblings")</code>：獲取prev后面的所有同輩siblings元素
說(shuō)明：
<code>("prev").next()</code>效果相等
<code>("prev").sibling()</code>效果相等

3丘喻、基本過(guò)濾選擇器###

<code>:first</code>：選取第一個(gè)元素脯宿，返回單個(gè)元素
<code>:last</code>：選取最后一個(gè)元素，返回單個(gè)元素
<code>:not(selector)</code>：去除所有給定選擇器所匹配的元素泉粉，返回集合元素
<code>:even</code>：選取索引為偶數(shù)的所有元素连霉，索引號(hào)從0開始榴芳，返回集合元素
<code>:odd</code>：選取索引為奇數(shù)的所有元素，索引號(hào)從0開始跺撼，返回集合元素
<code>:ep(index)</code>：選取索引等于index的元素窟感，index從0開始返回單個(gè)元素
<code>:gt(index)</code>：選取索引號(hào)大于index的所有元素,返回集合元素
<code>:lt(index)</code>：選取索引小于index的所有元素，返回集合元素
<code>:header</code>：選取所有的標(biāo)題元素歉井，返回集合元素
<code>:animated</code>：選取正在執(zhí)行動(dòng)畫的元素柿祈，返回集合元素
<code>:focus</code>：選取當(dāng)前獲取焦點(diǎn)的元素，返回集合元素

4哩至、內(nèi)容過(guò)濾選擇器###

<code>:contains(text)</code>：選取含有文本內(nèi)容為text的元素躏嚎，返回集合元素
<code>:empty</code>：選取沒(méi)有子節(jié)點(diǎn)或者文本的空元素，返回集合元素
<code>:has(selector)</code>：選取含有選擇器所匹配的元素的元素菩貌，返回集合元素
<code>:parent</code>：選取含有子節(jié)點(diǎn)或者文本的元素紧索，返回集合元素

5、可見性過(guò)濾選擇器###

<code>:hidden</code>：選取所有不可見的元素菜谣，返回集合元素
<code>:visible</code>：選取所有可見的元素珠漂，返回集合元素

6、屬性過(guò)濾選擇器###

<code>[attribute]</code>：選取含有此屬性的元素尾膊，返回集合元素
<code>:[attribute=value]</code>：選取屬性的值為value的元素媳危，返回集合元素
<code>:[attribute!=value]</code>：選取屬性的值不為value的元素，返回集合元素
<code>:[attribute^=value]</code>：選取屬性的值以value開始的元素冈敛，返回集合元素
<code>:[attribute$=value]</code>：選取屬性的值以value結(jié)尾的元素待笑，返回集合元素
<code>:[attribute*=value]</code>：選取屬性的值含有value的元素，返回集合元素
<code>:[attribute|=value]</code>：選取屬性的值等于value或者是以value為前綴（即“value-”抓谴，value后面跟一個(gè)連字符）的元素暮蹂，返回集合元素
<code>:[attribute~=value]</code>：選取屬性的值以空格分隔的值中含有value的元素，返回集合元素
<code>:[attribute1][attribute1]……[attributeN1]</code>：用多個(gè)屬性選擇器合并成一個(gè)復(fù)合屬性選擇器癌压，返回集合元素

7仰泻、子元素過(guò)濾選擇器###

<code>:nth-child(index/even/odd)</code>：選取父元素下的第index個(gè)子元素，index值從1開始滩届，或者選取奇偶子元素,返回集合元素
<code>:first-child</code>：選取父元素下的第一個(gè)元素集侯，返回集合元素
<code>:last-child</code>：選取父元素下的最后一個(gè)子元素，返回集合元素
<code>:only-child</code>：如果元素是父元素的唯一的元素帜消，則選擇棠枉，否則，不選擇泡挺，返回集合元素
另外<code>:nth-child()</code>還可以通過(guò)數(shù)學(xué)表達(dá)式選取一組特定的元素辈讶，如:
<code>:nth-child(3n)</code>：選取父元素下所有3的倍數(shù)的子元素（n從1開始，即選取第3娄猫，6贱除，9咳促，……個(gè)元素）

10、表單選擇器###

<code>:input</code>：選取所有的input勘伺、textarea跪腹、select、button元素飞醉，返回集合元素
<code>:text</code>：選取所有單行文本框冲茸，返回集合元素
<code>:password</code>：選取所有的密碼框，返回集合元素
<code>:radio</code>：選取所有的單選框缅帘，返回集合元素
<code>:checkbox</code>：選取所有的多選框轴术，返回集合元素
<code>:submit</code>：選取所有提交按鈕，返回集合元素
<code>:image</code>：選取所有的圖像按鈕钦无，返回集合元素
<code>:reset</code>：選取所有的重置按鈕逗栽，返回集合元素
<code>:button</code>：選取所有的按鈕，返回集合元素
<code>:file</code>：選取所有的上傳域失暂，返回集合元素

9彼宠、表單對(duì)象屬性過(guò)濾選擇器###

<code>:enabled</code>：選取所有可用元素，返回集合元素
<code>:disabled</code>：選取所有不可用元素弟塞，返回集合元素
<code>:checked</code>：選取所有被選中的元素（單選框和多選框）凭峡，返回集合元素
<code>:selected</code>：選取所有被選中的元素（下拉列表），返回集合元素

第二章 DOM操作##

1决记、查找摧冀、設(shè)置咪奖、刪除屬性###

1宗挥、attr()方法：接受一個(gè)或兩個(gè)參數(shù)，一個(gè)參數(shù)是獲取屬性值俺夕，兩個(gè)參數(shù)是設(shè)置屬性,需要設(shè)置多個(gè)屬性時(shí)扩借，attr方法的參數(shù)可以是一個(gè)由屬性和屬性值組成的json數(shù)據(jù)格式

$("div").attr("background");//獲取屬性值
$("div").attr("background","blue");//設(shè)置屬性值
$("div").attr({"background":"blue","height":"200px"});//設(shè)置多個(gè)屬性值

2椒惨、css()方法：接受一個(gè)或兩個(gè)參數(shù)，當(dāng)一個(gè)參數(shù)是屬性名時(shí)往枷，獲取屬性值框产，當(dāng)兩個(gè)參數(shù)時(shí)，設(shè)置屬性第一個(gè)參數(shù)為屬性名错洁，第二個(gè)參數(shù)為屬性值，需要設(shè)置多個(gè)屬性時(shí)戒突，css方法的參數(shù)可以是一個(gè)由屬性和屬性值組成的json數(shù)據(jù)格式

$("div").css("background");//獲取屬性值
$("div").css("background","blue");//設(shè)置屬性值
$("div").css({"background":"blue","height":"200px"});//設(shè)置多個(gè)屬性值

另外width()方法和height()方法可以直接獲取寬度和高度
3屯碴、addClass()：為元素添加class值，可批量添加屬性與值

$("div").addClass("myclass");

4膊存、removeAttr()：刪除指定的屬性

$("div").removeAttr("background");

5导而、removeClass()：有參數(shù)時(shí)忱叭，刪除指定的class值，沒(méi)有參數(shù)時(shí)今艺，刪除全部的class值

$("div").removeClass("myclass");
$("div").removeClass();

6韵丑、hasClass()：判斷匹配的元素是否有某個(gè)class值，有則返回true虚缎，沒(méi)有則返回false

$("div").hasClass("myclass");

2撵彻、創(chuàng)建元素、文本实牡、屬性節(jié)點(diǎn)###

均可以直接將元素陌僵、文本、屬性添加到("<p title='mytitle'>假裝是標(biāo)題</p>")</code>

3碗短、插入節(jié)點(diǎn)###

1、append()：向元素內(nèi)部添加節(jié)點(diǎn)题涨，如：

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("p").append("<span>我是追加的內(nèi)容</span>");
結(jié)果：
<p>我是內(nèi)容<span>我是追加的內(nèi)容</span></p>

2偎谁、appendTo()：將元素添加到指定元素內(nèi)部，即將append方法中的鏈?zhǔn)讲僮鞯某蓡T互換位置

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("<span>我是追加的內(nèi)容</span>").appendTo("p");
結(jié)果：
<p>我是內(nèi)容<span>我是追加的內(nèi)容</span></p>

3纲堵、prepend()：向元素內(nèi)部前置內(nèi)容

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("p").prepend("<span>我是追加的內(nèi)容</span>");
結(jié)果：
<p><span>我是追加的內(nèi)容</span>我是內(nèi)容</p>

4搭盾、prependTo()：將節(jié)點(diǎn)前置到指定元素中，即將prepend方法中的鏈?zhǔn)讲僮髦械某蓡T互換位置

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("<span>我是追加的內(nèi)容</span>").prependTo("p");
結(jié)果：
<p><span>我是追加的內(nèi)容</span>我是內(nèi)容</p>

5婉支、after()：在每個(gè)元素節(jié)點(diǎn)后添加節(jié)點(diǎn)

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("p").after("<span>我是追加的內(nèi)容</span>");
結(jié)果：
<p>我是內(nèi)容</p><span>我是追加的內(nèi)容</span>

6鸯隅、insertAfter()：講節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之后，即將after方法中的鏈?zhǔn)讲僮髦械某蓡T互換位置

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("<span>我是追加的內(nèi)容</span>").insertAfter("p");
結(jié)果：
<p>我是內(nèi)容</p><span>我是追加的內(nèi)容</span>

7向挖、before()：再節(jié)點(diǎn)前面插入節(jié)點(diǎn)

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("p").before("<span>我是追加的內(nèi)容</span>");
結(jié)果：
<span>我是追加的內(nèi)容</span><p>我是內(nèi)容</p>

8蝌以、insertBefore()：將節(jié)點(diǎn)插入到指定元素前面

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("<span>我是追加的內(nèi)容</span>").insertBefore("p");
結(jié)果：
<span>我是追加的內(nèi)容</span><p>我是內(nèi)容</p>

4、刪除節(jié)點(diǎn)###

1何之、remove()：從DOM中刪除所有匹配的元素跟畅，同時(shí)該節(jié)點(diǎn)所包含的所有后代節(jié)點(diǎn)將同時(shí)被刪除，因?yàn)榉祷刂凳莿h除節(jié)點(diǎn)的引用溶推，因此可以在以后繼續(xù)使用這些元素徊件，但是此時(shí)這些節(jié)點(diǎn)所綁定的事件也會(huì)刪除，如：

var $li=$("ul li:eq(1)").remove();//刪除節(jié)點(diǎn)
$li.appendTo("ul");//將節(jié)點(diǎn)添加回去

2蒜危、detach()：和remove()幾乎一樣虱痕，不同的是detach方法不會(huì)刪除節(jié)點(diǎn)所綁定的事件和附加的數(shù)據(jù)
3、empty()：清空所匹配的節(jié)點(diǎn)

$("ul li:eq(1)").empty();//此時(shí)第一個(gè)li標(biāo)簽內(nèi)無(wú)任何內(nèi)容及節(jié)點(diǎn)了

5辐赞、復(fù)制節(jié)點(diǎn)###

clone()：復(fù)制節(jié)點(diǎn)部翘，可以有參數(shù)true，當(dāng)有true參數(shù)時(shí)响委，將同時(shí)復(fù)制節(jié)點(diǎn)所綁定的事件新思，如：

$("ul li:eq(1)").clone(true).apppendTo("ul");

6窖梁、替換節(jié)點(diǎn)###

1、replaceWith()：將匹配的節(jié)點(diǎn)替換成指定的節(jié)點(diǎn)

$("p").replaceWith("<ul><li></li></ul>");

2夹囚、replaceAll()：用指定的節(jié)點(diǎn)替換相應(yīng)節(jié)點(diǎn)纵刘，即將replaceWith方法中的鏈?zhǔn)讲僮髦械某蓡T互換位置

$("<ul><li></li></ul>").replaceWith("p");

7、包裹節(jié)點(diǎn)###

1荸哟、wrap()：將匹配的節(jié)點(diǎn)用指定的節(jié)點(diǎn)單獨(dú)包裹起來(lái)

html代碼：
<p>我是內(nèi)容</p>
<p>我是另一個(gè)內(nèi)容</p>
jQuery代碼：
$("p").wrap("<span></span>");
結(jié)果：
<span><p>我是內(nèi)容</p></span>
<span><p>我是另一個(gè)內(nèi)容</p></span>

2假哎、wrapAll()：將匹配的節(jié)點(diǎn)用指定的節(jié)點(diǎn)全部包裹起來(lái)

html代碼：
<p>我是內(nèi)容</p>
<p>我是另一個(gè)內(nèi)容</p>
jQuery代碼：
$("p").wrap("<span></span>");
結(jié)果：
<span>
      <p>我是內(nèi)容</p>
      <p>我是另一個(gè)內(nèi)容</p>
</span>

3、wrapInner()：將匹配的節(jié)點(diǎn)內(nèi)部的節(jié)點(diǎn)或者文本內(nèi)容用指定的節(jié)點(diǎn)包裹起來(lái)

html代碼：
<p>我是內(nèi)容</p>
jQuery代碼：
$("p").wrapInner("<span></span>");
結(jié)果：
<p><span>我是內(nèi)容</span></p>

8敲茄、設(shè)置位谋、獲取文本、HTML和值###

1堰燎、html()：類似于原生JavaScript中的innerHTML屬性掏父，不含參數(shù)時(shí)是獲取，包含元素節(jié)點(diǎn)和文本節(jié)點(diǎn)秆剪，當(dāng)內(nèi)有字符串參數(shù)時(shí)赊淑，是重新設(shè)置節(jié)點(diǎn)內(nèi)容和文本內(nèi)容

$("p").html();

2、text()：類似于原生JavaScript中的innerText屬性仅讽，不含參數(shù)時(shí)是獲取文本節(jié)點(diǎn)陶缺，當(dāng)內(nèi)有字符串參數(shù)時(shí)，是重新設(shè)置文本內(nèi)容

$("p").text("我是內(nèi)容");

3洁灵、val()：類似于原生JavaScript中的value屬性饱岸，可以用來(lái)獲取和設(shè)置元素的值，無(wú)論是元素或者文本框徽千，下拉列表或者單選框苫费，如果元素是多選，則返回一個(gè)包含所有選擇的值的數(shù)組

9双抽、遍歷節(jié)點(diǎn)###

1百框、children()：獲取所有的子元素集合，返回一個(gè)數(shù)組牍汹，只考慮子元素铐维，不考慮其他后代元素

html代碼：
<div>
<p>我是內(nèi)容
    <sapn>我是內(nèi)嵌的內(nèi)容</span>
</p>
<p>我是另一個(gè)內(nèi)容</p>
</div>
jQuery代碼：
var $div=$("div").children();
$div.length;//返回2

2、next()：獲取匹配元素后面緊鄰的同輩元素慎菲，效果類似于$("prev+next")

html代碼：
<div>
<p>我是內(nèi)容
</p>
<h1>我是另一個(gè)內(nèi)容</h1>
</div>
jQuery代碼：
var $h1=$("p").next();//返回h1元素節(jié)點(diǎn)

3嫁蛇、prev()：獲取匹配元素前面緊鄰的同輩元素

html代碼：
<div>
<h1>我是另一個(gè)內(nèi)容</h1>
<p>我是內(nèi)容</p>
</div>
jQuery代碼：
var $h1=$("p").next();//返回h1元素節(jié)點(diǎn)

4、siblings()：獲取匹配元素的前后所有的同輩元素钧嘶，類似于$("prev~siblings")

html代碼：
<div>
<h1>我是另一個(gè)內(nèi)容</h1>
<p>我是內(nèi)容</p>
<ul>我是列表</ul>
</div>
jQuery代碼：
var $h1=$("p").next();//返回h1和ul元素節(jié)點(diǎn)

5棠众、closest()：獲取最近的符合匹配的一個(gè)父元素

html代碼：
<div>
<div class="div2">
<p>我是內(nèi)容</p>
</div>
</div>
jQuery代碼：
var $div=$("p").closest();//返回class為div2的div元素

6、parent()：獲取一個(gè)父元素

html代碼：
<div>
<div class="div2">
<p>我是內(nèi)容</p>
</div>
</div>
jQuery代碼：
var $div=$("p").parent();//返回class為div2的div元素

7有决、parents()：獲取所有匹配的一個(gè)祖先元素

html代碼：
<div>
<div class="div2">
<p>我是內(nèi)容</p>
</div>
</div>
jQuery代碼：
var $div=$("p").parents();//返回兩個(gè)div元素組成的數(shù)組

10闸拿、元素定位###

1、offset()：獲取元素在當(dāng)前視窗的相對(duì)偏移书幕，返回一個(gè)對(duì)象新荤，對(duì)象包含top和left兩個(gè)屬性

html代碼：
<div>
我是內(nèi)容
</div>
jQuery代碼：
var $offset=$("div").offset();
var left=$offset.left;
var top=$offset.top;

2、position()：獲取元素相對(duì)于最近的一個(gè)position樣式屬性設(shè)置為relative或者absolute的祖父節(jié)點(diǎn)的相對(duì)偏移台汇，返回一個(gè)對(duì)象苛骨，對(duì)象包含top和left兩個(gè)屬性

html代碼：
<div style="position:relative">
      <div><p>我是內(nèi)容</p></div>
</div>
jQuery代碼：
var $position=$("p").position();
var left=$position.left;
var top=$position.top;

3、scrollTop()：獲取元素的滾動(dòng)條距離頂端的距離
4苟呐、scrollLeft()：獲取元素的滾動(dòng)條距離左側(cè)的距離

第三章 事件與動(dòng)畫##

1痒芝、加載DOM###

(docuemnt).ready()在DOM完全就緒時(shí)就可以被調(diào)用严衬，此時(shí)并不意味著這些關(guān)聯(lián)文件都已經(jīng)下載完畢；另外笆呆，().ready();

2俄精、事件綁定###

bind()：可以有三個(gè)參數(shù)，第一個(gè)參數(shù)是事件類型榕堰，第二個(gè)參數(shù)可選竖慧，作為event.data屬性值傳給事件對(duì)象的額外數(shù)據(jù)對(duì)象，第三個(gè)參數(shù)是處理函數(shù)

bind(type data fn);

常見的事件類型：

blur逆屡、focus圾旨、load、resize康二、scroll碳胳、unload、click沫勿、dbclick挨约、mousedown、mouseup产雹、mouseover诫惭、
mousemove、mouseout蔓挖、mouseenter夕土、mouseleave、change、select怨绣、submit角溃、keydown、keyup篮撑、error

另外减细，像click、mouseover赢笨、mouseout這類常用的事件未蝌，可以簡(jiǎn)寫，如下：

$(function(){
      $("h1").mouseover(function(){
            $(this).next().show()
      }).mouseout(function(){
            $(this).next().hide()
      })
})

3茧妒、合成事件###

jQuery中有兩個(gè)合成事件——hover()和toggle()方法
1萧吠、hover()：用于模擬光標(biāo)懸停事件，語(yǔ)法

hover(enter,leave);

當(dāng)光標(biāo)移動(dòng)到元素時(shí)桐筏，會(huì)觸發(fā)第一個(gè)函數(shù)纸型，離開時(shí)觸發(fā)第二個(gè)函數(shù)
2、toggle()：用于模擬鼠標(biāo)連續(xù)點(diǎn)擊事件九昧，語(yǔ)法

toggle(fn1,fn2,……,fn);

4绊袋、阻止事件之外的額外問(wèn)題##

1、停止事件冒泡
用stopPropagation()方法來(lái)停止事件冒泡铸鹰，如：

$("span").bind("click",function(event){
      //事件處理程序
      event.stopPropagation()
})

2癌别、阻止默認(rèn)行為
用preventDafault()方法來(lái)阻止默認(rèn)行為，當(dāng)然也可以用原生JavaScript中的return false如：

$(a").bind("click",function(event){
      //事件處理程序
      event.preventDafault();
      //或者return false;
})

3蹋笼、事件捕獲
事件捕獲與事件冒泡是剛好兩個(gè)相反的過(guò)程展姐，jQuery不支持事件捕獲。

5剖毯、事件對(duì)象##

添加事件對(duì)象非常簡(jiǎn)單圾笨，只需要為函數(shù)添加一個(gè)參數(shù)，一般會(huì)用event

$(a").bind("click",function(event){
      //事件處理程序
})

1逊谋、事件對(duì)象的屬性
(1)event.type：獲取事件的類型

$(a").bind("click",function(event){
      alert(event.type);
})

(2)event.target：獲取觸發(fā)事件的對(duì)象元素

$(a").bind("click",function(event){
      alert(event.target.href);
})

(3)event.pageX和event.pageY：獲取光標(biāo)相對(duì)于頁(yè)面的x坐標(biāo)和y坐標(biāo)

$(a").bind("click",function(event){
      alert(event.pageX);
      alert(event.pageY);
})

(4)event.which：在鼠標(biāo)單擊時(shí)獲取到鼠標(biāo)的左擂达、中、右鍵胶滋；在鍵盤事件中獲取到鍵盤的按鍵

$(a").mousedown(function(event){
      alert(event.which);
})

$(a").keyup(function(event){
      alert(event.which);
})

(5)event.metaKey：在鍵盤事件中獲取ctrl按鍵
2板鬓、事件對(duì)象的方法
(1)event.preventDefault()：阻止默認(rèn)事件
(2)event.stopPropagation()：阻止事件冒泡

6、移除事件##

unbind()：沒(méi)有參數(shù)時(shí)究恤，刪除所有的綁定事件俭令，可以有兩個(gè)參數(shù)，第一個(gè)參數(shù)是事件類型部宿，第二個(gè)參數(shù)是將要移除的函數(shù)抄腔，提供了事件類型，則只刪除該事件類型，提供了事件處理函數(shù)赫蛇，則只有這個(gè)事件處理函數(shù)會(huì)被刪除绵患，語(yǔ)法結(jié)構(gòu)如下

unbind(type,data)

$("a").click(function(){
      $("#btn").unbind("click",fn1);
}

另外，對(duì)于只需要觸發(fā)一次隨后就立即解除綁定的情況棍掐，jQuery提供了一種簡(jiǎn)寫方法——one()方法藏雏，這個(gè)方法可以為元素綁定處理函數(shù)拷况，當(dāng)函數(shù)觸發(fā)一次后作煌，立即被刪除；

7赚瘦、事件的其他用法##

1粟誓、模擬操作
trigger()：此方法可以模擬操作，例如

$("#btn").triggle("click")起意；

這段代碼可以觸發(fā)id為btn的按鈕的click事件
trigger()方法會(huì)觸發(fā)瀏覽器的默認(rèn)事件鹰服，如果不想執(zhí)行瀏覽器的默認(rèn)操作，可以使用jQuery中的另一個(gè)方法triggerHandler()方法
2揽咕、綁定多個(gè)事件類型
bind可以為元素綁定多個(gè)事件類型

$(function(){
      $("div").bind("mouseover mouseout",function(){
            $(this).toggleClass("over");});
})

這段代碼效果和下方代碼一樣

$(function(){
      $("div").bind("mouseover",function(){
            $(this).toggleClass("over");
      }).bind("mouseout",function(){
            $(this).toggleClass("over")悲酷；
      });
})

8、動(dòng)畫##

1亲善、show()和hide()：這兩個(gè)是jQuery中的最基本的動(dòng)畫设易，當(dāng)這兩個(gè)方法不含參數(shù)時(shí)，效果類似于直接將元素的display屬性分別改為block和none蛹头，這兩個(gè)方法當(dāng)有參數(shù)時(shí)顿肺，可以使元素慢慢顯示出來(lái)，速度關(guān)鍵字有slow渣蜗、normal屠尊、fast，此外耕拷，還可以直接指定一個(gè)數(shù)字作為顯示的時(shí)間參數(shù)讼昆，單位為毫秒，其中slow的顯示時(shí)間為600毫秒骚烧，normal的顯示時(shí)間為400毫秒浸赫，fast的顯示時(shí)間為200毫秒，這兩個(gè)方法是同時(shí)改變?cè)氐母叨戎古恕挾群筒煌该鞫?/p>

$("p").toggle(function(){
      $(this).next().hide(600);
},function(){
      $(this).next().show(600);
})

2掺炭、fadeIn()和fadeOut()：這兩個(gè)函數(shù)只改變?cè)氐牟煌该鞫龋瑯涌梢杂幸陨系乃俣葏?shù)

$("p").toggle(function(){
      $(this).next().fadeOut();
},function(){
      $(this).next().fadeIn(600);
})

3凭戴、slideUp()和slideDown()：這兩個(gè)方法只改變?cè)氐母叨冉ǎ瑂lideDown()方法使元素由上到下延伸展示，而slideUp()方法使元素從下到上縮短隱藏，同樣有上述的時(shí)間參數(shù)

$("p").toggle(function(){
      $(this).next().slideUp();
},function(){
      $(this).next().slideDown(600);
})

4者冤、toggle()：切換元素的可見狀態(tài)肤视，如果元素可見，則切換為隱藏涉枫，如果元素隱藏邢滑，則切換為可見，語(yǔ)法結(jié)構(gòu)

toggle(speed,callback);

$(this).next().toggle();

效果和hide()和show()方法類似
5愿汰、slideToggle()：通過(guò)高度來(lái)切換元素的可見性困后，語(yǔ)法結(jié)構(gòu)

slideToggle(speed,easing,callback);

6、fadeTo()：把元素的不透明度以漸進(jìn)的方式調(diào)整到指定的值衬廷，這個(gè)動(dòng)畫只調(diào)整元素的不透明度摇予，語(yǔ)法結(jié)構(gòu)

fadeTo(speed,opacity,callback)

$(this).fadeTo(100,0.3);

7、fadeToggle()：通過(guò)不透明度來(lái)切換元素的可見性吗跋，語(yǔ)法結(jié)構(gòu)

fadeToggle(speed,easing,callback);

8侧戴、animate()：自定義動(dòng)畫，語(yǔ)法結(jié)構(gòu)

animate(params,speed,callback);

params：一個(gè)包含樣式屬性及值的映射跌宛，如：{left:"400px",height:"500px"}
speed：速度參數(shù)酗宋，可選
callback：在動(dòng)畫完成后執(zhí)行的函數(shù)，可選
另外animate可以添加累加與累減動(dòng)畫疆拘，如：

$(function(){
      $("p").click(function(){
            $(this).animate({left:"+=500px"},300)
      });
});

利用animate中的第一個(gè)參數(shù)很容易實(shí)現(xiàn)同時(shí)執(zhí)行多個(gè)動(dòng)畫的效果，而需要按順序執(zhí)行動(dòng)畫入问，只需要順序?qū)慳nimate動(dòng)畫即可丹锹，另外也可以使用鏈?zhǔn)讲僮?/p>

$(this).animate({left:"500px"},300);
$(this).animate({height:"500px"},300);

等效于

$(this).animate({left:"500px"},300).animate({height:"500px"},300);

9、判斷元素是否處于動(dòng)畫狀態(tài)

if(!$("p").is(":animated")){
      //沒(méi)有處于動(dòng)畫狀態(tài)時(shí)執(zhí)行的程序
}

10芬失、延遲動(dòng)畫
延遲動(dòng)畫利用delay()方法

$(this).animate({left:"500px"},200).delay(1000);

最后是一個(gè)廣告貼楣黍，最近新開了一個(gè)分享技術(shù)的公眾號(hào)，歡迎大家關(guān)注??