jQuery框架-2.進階系列
一、操作DOM
內部插入操作:
append(content|fn):向每個匹配的元素內部追加內容。
prepend(content):向每個匹配的元素內部前置內容。
外部插入操作:
after(content|fn):在每個匹配的元素之後插入內容。
before(content|fn):在每個匹配的元素之前插入內容。
包裹操作:
wrap(html|element|fn):把所有匹配的元素用其他元素的結構化標記包裹起來。
unwrap():這個方法將移出元素的父元素。
wrapAll(html|ele):將所有匹配的元素用單個元素包裹起來。
wrapInner(htm|element|fnl):將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來。
替換操作:
replaceWith(content|fn):將所有匹配的元素替換成指定的HTML或DOM元素。
replaceAll(selector):用匹配的元素替換掉所有 selector匹配到的元素。
刪除操作:
empty():刪除匹配的元素集合中所有的子節點。
remove([expr]):從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外,其他的比如綁定的事件,附加的數據等都會被移除。
detach([expr]):從DOM中刪除所有匹配的元素。這個方法不會把匹配的元素從jQuery對象中刪除,因而可以在將來再使用這些匹配的元素。與remove()不同的是,所有綁定的事件、附加的數據等都會保留下來。
復制操作:
clone(Even]):克隆匹配的DOM元素並且選中這些克隆的副本。
even:一個布爾值(true 或者 false)指示事件處理函數是否會被復制。
二、動畫
show([speed, [easing], [callback]]):顯示隱藏的匹配元素。
hide([speed, [easing], [callback]]):隱藏顯示的元素。
toggle([speed, [easing], [callback]]):如果元素是可見的,切換為隱藏的,如果元素是隱藏的,切換為可見的。
speed:三種預定速度的字符串(slow、normal、fast)或者動畫時長的毫秒數值。
easing:指定切換效果,默認是swing,可用linear。
callback:在動畫完成時執行的函數,每個元素執行一次。
運動過程中:改變width、height、margin、padding、opacity屬性值,添加overflow:hidden屬性。
slideDown([speed, [easing], [callback]]):通過高度變化(向下增大)來動態的顯示所有匹配的元素,顯示完成後可選的觸發一個回調函數。
slideUp([speed, [easing], [callback]]):通過高度變化(向上減小)來動態的隱藏所有匹配的元素,隱藏完成後可選的觸發一個回調函數。
slideToggle([speed, [easing], [callback]]):通過高度變化來切換所有匹配元素的可見性,切換完成後可選的觸發一個回調函數。
speed:三種預定速度的字符串(slow、normal、fast)或者動畫時長的毫秒數值。
easing:指定切換效果,默認是swing,可用linear。
callback:在動畫完成時執行的函數,每個元素執行一次。
運動過程中:改變height、margin-top、margin-bottom、padding-top、padding-bottom屬性值,添加overflow:hidden屬性。
fadeIn([speed, [easing], [callback]]):通過不透明度的變化來實現所有匹配元素的淡入效果,動畫完成後可選的觸發一個回調函數。
fadeOut([speed, [easing], [callback]]):通過不透明度的變化來實現所有匹配元素的淡出效果,動畫完成後可選的觸發一個回調函數。
fadeTo([speed, opacity, [easing], [callback]]):把所有匹配元素的不透明度以漸進方式調整到指定的不透明度,動畫完成後可選的觸發一個回調函數。opacity:一個0到1之間表示透明度的數字。
fadeToggle([speed, [easing], [callback]]):通過不透明度的變化來開關所有匹配元素的淡入淡出效果,動畫完成後可選的觸發一個回調函數。
speed:三種預定速度的字符串(slow、normal、fast)或者動畫時長的毫秒數值。
easing:指定切換效果,默認是swing,可用linear。
callback:在動畫完成時執行的函數,每個元素執行一次。
註:fadeIn、fadeout、fadeToggle,運動過程中修改opacity屬性值,最終只修改display屬性值。而fadeTo只修改opacity屬性值。
animate(params, [speed], [easing], [fn]):用於創建自定義動畫的函數。
params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合。
speed:三種預定速度的字符串(slow、normal、fast)或者動畫時長的毫秒數值。
easing:指定切換效果,默認是swing,可用linear。
fn:在動畫完成時執行的函數,每個元素執行一次。
stop(clearQueue, [jumpToEnd]):停止所有在指定元素上正在運行的動畫。如果clearQueue沒有設置為true,並且隊列中有等待執行的動畫,他們將馬上執行。
clearQueue:如果同一元素調用多個動畫方法,尚未被執行的動畫被放置在元素的效果隊列中。這些動畫不會開始,直到第一個完成。調用stop()的時候,隊列中的下一個動畫開始。如果clearQueue參數為true,那麽在隊列中的動畫其余被刪除並永遠不會被執行。
jumpToEnd:當前動畫將停止,但該元素上的CSS屬性會被立刻修改成動畫的目標值。
delay(duration [,queueName]):設置一個延時來推遲執行隊列中之後的項目。
duration:延遲時間,單位:毫秒。
queueName:隊列名次,默認是Fx,動畫隊列。
jQuery.fx.off:關閉頁面上所有的動畫。把這個屬性設置為true可以立即關閉所有動畫。把這個屬性設置為false,可以重新開啟所有動畫。
jQuery.fx.interval:設置動畫的顯示幀速。
三、核心
對象訪問:
each(callback):以每一個匹配的元素作為上下文來執行一個函數。回調函數有兩個參數,第一個參數代表索引,第二個參數代表當前遍歷到的DOM對象。return true則跳至下一個循環(就像在普通循環中使用continue),return false則終止循環(就像在普通循環中使用break)。
get([index]):取得其中一個匹配的元素。 num表示取得第幾個匹配的元素。與$(this)[0]等價。
index([selector|element]):搜索匹配的元素,並返回相應元素的索引值,從0開始計數。如果參數是一組DOM元素或者jQuery對象,那麽返回值就是傳遞的元素相對於原先集合的位置。如果不傳遞參數,那麽返回值就是這個jQuery對象集合中第一個元素相對於其同輩元素的位置。
數據緩存:
data([key],[value]) :在元素上存放數據,返回jQuery對象。
removeData([name|list]):在元素上移除存放的數據。
jQuery框架-2.進階系列