前端基礎入門六(JQuery進階)

jQuery特殊屬性操做

val方法

val方法用於設置和獲取表單元素的值，例如input、textarea的值

//設置值
$("#name").val(「張三」);
//獲取值
$("#name").val();

html方法與text方法

html方法至關於innerHTML text方法至關於innerText

//設置內容
$(「div」).html(「<span>這是一段內容</span>」);
//獲取內容
$(「div」).html()

//設置內容
$(「div」).text(「<span>這是一段內容</span>」);
//獲取內容
$(「div」).text()

width方法與height方法

設置或者獲取高度

//帶參數表示設置高度
$(「img」).height(200);
//不帶參數獲取高度
$(「img」).height();

獲取網頁的可視區寬高

//獲取可視區寬度
$(window).width();
//獲取可視區高度
$(window).height();

scrollTop與scrollLeft

設置或者獲取垂直滾動條的位置

//獲取頁面被捲曲的高度
$(window).scrollTop();
//獲取頁面被捲曲的寬度
$(window).scrollLeft();

offset方法與position方法

offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素的位置。

//獲取元素距離document的位置,返回值爲對象：{left:100, top:100}
$(selector).offset();
//獲取相對於其最近的有定位的父元素的位置。
$(selector).position();

---

jQuery事件機制

JavaScript中已經學習過了事件，可是jQuery對JavaScript事件進行了封裝，增長並擴展了事件處理機制。jQuery不只提供了更加優雅的事件處理語法，並且極大的加強了事件的處理能力。
簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)
簡單事件註冊

click(handler)            單擊事件
mouseenter(handler)        鼠標進入事件
mouseleave(handler)        鼠標離開事件

缺點：不能同時註冊多個事件

bind方式註冊事件

//第一個參數：事件類型
//第二個參數：事件處理程序
$("p").bind("click mouseenter", function(){
    //事件響應方法
});

缺點：不支持動態事件綁定

delegate註冊委託事件

// 第一個參數：selector，要綁定事件的元素
// 第二個參數：事件類型
// 第三個參數：事件處理函數
$(".parentBox").delegate("p", "click", function(){
    //爲 .parentBox下面的全部的p標籤綁定事件
});

缺點：只能註冊委託事件，所以註冊時間須要記得方法太多了

on註冊事件（重點）
jQuery1.7以後，jQuery用on統一了全部事件的處理方法。

最現代的方式，兼容zepto(移動端相似jQuery的一個庫)，強烈建議使用。
on註冊簡單事件

// 表示給$(selector)綁定事件，而且由本身觸發，不支持動態綁定。
$(selector).on( "click", function() {});

on註冊委託事件

// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定
$(selector).on( "click",「span」, function() {});

on註冊事件的語法：

// 第一個參數：events，綁定事件的名稱能夠是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個參數：selector, 執行事件的後代元素（可選），若是沒有後代元素，那麼事件將有本身執行。
// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候經過event.data來使用（不常使用）
// 第四個參數：handler，事件處理函數
$(selector).on(events[,selector][,data],handler);

---

事件解綁

// 解綁匹配元素的全部事件
$(selector).off();
// 解綁匹配元素的全部click事件
$(selector).off("click");

---

觸發事件

$(selector).click(); //觸發 click事件
$(selector).trigger("click");

jQuery事件對象

jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。

//screenX和screenY    對應屏幕最左上角的值
//clientX和clientY    距離頁面左上角的位置（忽視滾動條）
//pageX和pageY    距離頁面最頂部的左上角的位置（會計算滾動條的距離）

//event.keyCode    按下的鍵盤代碼
//event.data    存儲綁定事件時傳遞的附加數據

//event.stopPropagation()    阻止事件冒泡行爲
//event.preventDefault()    阻止瀏覽器默認行爲
//return false:既能阻止事件冒泡，又能阻止瀏覽器默認行爲。