jQuery特殊屬性操作

val方法

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

//設定值
$("#name").val(“張三”);
//獲取值
$("#name").val();

自己是個做了幾年開發的老碼農，希望本文對你有用！這裡推薦一下我的前端學習交流圈：767273102 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選：加入

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:既能阻止事件冒泡，又能阻止瀏覽器預設行為。

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