国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

sutaking / 3204人閱讀

摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每周四）。

主要內容

jQuery 事件（綁定，解綁，委托，觸發）

jQuery 鏈式操作

jQuery 事件 綁定事件 on(events,[selector],[data],fn)

我比較習慣直接使用$("div").on(events,fn)來實現綁定事件。
on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中，.on()方法提供綁定事件處理程序所需的所有功能。幫助從舊的jQuery事件方法轉換，.bind(), .delegate(), 和 .live()。

events 可以用寫多個事件，比如常見的input的兼容寫法$("input").on("input propertychange", fn)。
對應原生addEventListener和ie等低版本的兼容。

jQuery 解綁事件 off(events,[selector],[fn])

我比較習慣直接使用$("div").off(events)來實現解綁事件。
off() 方法移除用.on()綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。當有多個過濾參數，所提供的參數都必須匹配的事件處理程序才會被刪除。

$(".btn").off("click") 會把所有的click事件都移除。還記得我們原生的移除條件嗎？removeEventListener必須把fn也傳入進去才可以。那么jQuery怎么實現的呢？他把所有的事件都保存了起來，刪除的時候使用保存的引用去刪除。

jQuery 事件委托 on(events,selector,[data],fn)

原生的方法為判斷event.target來實現。jQuery 封裝之后通過傳入selector來操作。
selector:用于過濾器的觸發事件的選擇器元素的后代。如果省略，當事件觸發到達選定的元素，事件總是觸發。

jQuery 事件觸發、模擬觸發 trigger(type,[data])

原生使用dispatchEvent觸發。
例子：$("form:first").trigger("submit")

其他事件類支持

one() 綁定只觸發一次的事件

hover([over,]out) 綁定鼠標hover效果。封裝好的mouseover和mouseout

事件封裝，我基本都不用。只用on off

jQuery 鏈式操作

鏈式操作真的爽。比如ES6的 new Array(10).fill(1).map((v,i)=>i*2) 我們可以讓我的數據經過好幾個方法處理一下。
原理其實也比較簡單，因為jQuery重點就是封裝了DOM，所有的都偽裝成數組。讓我們很方便的遍歷。然后他在每次操作完之后把this又return了出來

例子：jsrun地址

//實現了一個，單擊打開，移走變透明的效果。
$("#wrap").on("click", function(){
    window.open("https://www.lilnong.top")
}).on("mouseout", function(){
    $("#wrap").animate("opacity", .7)
}).on("mouseover", function(){
    $("#wrap").css("opacity", 1)
})

我們嘗試自己來寫一個可以鏈式操作的對象

obj={
   num: 0,
   clear: function(num){
    this.num= 0
    return this;
   },
   add: function(num){
    this.num+=num
    return this;
   }
}

微信公眾號：前端linong

初級階段文章目錄

前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）

前端培訓-初級階段（13） - 正則表達式

前端培訓-初級階段（13） - 類、模塊、繼承

前端培訓-初級階段（13） - ECMAScript （內置對象、函數）

前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）

前端培訓-初級階段（13、18）

前端培訓-初級階段（9 -12）

前端培訓-初級階段（5 - 8）

前端培訓-初級階段（1 - 4）

中級階段文章目錄

前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）

前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）

前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）

前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）

前端培訓-中級階段（6）- jQuery元素節點操作（2019-07-18期）

資料

前端培訓目錄、前端培訓規劃、前端培訓計劃

jQuery 速查地址

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

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

相關文章

  • 前端培訓-中級階段（6）- jQuery的事件綁定鏈式操作及原理（2019-07-25期）

    摘要：前端最基礎的就是。幫助從舊的事件方法轉換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數。用于過濾器的觸發事件的選擇器元素的后代。事件觸發模擬觸發原生使用觸發。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS）...

    Airy 評論0 收藏0

  • 前端培訓-中級階段（11、12）- 跨域請求原理以及實現（2019-08-22期）

    摘要：上節我們講了同源策略，這節我們講講如何跨域。當這些從的腳本執行出錯，因為違背了同源策略為了保證用戶信息不被泄露，錯誤信息不會顯示出來，取而代之只會返回一個。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我們開課啦（每...

    binaryTree 評論0 收藏0

  • 前端培訓-中級階段（10）- 同源策略（2019-08-15期）

    摘要：同源策略是什么同源策略是瀏覽器的一個安全功能，不同源的數據禁止訪問。或許你可以說驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。總結同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思...

    heartFollower 評論0 收藏0

  • 前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

    摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

    everfly 評論0 收藏0

  • 前端培訓-中級階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

    摘要：前端最基礎的就是。對應，是標簽的屬性。獲取匹配元素相對父元素的偏移。返回的對象包含兩個整型屬性和。一組包含作為動畫屬性和終值的樣式屬性和及其值的集合動畫的額外選項。指示是否在效果隊列中放置動畫。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，...

    james 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<