jQuery特殊屬性操作有哪些

這篇文章主要介紹“jQuery特殊屬性操作有哪些”，在日常操作中，相信很多人在jQuery特殊屬性操作有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jQuery特殊屬性操作有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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特殊屬性操作有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！