前端知识汇总
盒子模型
2种:IE盒子模型 W3C标准盒子模型
盒模型:内容、内边距、外边距、边框
为什么要初始化样式
浏览器兼容问题,不同浏览器对标签默认值不同,造成差异
严格模式&混杂模式
严格模式:页面排版与JS解析以该浏览器支持的最高标准来执行
混杂模式:不严格按照标准执行,主要用来兼容旧浏览器
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
空元素有哪些
<br> <hr> <img> <link> <meta>
display属性
1.display:block 行内元素转为块级元素
2.display:inline 块级元素转为行内元素
3.display:inline-block 转为内联元素
JS的typeof返回那些数据类型
object number function boolean underfined string
强制类型转换和隐式类型转换
强制:parseInt parseFloat Number()
隐式:(==)
split() & join()
split() 切割成数组
join() 将数组转字符串
pop() push() unshift() shift()
push() 尾部添加
pop() 尾部删除
unshifit() 头部添加
shift() 头部删除
事件绑定的三种方式
1.div1.onclick = function(){}
同一元素绑定两次以上相同类型的事件,后面的绑定覆盖前面
不支持DOM事件流
(DOM事件流:事件捕获阶段——目标元素阶段——事件冒泡阶段)
2.addEventListener("click",function(){},true)(此时事件是在事件冒泡阶段执行)
依次触发绑定事件
支持DOM事件流
传参不需要ON前缀
3.ie9以前:attachEvent/detachEvent
进行事件类型传参需要on前缀
只支持事件冒泡,不支持事件捕获
事件绑定是指把事件注册到具体的元素之上,普通事件指可以用来注册的事件
IE&DOM事件流区别
执行顺序不一样
参数不一样
事件加不加on
this指向问题
call&apply
相同点:改变this指向,为了使用一个本不属于这个对象的方法
不同点:apply传入的参数是一个数组
call传入的参数用逗号隔开
事件委托
利用事件冒泡原理,让自己所触发的事件,让他的父元素代替执行
闭包
概念:函数A里有函数B,函数B能够访问函数A的变量及数据
缺点:造成内存泄露
优点:延长
阻止事件冒泡和默认事件
e.stopPropagation()//标准浏览器
event.cancelBubble = true//IE9以前
阻止默认事件
return false
e.preventDefault()
添加 删除 替换 插入到某个节点的方法
obj.appendChild()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
创建新节点
createElement() 创建具体的元素
createTextCode() 创建文本节点
createDocumentFragment() 创建一个DOM片段
查找节点
getElementsByTagName()
getElementsByName()//name属性
getElementById()
本地对象、内置对象、宿主对象
本地:array\obj\regexp等可以new实例化
内置:Math Date
宿主:浏览器自带的document window
document load & document ready
onload:是在结构和样式加载完毕才执行JS
ready:是在jQuery中表示文档结构已经加载完成(不包含图片等非文字媒体文件)
同源策略
IP 端口 协议 相同
数据类型
基本:String ,Boolean, number, undefined,null
引用:object
如何判断变量是否是数组数据类型
是否具有数组性质的方法,如slice()
alert(obj istanceof Array )
Array.isArray()
获取input输入框的值
document.getElementById("id").value
undefined & null 区别
null:Null类型,代表空值 使用typeof运算得到“object”,访问一个尚未存在的对象
undefined:undefined类型,当一个变量声明了但未初始化时
什么情况会产生undefined
声明一个变量未初始化
获取一个变量不存在的属性或方法
一个数组中没有被赋值的元素
foo = foo||bar ?
短路表达式
如果foo存在,值不变,否则把bar的值赋给foo
if条件判断,以下情况是false
空字符串、false 、undefined 、null 、0
举例浏览器对象模型中常用的对象 以及常用的方法
对象:window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
创建函数的几种方式
函数声明
function sum (n1, n2) {
return n1 + n2
}
函数表达式
var sum2 = function (n1, n2) {
return n1 +n2
}
匿名函数
(function(){
console.log("hello world")
})()
函数对象方式
var sum3 = new Function("num1", "num2", "return num1 + num2")
何如实现继承
原型链。借用构造函数 组合继承
创建对象的方式
工厂模式 构造函数创建对象 原型模式
Cookie的弊端
长度和数量限制 每个domain最多20条cookie 长度不超过4k