前端最基礎的就是 HTML+CSS+Javascript
。掌握了這三門技術就算入門,但也僅僅是入門,如今前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS
),本着提高技術水平,打牢基礎知識的中心思想,咱們開課啦(每週四)。css
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等低版本的兼容。前端
off(events,[selector],[fn])
我比較習慣直接使用$('div').off(events)
來實現解綁事件。off()
方法移除用.on()
綁定的事件處理程序。特定的事件處理程序能夠被移除元素上提供事件名稱,命名空間,處理函數。當有多個過濾參數,所提供的參數都必須匹配的事件處理程序纔會被刪除。jquery
$('.btn').off('click')
會把全部的click
事件都移除。還記得咱們原生的移除條件嗎?removeEventListener
必須把fn
也傳入進去才能夠。那麼jQuery怎麼實現的呢?他把全部的事件都保存了起來,刪除的時候使用保存的引用去刪除。正則表達式
on(events,selector,[data],fn)
原生的方法爲判斷event.target
來實現。jQuery 封裝以後經過傳入selector
來操做。selector
:用於過濾器的觸發事件的選擇器元素的後代。若是省略,當事件觸發到達選定的元素,事件老是觸發。segmentfault
trigger(type,[data])
原生使用dispatchEvent
觸發。
例子:$("form:first").trigger("submit")
數組
one()
綁定只觸發一次的事件hover([over,]out)
綁定鼠標hover效果。封裝好的mouseover
和mouseout
on
off
鏈式操做真的爽
。好比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) })
咱們嘗試本身來寫一個能夠鏈式操做的對象cookie
obj={ num: 0, clear: function(num){ this.num= 0 return this; }, add: function(num){ this.num+=num return this; } }