1. 程式人生 > >jQuery的常見屬性、方法的介紹

jQuery的常見屬性、方法的介紹

siblings css city ani addclass opacity 不透明度 漸變 size

最近在復習jQuery的知識點,簡單整理一下,本文分三部分進行整理

一、jQuery的效果

隱藏:hide()

顯示:show()

顯示和隱藏來回切換:toggle()

//參數
$(selector).toggle(speed,callback)
//speed 參數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。
//callback 參數是隱藏或顯示完成後所執行的函數名稱。

把已經隱藏的元素淡入出來:fadeIn()

把可見的元素淡出出去:fadeOut()

在淡入淡出來回切換:fadeToggle()

為給定的不透明度漸變:fadeTo()

//
參數 $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); //必需的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 //可選的 callback 參數是該函數完成後所執行的函數名稱。 //fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度(值介於 0 與 1 之間)。

把已經隱藏的元素向下滑動出來(可以想象成卷簾門拉下來): slideDown()

把可見的元素向上滑動至隱藏(可以想象成把已經拉下來的卷簾門再推上去):slideUp()

在向下滑動和向上滑動之間來回切換(先下後上和先上後下都可以): slideToggle()

//參數
$(selector).slideUp(speed,callback);
//可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
//可選的 callback 參數是滑動完成後所執行的函數名稱。

自定義動畫:animate()

//參數
$(selector).animate({params},speed,callback);
//必需的 params 參數定義形成動畫的 CSS 屬性。 //可選的 speed 參數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。 //可選的 callback 參數是動畫完成後所執行的函數名稱。 //默認情況下,所有 HTML 元素都有一個靜態位置,且無法移動。 //如需對位置進行操作,最好把把元素的 CSS position 屬性設置為 relative、fixed 或 //absolute!
//如果使用margin,要註意marginLeft 而不是 margin-left

停止動畫或效果,在它們完成之前: stop()

//要註意的是, stop() 方法不僅是適用於自定義動畫,適用於所有 jQuery 效果函數,    
//包括之前的滑動、淡入淡出

//參數
$(selector).stop(stopAll,goToEnd);
// stopAll表示後續動畫是否要執行
//(true:後續動畫不執行  ;false:後續動畫會執行,默認是false)
// goToEnd表示當前動畫是否執行完
//(true:立即執行完成當前動畫  ;false:立即停止當前動畫,默認是false)

二、jQuery HTML

設置或返回所選元素的文本內容:text()

設置或返回所選元素的內容(包括 HTML 標記):html()

設置或返回表單字段的值:val()

獲取屬性值:attr()

在被選元素的結尾插入內容(把插入內容放在了該元素的內部,把插入元素當作兒子):append()

在被選元素的開頭插入內容(把插入內容放在了該元素的內部,把插入元素當作兒子): prepend()

在被選元素之後插入內容(把插入內容放在了該元素的屁股後面,把插入元素當作兄弟):after()

在被選元素之後插入內容(把插入內容放在了該元素的腦袋前面,把插入元素當作兄弟):before()

刪除被選元素(及其子元素):remove()

從被選元素中刪除子元素(只刪除子元素):empty()

//remove() 方法也可接受一個參數,允許對被刪元素進行過濾。
//該參數可以是任何 jQuery 選擇器的語法。
//下面的例子刪除 class="italic" 的所有 <p> 元素:
//$("p").remove(".italic");

向被選元素添加一個或多個類:addClass()

從被選元素刪除一個或多個類:removeClass()

對被選元素進行添加/刪除類的切換操作toggleClass()

設置或返回樣式屬性:css()

//返回指定的 CSS 屬性的值
css("propertyname");
//設置指定的 CSS 屬性
css("propertyname","value");
//設置多個 CSS 屬性
css({"propertyname":"value","propertyname":"value",...});

設置或返回元素的寬度(不包括內邊距、邊框或外邊距):width()

設置或返回元素的高度(不包括內邊距、邊框或外邊距):height()

返回元素的寬度(包括內邊距):innerWidth()

返回元素的高度(包括內邊距):innerHeight()

返回元素的寬度(包括內邊距和邊框):outerWidth()

返回元素的高度(包括內邊距和邊框):outerHeight()

技術分享圖片

三、jQuery遍歷

返回被選元素的直接父元素:parent()

返回被選元素的所有祖先元素:parents()

返回介於兩個給定元素之間的所有祖先元素:parentsUntil()

返回被選元素的所有直接子元素:children()

返回被選元素的所有後代元素:find()

//直接子元素就是它的兒子,兒子可以不僅僅是一個
//所有後代包括兒子、孫子等等,一直往後所有的後代元素

返回被選元素的所有同胞元素:siblings()

返回被選元素的下一個同胞元素:next()

返回被選元素的所有跟隨(後面的)的同胞元素:nextAll()

返回介於兩個給定參數之間的所有跟隨的同胞元素:nextUntil()

返回被選元素的首個元素:first()

返回被選元素的最後一個元素:last()

返回被選元素中帶有指定索引號的元素:eq()

尋找匹配的元素:filter()

尋找與其不匹配的元素(與filter()相反):not()

(個人總結,不足與錯誤的地方希望指點)

jQuery的常見屬性、方法的介紹