jQuery心得5--jQuery深入瞭解串講1

1.CSS-DOM 操作

獲取和設定元素的樣式屬性: css()。

獲取和設定元素透明度: opacity 屬性(css 的一個屬性)。

獲取和設定元素高度, 寬度: height(), width(). 在設定值時, 若只傳遞數字, 則預設單位是 px. 如需要使用其他單位則需傳遞一個字串, 例如 $(“p:first”).height(“2em”)。

獲取元素在當前視窗中的相對位移: offset(). 其返回物件包含了兩個屬性: top, left. 該方法只對可見元素有效。

2. jQuery 中的事件

    載入 DOM

在頁面載入完畢後, 瀏覽器會通過 JavaScript 為 DOM 元素新增事件. 在常規的 JavaScript 程式碼中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

合成事件

hover(): 模擬游標懸停事件. 當游標移動到元素上時, 會觸發指定的第一個函式, 當游標移出這個元素時, 會觸發指定的第二個函式.

toggle(): 用於模擬滑鼠連續單擊事件. 第一次單擊元素, 觸發指定的第一個函式, 當再一次單擊同一個元素時, 則觸發指定的第二個函式, 如果有更多個函式, 則依次觸發, 直到最後一個.

toggle() 的另一個作用: 切換元素的可見狀態.

事件冒泡

事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端。

解決: 在事件處理函式中返回 false, 會對事件停止冒泡. 還可以停止元素的預設行為.

事件物件的屬性

事件物件: 當觸發事件時, 事件物件就被建立了. 在程式中使用事件只需要為函式新增一個引數. 該事件物件只有事件處理函式才能訪問到. 事件處理函式執行完畢後, 事件物件就被銷燬了.

event.pageX, event.pageY: 獲取到游標相對於頁面的 x, y 座標.

移除事件

移除某按鈕上的所有

 click 事件: $(“btn”).unbind(“click”)

移除某按鈕上的所有事件: $(“btn”).unbind();

one(): 該方法可以為元素繫結處理函式. 當處理函式觸發一次後, 立即被刪除. 即在每個物件上, 事件處理函式只會被執行一次.

3. jQuery 中的動畫:

隱藏和顯示

hide(): 在 HTML 文件中, 為一個元素呼叫 hide() 方法會將該元素的 display 樣式改為 none. 程式碼功能同 css(“display”, “none”);

show(): 將元素的 display 樣式改為先前的顯示狀態.

以上兩個方法在不帶任何引數的情況下, 作用是立即隱藏或顯示匹配的元素, 不會有任何動畫. 可以通過制定速度引數使元素動起來.以上兩個方法會同時減少(增大)內容的高度, 寬度和不透明度.

fadeIn(), fadeOut(): 只改變元素的透明度. fadeOut() 會在指定的一段時間內降低元素的不透明度, 直到元素完全消失. fadeIn() 則相反.

slideDown(), slideUp(): 只會改變元素的高度. 如果一個元素的 display 屬性為 none, 當呼叫 slideDown() 方法時, 這個元素將由上至下延伸顯示. slideUp() 方法正好相反, 元素由下至上縮短隱藏.

toggle(): 切換元素的可見狀態: 如果元素時可見的, 則切換為隱藏; 如果元素時隱藏的, 則切換為可見的.

slideToggle(): 通過高度變化來切換匹配元素的可見性.

fadeTo(): 把不透明度以漸近的方式調整到指定的值(0 – 1 之間).