天天看點

jQuery的簡單使用

jQuery注冊事件也很簡單,通過選擇器包裝好标簽對象後,調用相關的事件方法即可,調用事件方法時需要傳遞一個函數對象,當事件被觸發就會執行函數裡的代碼。在jQuery裡的事件名稱并沒有與html中的事件名稱有多大差別,還是那個熟悉的味道熟悉的套路,示例:

函數中的參數就是事件源對象:

在函數中可以使用this來表示目前觸發事件的對象,也可以通過選擇器去擷取目前對象:

在jQuery中有一個addClass方法,可以給标簽添加類樣式,相對的removeClass方法則是删除标簽中的類樣式:

除了以上的方法外,還有一個css方法可以添加樣式,以鍵值的方式添加:

如果css方法中傳遞的是鍵,那麼就可以得到該鍵的值:

運作結果:

jQuery的簡單使用
jQuery的簡單使用

通過jQuery可以很友善的控制标簽,例如可以對某個标簽增加子标簽,或者删除某個标簽等等,append方法就可以給某個标簽添加一個子标簽:

remove方法可以删除某個标簽:

html方法類似于innerHTML方法,可以給開始和結束标簽之間填充HTML或文本:

text方法可以給開始和結束标簽之間填充純文字内容,即便傳的是HTML代碼也會被轉換成文本:

val方法可以傳回或設定被選元素的值,元素的值是通過 value 屬性設定的。該方法大多用于 input 元素。如果該方法未設定參數,則傳回被選元素的目前值:

attr方法可以控制标簽的所有屬性,通過這個方法可以給某個标簽動态設定屬性,也可以通過這個方法來獲得某個屬性的值,而removeAttr方法則可以删除指定的屬性:

jQuery的簡單使用
jQuery的簡單使用

show方法可以顯示某個元件,hide方法則可以隐藏某個元件:

show以及hide方法中都有可選的參數,第一個參數可以設定元素從隐藏到完全可見的速度,可以直接傳遞毫秒數,也可以傳遞字元串:slow、normal、fast等。在設定速度的情況下,元素從隐藏到完全可見的過程中,會逐漸地改變其高度、寬度、外邊距、内邊距和透明度。第二個參數就是回調函數,show 函數執行完之後,要執行的函數,示例:

toggle方法可以切換元素的可見狀态,如果被選元素可見,則隐藏這些元素,如果被選元素隐藏,則顯示這些元素,同樣的可以設定過程時間和回調函數:

想要有淡入淡出的效果可以使用以下四種fade方法:

fadeIn() 方法用于淡入已隐藏的元素

fadeOut() 方法用于淡出可見元素

fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換

fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)

示例:

通過jQuery實作元素滑動效果可以使用以下三個方法:

slideDown() 方法用于向下滑動元素。

slideUp() 方法用于向上滑動元素。

slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

本文轉自 ZeroOne01 51CTO部落格,原文連結:http://blog.51cto.com/zero01/2057995,如需轉載請自行聯系原作者

繼續閱讀