jQuery學習筆記2 jQuery簡易效果

2021-08-21 08:02:29 字數 1558 閱讀 4491

接上次的jquery學習筆記,這次的主題就是其簡易效果,例如淡入淡出,顯示隱藏的效果。

整理網上的資料,可以得到這樣乙個方法列表。

方法描述

animate()

對被選元素應用"自定義"的動畫

clearqueue()

對被選元素移除所有排隊函式(仍未執行的)

delay()

對被選元素的所有排隊函式(仍未執行)設定延遲

dequeue()

移除下乙個排隊函式,然後執行函式

fadein()

逐漸改變被選元素的不透明度,從隱藏到可見

fadeout()

逐漸改變被選元素的不透明度,從可見到隱藏

fadeto()

把被選元素逐漸改變至給定的不透明度

fadetoggle()

在 fadein() 和 fadeout() 方法之間進行切換

finish()

對被選元素停止、移除並完成所有排隊動畫

hide()

隱藏被選元素

queue()

顯示被選元素的排隊函式

show()

顯示被選元素

slidedown()

通過調整高度來滑動顯示被選元素

slidetoggle()

slideup() 和 slidedown() 方法之間的切換

slideup()

通過調整高度來滑動隱藏被選元素

stop()

停止被選元素上當前正在執行的動畫

toggle()

hide() 和 show() 方法之間的切換

基本方法如上,分別介紹一些方法來強化學習效果。

顯示/隱藏 與 淡入/淡出

我個人理解這兩種方法在顯示列表或者點開顯示詳細介紹等方面用的比較多,給div標籤乙個類,或者id對其進行操作。

顯示/隱藏

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

淡入/淡出

$(selector).fadein(speed,callback);

$(selector).fadeout(speed,callback);

$(selector).fadetoggle(speed,callback);

這上面的5個方法的引數列表都一樣,speed可以控制方法的效果持續時長,可以取slow,fast或者乙個具體的毫秒數值。第二個引數可以傳乙個方法,這個方法將在外層方法完全執行完畢之後再執行。比如按照下面這種寫法:

$("button").click(function());

});

在hide()方法完全執行結束後,將執行帶有alert的方法。

名字中帶有toggle的方法表示同乙個方法可以先後執行顯示/隱藏的兩種功能,比如說第一次執行隱藏,第二下就可以再顯示出來。參照這個命名規則,上面列表裡的函式都有類似的功能。

JQuery學習筆記(2)

jquery的屬性選擇器 div id為one test div id為one te div id為one te div id為one es xxt aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 子元素選擇器 根據該元素是父元素下出現的位置來選中子元素.one two three f...

jQuery學習筆記2 選擇器

1 簡單選擇器 box p css color red 直接相鄰兒子p標籤 返回選擇器選擇元素個數方法 length屬性或size 方法。jquery具有容錯功能 if document.getelementbyid pox 等效於if pox size 0 也可以轉換為dom物件方式來判斷,有值時...

jquery學習筆記

判斷checkbox是否被選中if attr checked true 檢查元素是否存在 if tt length 0 if tt 0 檢查元素是否隱藏 alert dvtest is visible 判斷元素顯示或隱藏狀態 多選框操作 獲取一組radio被選中項的值 var item input ...