前端最基礎的就是 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期)