window.onload 和 document.onDOMContentLoaded 有什么區(qū)別巷送？
//頁(yè)面所有資源加載完成
window.onload = function(){
console.log('window loaded')
}
//DOM結(jié)構(gòu)解析完成
document.addEventListenner("DOMContentLoaded",function(){
console.log("DOMContentLoaded")
})
這兩個(gè)事件都是在js原生開(kāi)發(fā)時(shí)經(jīng)常會(huì)用到的，比如需要對(duì)頁(yè)面dom進(jìn)行動(dòng)態(tài)處理荠列，這時(shí)就需要用到DOMContentLoaded和window.onload事件，就是在dom構(gòu)建完畢后，才可以對(duì)dom元素進(jìn)行操作涧窒，否則會(huì)獲取不到相應(yīng)的dom元素，但是DOMContentLoaded和window.onload還是有很大區(qū)別的锭亏，DOMContentLoaded在dom構(gòu)建完成之后就會(huì)執(zhí)行纠吴，如果在頁(yè)面中需要加載其他資源，比如圖片慧瘤、flash等戴已，必須這些資源全部加在完畢后才會(huì)執(zhí)行window.onload膳凝，所以DOMContentLoaded是在window.onload之前執(zhí)行。
Jquery的$(document).ready就是利用了DOMContentLoaded來(lái)實(shí)現(xiàn)的恭陡，但是DOMContentLoaded在IE9以下不支持蹬音，需要對(duì)IE9以下版本進(jìn)行兼容處理.
如何獲取圖片真實(shí)的寬高？
document.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded ')
})
console.log($('img').width) //0
$('img').onload = function(){ //圖片請(qǐng)求到了,觸發(fā)事件
console.log(this.width) //此時(shí)才能得到圖片的真實(shí)大小
}
如何獲取元素的真實(shí)寬高休玩？
//ie8及以前版本：通過(guò)currentStyle
alert(document.getElementById('id').currentStyle.width);
//ff,safari,opera,chrome,ie9及之后版本:通過(guò)window.getComputedStyle
var el=document.getElementById('id');
alert(window.getComputedStyle(el,null).width);
URL 如何編碼解碼著淆？為什么要編碼？
JavaScript提供四個(gè)URL的編碼/解碼方法拴疤。
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
encodeURI方法不會(huì)對(duì)下列字符編碼
ASCII字母
數(shù)字
~!@#$&*()=:/,;?+'
encodeURIComponent方法不會(huì)對(duì)下列字符編碼
ASCII字母
數(shù)字
~!*()'
為什么編碼?
為什么需要Url編碼永部，通常如果一樣?xùn)|西需要編碼，說(shuō)明這樣?xùn)|西并不適合傳輸呐矾。原因多種多樣苔埋，如Size過(guò)大，包含隱私數(shù)據(jù)蜒犯，對(duì)于Url來(lái)說(shuō)组橄，之所 以要進(jìn)行編碼，是因?yàn)閁rl中有些字符會(huì)引起歧義
Url參數(shù)字符串中使用key=value鍵值對(duì)這樣的形式來(lái)傳參罚随，鍵值對(duì)之間以&符號(hào)分隔玉工，如/s?q=abc&ie=utf- 8。如果你的value字符串中包含了=或者&淘菩，那么勢(shì)必會(huì)造成接收Url的服務(wù)器解析錯(cuò)誤遵班，因此必須將引起歧義的&和=符號(hào)進(jìn)行轉(zhuǎn)義， 也就是對(duì)其進(jìn)行編碼
Url的編碼格式采用的是ASCII碼潮改，而不是Unicode狭郑，這也就是說(shuō)你不能在Url中包含任何非ASCII字符，例如中文汇在。否則如果客戶端瀏 覽器和服務(wù)端瀏覽器支持的字符集不同的情況下翰萨，中文可能會(huì)造成問(wèn)題。
補(bǔ)全如下函數(shù)趾疚，判斷用戶的瀏覽器類型缨历。
function isAndroid(){
}
function isIphone(){
}
function isIpad(){
}
function isIOS(){
}
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
funcnction isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/i.test(navigator.userAgent);
}
cookie & session &localStorage 分別是什么？
sessionStorage糙麦、localStorage是HTML5提供的Web Storage API提供的辛孵，可以避免數(shù)據(jù)在瀏覽器和服務(wù)器之間不必要的來(lái)回傳遞。
sessionStorage赡磅、 localStorage 魄缚、 cookie 都是在瀏覽器端存儲(chǔ)的數(shù)據(jù)。
三者之間的區(qū)別：
cookie:
1.每個(gè)域名的存儲(chǔ)量有限（一般是4k）
2.所有域名的存儲(chǔ)量有限
3.會(huì)跟隨請(qǐng)求被發(fā)送到服務(wù)器上
4.有個(gè)數(shù)限制，不同瀏覽器下冶匹，一個(gè)域名下cookie的個(gè)數(shù)有限习劫，并且限制數(shù)量可能不一樣
sessionStorage:
1.當(dāng)瀏覽器窗口關(guān)閉的時(shí)候， sessionStorage 就會(huì)被銷毀
2.存儲(chǔ)容量大(一般比localStorage的存儲(chǔ)容量大)
localStorage:
1.在客戶端永久保存
2.單個(gè)域名的存儲(chǔ)容量大(一般為5M)
3.總體數(shù)量無(wú)限制
使用 localStorage封裝一個(gè) Storage 對(duì)象嚼隘，達(dá)到如下效果：
Storage.set('name', '饑人谷')
Storage.set('age', 2, 30) ; //設(shè)置 name 字段存儲(chǔ)的值為'饑人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饑人谷’
Storage.get('age') // 如果不超過(guò)30秒诽里，返回?cái)?shù)字類型的2；如果超過(guò)30秒飞蛹，返回 undefined谤狡，并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超過(guò)60秒，返回?cái)?shù)組卧檐； 如果超過(guò)60秒墓懂，返回undefined
var Storage = (function(){
return {
set: function(key, value, expireSeconds){
localStorage[key] = JSON.stringify({
value: value,
expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds
})
},
get: function(key){
if(localStorage[key] === undefined){
return
}
var o = JSON.parse(localStorage[key])
if(o.expired === undefined || Date.now() < o.expired){
return o.value
}else{
delete localStorage[key]
}
}
}
})()
