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

fnngj 發布于2019-08-23 14:53 / 3486人閱讀

摘要：獲取元素距離的位置返回值為對象獲取相對于其最近的有定位的父元素的位置。不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。注冊簡單事件表示給綁定事件，并且由自己觸發，不支持動態綁定。

jQuery特殊屬性操作 val方法

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

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

html方法與text方法

html方法相當于innerHTML text方法相當于innerText

//設置內容
$(“div”).html(“這是一段內容”);
//獲取內容
$(“div”).html()

//設置內容
$(“div”).text(“這是一段內容”);
//獲取內容
$(“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:既能阻止事件冒泡，又能阻止瀏覽器默認行為。

云服務器 GPU云服務器前端jquery 入門基礎基礎入門 jquery前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101287.html

十步零基礎JavaScript學習路徑

摘要：之前寫過一篇天學通前端開發，內容主要講的就是前端學習路徑，今天再來寫一篇零基礎的學習路徑，希望能幫編程零基礎的前端愛好者指明方向。十框架三選一，零基礎的初學者強烈推薦，如果是后臺轉前端推薦，如果技術型前端，推薦。之前寫過一篇26天學通前端開發，內容主要講的就是前端學習路徑，今天再來寫一篇零基礎的JavaScript學習路徑，希望能幫編程零基礎的前端愛好者指明方向。一、開發環境和Ja...

incredible 2019-08-21 18:19 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0