1. 程式人生 > >jQuery框架-2.進階系列

jQuery框架-2.進階系列

節點 pac 最終 each list 延時 rep pen 是否

一、操作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.進階系列