前端知識(shí)匯總
盒子模型
2種:IE盒子模型 W3C標(biāo)準(zhǔn)盒子模型
盒模型:內(nèi)容、內(nèi)邊距苗踪、外邊距跪者、邊框
為什么要初始化樣式
瀏覽器兼容問題,不同瀏覽器對(duì)標(biāo)簽?zāi)J(rèn)值不同妹卿,造成差異
嚴(yán)格模式&混雜模式
嚴(yán)格模式:頁(yè)面排版與JS解析以該瀏覽器支持的最高標(biāo)準(zhǔn)來執(zhí)行
混雜模式:不嚴(yán)格按照標(biāo)準(zhǔn)執(zhí)行旺矾,主要用來兼容舊瀏覽器
DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)
空元素有哪些
<br> <hr> <img> <link> <meta>
display屬性
1.display:block 行內(nèi)元素轉(zhuǎn)為塊級(jí)元素
2.display:inline 塊級(jí)元素轉(zhuǎn)為行內(nèi)元素
3.display:inline-block 轉(zhuǎn)為內(nèi)聯(lián)元素
JS的typeof返回那些數(shù)據(jù)類型
object number function boolean underfined string
強(qiáng)制類型轉(zhuǎn)換和隱式類型轉(zhuǎn)換
強(qiáng)制:parseInt parseFloat Number()
隱式:(==)
split() & join()
split() 切割成數(shù)組
join() 將數(shù)組轉(zhuǎn)字符串
pop() push() unshift() shift()
push() 尾部添加
pop() 尾部刪除
unshifit() 頭部添加
shift() 頭部刪除
事件綁定的三種方式
1.div1.onclick = function(){}
同一元素綁定兩次以上相同類型的事件蔑鹦,后面的綁定覆蓋前面
不支持DOM事件流
(DOM事件流:事件捕獲階段——目標(biāo)元素階段——事件冒泡階段)
2.addEventListener("click",function(){},true)(此時(shí)事件是在事件冒泡階段執(zhí)行)
依次觸發(fā)綁定事件
支持DOM事件流
傳參不需要ON前綴
3.ie9以前:attachEvent/detachEvent
進(jìn)行事件類型傳參需要on前綴
只支持事件冒泡,不支持事件捕獲
事件綁定是指把事件注冊(cè)到具體的元素之上宠漩,普通事件指可以用來注冊(cè)的事件
IE&DOM事件流區(qū)別
執(zhí)行順序不一樣
參數(shù)不一樣
事件加不加on
this指向問題
call&apply
相同點(diǎn):改變this指向举反,為了使用一個(gè)本不屬于這個(gè)對(duì)象的方法
不同點(diǎn):apply傳入的參數(shù)是一個(gè)數(shù)組
call傳入的參數(shù)用逗號(hào)隔開
事件委托
利用事件冒泡原理懊直,讓自己所觸發(fā)的事件扒吁,讓他的父元素代替執(zhí)行
閉包
概念:函數(shù)A里有函數(shù)B,函數(shù)B能夠訪問函數(shù)A的變量及數(shù)據(jù)
缺點(diǎn):造成內(nèi)存泄露
優(yōu)點(diǎn):延長(zhǎng)
阻止事件冒泡和默認(rèn)事件
e.stopPropagation()//標(biāo)準(zhǔn)瀏覽器
event.cancelBubble = true//IE9以前
阻止默認(rèn)事件
return false
e.preventDefault()
添加 刪除 替換 插入到某個(gè)節(jié)點(diǎn)的方法
obj.appendChild()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
創(chuàng)建新節(jié)點(diǎn)
createElement() 創(chuàng)建具體的元素
createTextCode() 創(chuàng)建文本節(jié)點(diǎn)
createDocumentFragment() 創(chuàng)建一個(gè)DOM片段
查找節(jié)點(diǎn)
getElementsByTagName()
getElementsByName()//name屬性
getElementById()
本地對(duì)象室囊、內(nèi)置對(duì)象雕崩、宿主對(duì)象
本地:array\obj\regexp等可以new實(shí)例化
內(nèi)置:Math Date
宿主:瀏覽器自帶的document window
document load & document ready
onload:是在結(jié)構(gòu)和樣式加載完畢才執(zhí)行JS
ready:是在jQuery中表示文檔結(jié)構(gòu)已經(jīng)加載完成(不包含圖片等非文字媒體文件)
同源策略
IP 端口 協(xié)議 相同
數(shù)據(jù)類型
基本:String ,Boolean, number, undefined,null
引用:object
如何判斷變量是否是數(shù)組數(shù)據(jù)類型
是否具有數(shù)組性質(zhì)的方法,如slice()
alert(obj istanceof Array )
Array.isArray()
獲取input輸入框的值
document.getElementById("id").value
undefined & null 區(qū)別
null:Null類型融撞,代表空值 使用typeof運(yùn)算得到“object”盼铁,訪問一個(gè)尚未存在的對(duì)象
undefined:undefined類型,當(dāng)一個(gè)變量聲明了但未初始化時(shí)
什么情況會(huì)產(chǎn)生undefined
聲明一個(gè)變量未初始化
獲取一個(gè)變量不存在的屬性或方法
一個(gè)數(shù)組中沒有被賦值的元素
foo = foo||bar ?
短路表達(dá)式
如果foo存在尝偎,值不變饶火,否則把bar的值賦給foo
if條件判斷,以下情況是false
空字符串致扯、false 肤寝、undefined 、null 抖僵、0
舉例瀏覽器對(duì)象模型中常用的對(duì)象 以及常用的方法
對(duì)象:window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
創(chuàng)建函數(shù)的幾種方式
函數(shù)聲明
function sum (n1, n2) {
return n1 + n2
}
函數(shù)表達(dá)式
var sum2 = function (n1, n2) {
return n1 +n2
}
匿名函數(shù)
(function(){
console.log("hello world")
})()
函數(shù)對(duì)象方式
var sum3 = new Function("num1", "num2", "return num1 + num2")
何如實(shí)現(xiàn)繼承
原型鏈鲤看。借用構(gòu)造函數(shù) 組合繼承
創(chuàng)建對(duì)象的方式
工廠模式 構(gòu)造函數(shù)創(chuàng)建對(duì)象 原型模式
Cookie的弊端
長(zhǎng)度和數(shù)量限制 每個(gè)domain最多20條cookie 長(zhǎng)度不超過4k