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

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,如今前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本着提高技術水平,打牢基礎知識的中心思想,咱們開課啦(每週四)。css

主要內容

  1. jQuery 事件(綁定,解綁,委託,觸發)
  2. jQuery 鏈式操做

jQuery 事件

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

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

events 能夠用寫多個事件,好比常見的input的兼容寫法$('input').on('input propertychange', fn)
對應原生addEventListener和ie等低版本的兼容。前端

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

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

$('.btn').off('click') 會把全部的click事件都移除。還記得咱們原生的移除條件嗎?removeEventListener必須把fn也傳入進去才能夠。那麼jQuery怎麼實現的呢?他把全部的事件都保存了起來,刪除的時候使用保存的引用去刪除。正則表達式

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

原生的方法爲判斷event.target來實現。jQuery 封裝以後經過傳入selector來操做。
selector:用於過濾器的觸發事件的選擇器元素的後代。若是省略,當事件觸發到達選定的元素,事件老是觸發。segmentfault

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

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

其餘事件類支持

  1. one() 綁定只觸發一次的事件
  2. hover([over,]out) 綁定鼠標hover效果。封裝好的mouseovermouseout
  3. 事件封裝,我基本都不用。只用on off
    clipboard.png

jQuery 鏈式操做

鏈式操做真的爽。好比ES6new Array(10).fill(1).map((v,i)=>i*2) 咱們可讓個人數據通過好幾個方法處理一下。
原理其實也比較簡單,由於jQuery重點就是封裝了DOM,全部的都假裝成數組。讓咱們很方便的遍歷。而後他在每次操做完以後把thisreturn了出來瀏覽器

例子: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)
})

咱們嘗試本身來寫一個能夠鏈式操做的對象cookie

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

clipboard.png

微信公衆號:前端linong

clipboard.png

初級階段文章目錄

  1. 前端培訓-初級階段(17) - 數據存儲(cookie、session、stroage)
  2. 前端培訓-初級階段(13) - 正則表達式
  3. 前端培訓-初級階段(13) - 類、模塊、繼承
  4. 前端培訓-初級階段(13) - ECMAScript (內置對象、函數)
  5. 前端培訓-初級階段(13) - ECMAScript (語法、變量、值、類型、運算符、語句)
  6. 前端培訓-初級階段(1三、18)
  7. 前端培訓-初級階段(9 -12)
  8. 前端培訓-初級階段(5 - 8)
  9. 前端培訓-初級階段(1 - 4)

中級階段文章目錄

  1. 前端培訓-中級階段(2) - 事件(event) 事件冒泡、捕獲 - (2019-06-20期)
  2. 前端培訓-中級階段(3) - DOM 文檔對象模型(2019-06-27期)
  3. 前端培訓-中級階段(4)- BOM 瀏覽器對象模型(2019-07-04期)
  4. 前端培訓-中級階段(5)- jQuery的概念與基本使用(2019-07-11期)
  5. 前端培訓-中級階段(6)- jQuery元素節點操做(2019-07-18期)

資料

  1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
  2. jQuery 速查地址
相關文章
相關標籤/搜索