window.onload 和 document.onDOMContentLoaded 有什么区别？
//页面所有资源加载完成
window.onload = function(){
console.log('window loaded')
}
//DOM结构解析完成
document.addEventListenner("DOMContentLoaded",function(){
console.log("DOMContentLoaded")
})
这两个事件都是在js原生开发时经常会用到的，比如需要对页面dom进行动态处理，这时就需要用到DOMContentLoaded和window.onload事件，就是在dom构建完毕后，才可以对dom元素进行操作，否则会获取不到相应的dom元素，但是DOMContentLoaded和window.onload还是有很大区别的，DOMContentLoaded在dom构建完成之后就会执行，如果在页面中需要加载其他资源，比如图片、flash等，必须这些资源全部加在完毕后才会执行window.onload，所以DOMContentLoaded是在window.onload之前执行。
Jquery的$(document).ready就是利用了DOMContentLoaded来实现的，但是DOMContentLoaded在IE9以下不支持，需要对IE9以下版本进行兼容处理.
如何获取图片真实的宽高？
document.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded ')
})
console.log($('img').width) //0
$('img').onload = function(){ //图片请求到了,触发事件
console.log(this.width) //此时才能得到图片的真实大小
}
如何获取元素的真实宽高？
//ie8及以前版本：通过currentStyle
alert(document.getElementById('id').currentStyle.width);
//ff,safari,opera,chrome,ie9及之后版本:通过window.getComputedStyle
var el=document.getElementById('id');
alert(window.getComputedStyle(el,null).width);
URL 如何编码解码？为什么要编码？
JavaScript提供四个URL的编码/解码方法。
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
encodeURI方法不会对下列字符编码
ASCII字母
数字
~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码
ASCII字母
数字
~!*()'
为什么编码?
为什么需要Url编码，通常如果一样东西需要编码，说明这样东西并不适合传输。原因多种多样，如Size过大，包含隐私数据，对于Url来说，之所 以要进行编码，是因为Url中有些字符会引起歧义
Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf- 8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义， 也就是对其进行编码
Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏 览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。
补全如下函数，判断用户的浏览器类型。
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提供的，可以避免数据在浏览器和服务器之间不必要的来回传递。
sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据。
三者之间的区别：
cookie:
1.每个域名的存储量有限（一般是4k）
2.所有域名的存储量有限
3.会跟随请求被发送到服务器上
4.有个数限制，不同浏览器下，一个域名下cookie的个数有限，并且限制数量可能不一样
sessionStorage:
1.当浏览器窗口关闭的时候， sessionStorage 就会被销毁
2.存储容量大(一般比localStorage的存储容量大)
localStorage:
1.在客户端永久保存
2.单个域名的存储容量大(一般为5M)
3.总体数量无限制
使用 localStorage封装一个 Storage 对象，达到如下效果：
Storage.set('name', '饥人谷')
Storage.set('age', 2, 30) ; //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饥人谷’
Storage.get('age') // 如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超过60秒，返回数组； 如果超过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]
}
}
}
})()
网友评论