資訊專欄INFORMATION COLUMN
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。
前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每周四）。
主要內(nèi)容jQuery 事件（綁定，解綁，委托，觸發(fā)）
jQuery 鏈?zhǔn)讲僮?/p> jQuery 事件 綁定事件 on(events,[selector],[data],fn)
我比較習(xí)慣直接使用$("div").on(events,fn)來(lái)實(shí)現(xiàn)綁定事件。
on()方法綁定事件處理程序到當(dāng)前選定的jQuery對(duì)象中的元素。在jQuery 1.7中，.on()方法提供綁定事件處理程序所需的所有功能。幫助從舊的jQuery事件方法轉(zhuǎn)換，.bind(), .delegate(), 和 .live()。
events 可以用寫多個(gè)事件，比如常見(jiàn)的input的兼容寫法$("input").on("input propertychange", fn)。
對(duì)應(yīng)原生addEventListener和ie等低版本的兼容。
我比較習(xí)慣直接使用$("div").off(events)來(lái)實(shí)現(xiàn)解綁事件。
off() 方法移除用.on()綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。當(dāng)有多個(gè)過(guò)濾參數(shù)，所提供的參數(shù)都必須匹配的事件處理程序才會(huì)被刪除。
$(".btn").off("click") 會(huì)把所有的click事件都移除。還記得我們?cè)囊瞥龡l件嗎？removeEventListener必須把fn也傳入進(jìn)去才可以。那么jQuery怎么實(shí)現(xiàn)的呢？他把所有的事件都保存了起來(lái)，刪除的時(shí)候使用保存的引用去刪除。
jQuery 事件委托 on(events,selector,[data],fn)原生的方法為判斷event.target來(lái)實(shí)現(xiàn)。jQuery 封裝之后通過(guò)傳入selector來(lái)操作。
selector:用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。如果省略，當(dāng)事件觸發(fā)到達(dá)選定的元素，事件總是觸發(fā)。
原生使用dispatchEvent觸發(fā)。
例子：$("form:first").trigger("submit")
one() 綁定只觸發(fā)一次的事件
hover([over,]out) 綁定鼠標(biāo)hover效果。封裝好的mouseover和mouseout
事件封裝，我基本都不用。只用on off
鏈?zhǔn)讲僮髡娴乃?/b>。比如ES6的 new Array(10).fill(1).map((v,i)=>i*2) 我們可以讓我的數(shù)據(jù)經(jīng)過(guò)好幾個(gè)方法處理一下。
原理其實(shí)也比較簡(jiǎn)單，因?yàn)閖Query重點(diǎn)就是封裝了DOM，所有的都偽裝成數(shù)組。讓我們很方便的遍歷。然后他在每次操作完之后把this又return了出來(lái)
例子：jsrun地址
//實(shí)現(xiàn)了一個(gè)，單擊打開，移走變透明的效果。
$("#wrap").on("click", function(){
window.open("https://www.lilnong.top")
}).on("mouseout", function(){
$("#wrap").animate("opacity", .7)
}).on("mouseover", function(){
$("#wrap").css("opacity", 1)
})
我們嘗試自己來(lái)寫一個(gè)可以鏈?zhǔn)讲僮鞯膶?duì)象
obj={
num: 0,
clear: function(num){
this.num= 0
return this;
},
add: function(num){
this.num+=num
return this;
}
}
微信公眾號(hào)：前端linong
初級(jí)階段文章目錄
前端培訓(xùn)-初級(jí)階段（17） - 數(shù)據(jù)存儲(chǔ)（cookie、session、stroage）
前端培訓(xùn)-初級(jí)階段（13） - 正則表達(dá)式
前端培訓(xùn)-初級(jí)階段（13） - 類、模塊、繼承
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （內(nèi)置對(duì)象、函數(shù)）
前端培訓(xùn)-初級(jí)階段（13） - ECMAScript （語(yǔ)法、變量、值、類型、運(yùn)算符、語(yǔ)句）
前端培訓(xùn)-初級(jí)階段（13、18）
前端培訓(xùn)-初級(jí)階段（9 -12）
前端培訓(xùn)-初級(jí)階段（5 - 8）
前端培訓(xùn)-初級(jí)階段（1 - 4）
中級(jí)階段文章目錄前端培訓(xùn)-中級(jí)階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
前端培訓(xùn)-中級(jí)階段（3） - DOM 文檔對(duì)象模型（2019-06-27期）
前端培訓(xùn)-中級(jí)階段（4）- BOM 瀏覽器對(duì)象模型（2019-07-04期）
前端培訓(xùn)-中級(jí)階段（5）- jQuery的概念與基本使用（2019-07-11期）
前端培訓(xùn)-中級(jí)階段（6）- jQuery元素節(jié)點(diǎn)操作（2019-07-18期）
資料前端培訓(xùn)目錄、前端培訓(xùn)規(guī)劃、前端培訓(xùn)計(jì)劃
jQuery 速查地址
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/105226.html
摘要：前端最基礎(chǔ)的就是。幫助從舊的事件方法轉(zhuǎn)換，和。方法移除用綁定的事件處理程序。特定的事件處理程序可以被移除元素上提供事件名稱，命名空間，處理函數(shù)。用于過(guò)濾器的觸發(fā)事件的選擇器元素的后代。事件觸發(fā)模擬觸發(fā)原生使用觸發(fā)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS）...
摘要：上節(jié)我們講了同源策略，這節(jié)我們講講如何跨域。當(dāng)這些從的腳本執(zhí)行出錯(cuò)，因?yàn)檫`背了同源策略為了保證用戶信息不被泄露，錯(cuò)誤信息不會(huì)顯示出來(lái)，取而代之只會(huì)返回一個(gè)。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思想，我們開課啦（每...
摘要：同源策略是什么同源策略是瀏覽器的一個(gè)安全功能，不同源的數(shù)據(jù)禁止訪問(wèn)?；蛟S你可以說(shuō)驗(yàn)證，在瀏覽器沒(méi)有同源策略的情況下這些都可以繞過(guò)去。總結(jié)同源策略是蠻好的，防御了大部分的攻擊。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，打牢基礎(chǔ)知識(shí)的中心思...
摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...
摘要：前端最基礎(chǔ)的就是。對(duì)應(yīng)，是標(biāo)簽的屬性。獲取匹配元素相對(duì)父元素的偏移。返回的對(duì)象包含兩個(gè)整型屬性和。一組包含作為動(dòng)畫屬性和終值的樣式屬性和及其值的集合動(dòng)畫的額外選項(xiàng)。指示是否在效果隊(duì)列中放置動(dòng)畫。 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技術(shù)水平，...
閱讀 3547·2021-11-17 17:01
閱讀 3951·2021-11-08 13:12
閱讀 2508·2021-10-08 10:04
閱讀 735·2021-09-29 09:35
閱讀 1450·2021-09-26 10:12
閱讀 2116·2021-09-07 09:58
閱讀 1985·2019-08-30 15:55
閱讀 2166·2019-08-30 13:14
