資訊專欄INFORMATION COLUMN
摘要：何時(shí)只要讓程序延遲執(zhí)行一件事時(shí)如何件事啟動定時(shí)器讓程序等待毫秒后，自動執(zhí)行一次，執(zhí)行后自動停止停止定時(shí)器定時(shí)器原理定時(shí)器中的任務(wù)函數(shù)，必須等待主程序所有語句執(zhí)行后，才能執(zhí)行。將事件監(jiān)聽對象加入到瀏覽器的監(jiān)聽隊(duì)列中。
前端知識點(diǎn)總結(jié)——BOM 1.BOM: Browser Object Model
什么是: 專門操作瀏覽器窗口的API
沒有標(biāo)準(zhǔn), 導(dǎo)致瀏覽器兼容性問題
包括:
window
history
location
navigator
dom
event
screen
屬性: .innerWidth, .innerHeight 瀏覽器窗口中，文檔顯示區(qū)的寬和高
方法: .open() .close() .open("url","name")
三種:
1.在當(dāng)前窗口打開，可后退: .open("url","_self")
2.在新窗口打開，可打開多個(gè): .open("url","_blank")
3.在新窗口打開，只能打開一個(gè):
.open("url","自定義窗口名")
3.history: 保存當(dāng)前窗口打開后，成功訪問過的url的歷史記錄棧
在當(dāng)前窗口中，每訪問一個(gè)新url，都會將新url壓入history
API: history.go(n)
3種:
前進(jìn): history.go(1) 后退: history.go(-1) 刷新: history.go(0)4.location: 保存當(dāng)前窗口正在打開的url的對象
屬性:
.href 完整url地址
.protocol 協(xié)議
.host 主機(jī)名+端口號
.hostname 主機(jī)名
.port 端口號
.pathname 相對路徑
.hash #錨點(diǎn)地址
.search ?查詢字符串
方法:
在當(dāng)前窗口打開，可后退:
location.assign(url) => location.href=url => location=url
在當(dāng)前窗口打開，禁止后退:
location.replace(url)
重新加載頁面: 刷新: 2種:
普通刷新:
優(yōu)先從瀏覽器本地緩沖獲取資源:
F5
history.go(0)
location.reload(/false/)
強(qiáng)制刷新:
無論本地是否有緩存，總是強(qiáng)制從服務(wù)器獲取資源
location.reload(true)
周期性定時(shí)器:
什么是: 讓程序每隔指定的時(shí)間間隔，反復(fù)執(zhí)行一項(xiàng)任務(wù)
何時(shí): 只要讓程序按照指定的時(shí)間間隔，自動執(zhí)行一項(xiàng)任務(wù)
如何: 3件事:
1.任務(wù)函數(shù): 讓定時(shí)器反復(fù)執(zhí)行的任務(wù)
2.啟動定時(shí)器: timer=setInterval(task, interval)
讓程序，每隔interval 毫秒自動執(zhí)行一次task任務(wù)
3.停止定時(shí)器: clearInterval(timer)
timer: 定時(shí)器的序號, 在內(nèi)存中唯一標(biāo)識定時(shí)器的整數(shù) 專門用于停止定時(shí)器 如何獲得: 只能在啟動定時(shí)器時(shí)獲得。 何時(shí): 只要一個(gè)定時(shí)器可能被停止，就要在啟動時(shí)，先保存定時(shí)器序號 好的習(xí)慣: 在clearInterval之后，手動清除timer中殘留的序號: timer=null;
停止定時(shí)器: 2種情況:
用戶手動停止:
定時(shí)器可自動停止:
在任務(wù)函數(shù)中，設(shè)定臨界值，如果沒有達(dá)到臨界值，則繼續(xù)執(zhí)行任務(wù)，否則，如果達(dá)到臨界值，就自動調(diào)用clearInterval
2.一次性定時(shí)器:
什么是: 讓程序先等待一段時(shí)間，再執(zhí)行一次任務(wù)。執(zhí)行后，自動停止。
何時(shí): 只要讓程序延遲執(zhí)行一件事時(shí)
如何: 3件事:
1.task
2.啟動定時(shí)器: timer=setTimeout(task,wait)
讓程序等待wait毫秒后，自動執(zhí)行一次task，執(zhí)行后自動停止
3.停止定時(shí)器: clearTimeout(timer)
6.定時(shí)器原理:定時(shí)器中的任務(wù)函數(shù)，必須等待主程序所有語句執(zhí)行后，才能執(zhí)行。
7.navigator:1.什么是: 保存瀏覽器配置信息的對象
包括:
.cookieEnabled: 判斷當(dāng)前瀏覽器是否啟用cookie
2.什么是cookie: 在客戶端持久存儲用戶私密數(shù)據(jù)的小文件
為什么: 內(nèi)存中所有數(shù)據(jù)都是臨時(shí)的! 程序關(guān)閉，內(nèi)存中一切變量都釋放!
何時(shí): 只要希望在客戶端持久保存數(shù)據(jù)，都用cookie
.plugins: 包含瀏覽器所有插件信息的集合
3.什么是插件: 為瀏覽器添加新功能的小軟件
如何判斷是否安裝指定插件:
.userAgent: 保存瀏覽器名稱和版本號的字符串
何時(shí): 只要判斷瀏覽器名稱和版本號
什么是事件: 人為觸發(fā)的，或?yàn)g覽器自動觸發(fā)的頁面內(nèi)容狀態(tài)的改變。
什么是事件處理函數(shù): 當(dāng)事件發(fā)生時(shí)，自動執(zhí)行的函數(shù)。
如何綁定: 3種:
在HTML中綁定:
綁定:
當(dāng)事件發(fā)生時(shí): 自動執(zhí)行js語句
問題: 不符合內(nèi)容與行為分離的原則，不便于維護(hù)和重用
但是: 在組件開發(fā)中，反而要求內(nèi)容，行為和樣式集中定義在一個(gè)小組件內(nèi)，自成體系。
在js中綁定, 每個(gè)事件只能綁定一個(gè)處理函數(shù):
ANY.on事件名=function(){ ... }
當(dāng)事件發(fā)生時(shí): ANY.on事件名() //this->ANY
問題: 用賦值方式綁定事件處理函數(shù)
在js中綁定，每個(gè)事件可綁定多個(gè)處理函數(shù):
ANY.addEventListener("事件名",handler)
在瀏覽器中為ANY元素的指定事件，添加一個(gè)事件監(jiān)聽對象。將事件監(jiān)聽對象加入到瀏覽器的監(jiān)聽隊(duì)列中。
觸發(fā)事件時(shí): 瀏覽器會遍歷監(jiān)聽隊(duì)列中的每個(gè)監(jiān)聽對象，找到觸發(fā)事件元素上對應(yīng)事件的監(jiān)聽對象，調(diào)用其處理函數(shù)
移除事件監(jiān)聽:
ANY.removeEventListener("事件名",handler)
說明: handler必須是綁定時(shí)使用的原函數(shù)對象
強(qiáng)調(diào): 如果一個(gè)處理函數(shù)，有可能被移除，則不能使用匿名函數(shù)綁定。應(yīng)使用有名的函數(shù)綁定
什么是: 從事件觸發(fā)到處理函數(shù)執(zhí)行，所經(jīng)過的過程
3個(gè)階段:
捕獲capture: 由外向內(nèi)，記錄各級父元素上綁定的事件處理函數(shù)。——僅記錄，不觸發(fā)!
目標(biāo)觸發(fā): 優(yōu)先觸發(fā)實(shí)際點(diǎn)擊的元素上綁定的處理函數(shù)
冒泡執(zhí)行: 由內(nèi)向外，按捕獲階段記錄的處理函數(shù)的倒序，依次執(zhí)行父元素上的處理函數(shù)。
10.事件對象:什么是: 當(dāng)事件發(fā)生時(shí)，自動創(chuàng)建的，封裝事件信息的對象
何時(shí): 只要希望獲得事件信息，或修改事件的默認(rèn)行為時(shí)
如何獲取: 事件對象默認(rèn)總是以處理函數(shù)第一個(gè)參數(shù)，自動傳入
如何使用:
取消冒泡: e.stopPropagation()
利用冒泡:
優(yōu)化: 盡量減少事件監(jiān)聽的個(gè)數(shù)
為什么: 瀏覽器查找事件監(jiān)聽，采用的是遍歷的方式
事件監(jiān)聽多，瀏覽器查找就慢
何時(shí): 如果對多個(gè)子元素綁定相同事件時(shí)，都要利用冒泡
如何: 只要在父元素綁定一次，所有子元素共用即可!
2個(gè)難題:
1. 獲得目標(biāo)元素: 目標(biāo)元素: 最初實(shí)際觸發(fā)事件的當(dāng)前元素 如何獲得: 錯(cuò)誤: this->父元素 正確: e.target 2. 篩選目標(biāo)元素: 比如: 通過nodeName, class, 內(nèi)容。。。
阻止默認(rèn)行為:
何時(shí): 只要事件的默認(rèn)行為不是想要的
如何: e.preventDefault();
何時(shí):
用a當(dāng)按鈕時(shí)，a會自動向地址欄中添加#錨點(diǎn)地址。
提交表單時(shí)，如果驗(yàn)證沒通過，可阻止提交
自定義表單提交:
input button + onclick + form.submit
input submit + form.onsubmit事件 + e.preventDefault()
HTML5中拖拽API: 首先要阻止瀏覽器默認(rèn)的拖拽行為
11.鼠標(biāo)坐標(biāo): 3組:1. 相對于屏幕左上角: e.screenX, e.screenY 2. 相對于文檔顯示區(qū)左上角: e.clientX, e.clientY 3. 相對于當(dāng)前元素左上角: e.offsetX, e.offsetY12.頁面滾動:
事件: window.onscroll
獲得頁面滾動過的高度: body頂部超出文檔顯示區(qū)頂部的距離
scrollTop=document.documentElement.scrollTop
||document.body.scrollTop;
滾動API:
window.scrollTo(left, top)
window.scrollBy(left的增量,top的增量)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/92990.html
摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。 一道面試題引發(fā)的對 javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金 最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金 從原博客遷移...
摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。 一道面試題引發(fā)的對 javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金 最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金 從原博客遷移...
摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。 一道面試題引發(fā)的對 javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移過來...
摘要：基礎(chǔ)鞏固基礎(chǔ)總結(jié)使用已經(jīng)好幾年了，由于工作主要是做服務(wù)端開發(fā)，在工作中逐漸發(fā)現(xiàn)的使用范圍原來越廣泛。這里要注意，務(wù)必將基礎(chǔ)部分掌握牢靠，磨刀不誤砍柴功，只有將基礎(chǔ)部分掌握并建立起系統(tǒng)的知識體系，在后面學(xué)習(xí)衍生的其他模式才能游刃有余。 基礎(chǔ)鞏固：JavaScript基礎(chǔ)總結(jié) 使用JavaScript已經(jīng)好幾年了，由于工作主要是做服務(wù)端開發(fā)，在工作中逐漸發(fā)現(xiàn)JavaScript的使用范圍原...
摘要：今天同學(xué)去面試，做了兩道面試題全部做錯(cuò)了，發(fā)過來給道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。 排序算法 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha） - 前端 - 掘金來自《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》，by 阮一峰 目錄 冒泡排序 簡介 算法實(shí)現(xiàn) 選擇排序 簡介 算法實(shí)現(xiàn) ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經(jīng)典面...
閱讀 6912·2021-09-22 15:08
閱讀 1920·2021-08-24 10:03
閱讀 2437·2021-08-20 09:36
閱讀 1315·2020-12-03 17:22
閱讀 2474·2019-08-30 15:55
閱讀 905·2019-08-29 16:13
閱讀 3053·2019-08-29 12:41
閱讀 3249·2019-08-26 12:12
