JS
1.对于原型而言,只要构造函数才有prototype属性,而构造函数的实例是没有该属性的,也就是说console.log(a1.prototype)输出的是undefined.
2.每一个函数的prototype属性指向的对象都包含唯一一个不可枚举属性constructor,constructor又指向了它所在的构造函数。每一个构造函数的实例都会继承这个constructor。
3.新定义prototype对象的话,该prototype对象中的constructor就会指向别的构造函数(如下),此时的constructor指向的就是object
A.prototype={
getName:function(){return this.name}
}
修改这个问题的方法就是,再给这个prototype显示的添加上constructor:A
4.js的解析过程分为两个阶段:预编译期和执行期
预编译的时候,会先将声明式函数进行处理,同时也进行变量的声明,将其赋为undefined。按照代码块(<script>)从上到下分别进行编译,所以下面的代码块可以引用上面代码块的变量。
若代码块出现错误,则会跳过该代码块剩下的代码,进入下一个代码块。
5.因为全局变量会在作用域链的最后得到访问,效率较慢,同时又容易产生污染,所以尽量避免使用全局变量。
6.对于canvas而言,画布中的图形不会超过canvas的范围。
7.闭包:A函数可以访问B函数中的变量。但闭包使用过多,B函数中的变量会一直保存不会释放回收,会严重消耗内存,影响性能。
8.js中没有块级作用域的概念。所以
for(var i=0;i<10;i++){
alert(i);
}
alert(i); //11
之后,i还是存在的。
9.alert(p1 instanceof Person) //判断p1是否是Person的实例
delete p1.name //删除p1的name属性
alert(‘name‘ in p1) //判断name属性是否在p1中
var arr=Object.keys(p1) //得到对象的所有属性,返回一个数组
CSS
1.css hack主要针对于IE6/7,
选择器hack: *html .selector{} //IE6
*+html .selector{} //IE 7
属性hack: .header{_width:100px;} //IE6
.header{*+width:100px;} //IE7
2.clientHeight=topPadding+bottomPadding+height(可看到的区域)-scrollbar.height
offsetHeight=clientHeight+滚动条+边框
scrollHeight=topPadding+bottomPadding+内容的高度(内容的实际高度)
3.clientTop:borderTop的厚度
scrollTop:被卷起的高度
offsetTop:相对于第一个使用了position的父元素上边框的距离
兼容性问题
1.textarea文本自适应
IE:textarea.onpropertychange=function(){
this.style.posHeight=this.scrollHeight;
}
FF: textarea.oninput=function(){
this.style.height=this.scrollHeight+‘px‘;
}
2.事件问题
function addEventListener(obj,type,handle){
if(obj.attachEvent){ //IE
obj.attachEvent(‘on‘+type,handle);
obj.attachEvent(‘on‘+type,stopEvent);
}else{ //FF
obj.addEventListener(type,handle,false);
obj.addEventListener(type,stopEvent,false);
}
}
function stopEvent(Event){
var e=event||window.event; //FF||IE
var srcEle=e.target||e.srcElement; //FF||IE
var mx=e.pageX||e.x; //FF||IE
if(e.stopPropagation){ //FF
e.stopPropagation();
}else{ //IE
e.cancelBubble=true;
}
}
3.父元素:
IE:ele.parentElement
IE,FF:ele.parentNode和parent.childNodes
4.在打开的子窗口刷新父窗口 window.opener.location.reload();
IE:ele.innerText
FF:ele.textContext
5.创建XMLHTTPRequest
if(window.XMLHTTPRequest){
req=new XMLHTTPRequest();
}else if(window.ActiveXObject){
req=new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
8.使用parent.childNodes时 ‘\n‘ 也会算作一个文本节点
9.图片预加载
function preLoadImg(src.callback){
var img=new Image();
img.src=src;
if(!!window.ActiveXObject){
img.onreadystatechange=function(){
if(this.readyState==‘complete‘){
callback();
}
}
}else{
img.onload=function(){
callback();
}
}
}
10.IE6没有position:fixed这一属性值
11.HTML5 localStorage
localStorage.clear(); //清除localStorage的数据
for(var i=0;i<localStorage.length;i++){
var key=localStorage.key(i);
var value=localStorage.getItem(key);
}
将json文本作为键值存储在localStorage中,存储的信息量将大大提高
12. HTML5 读取文件
var file=document.getElementById(‘file‘).files[0];
var reader=new FileReader();
reader.readAsDataURL(file); //readAsBinaryString,readAsText
reader.onload=function(){
result.innerHTML=this.result;
}
13.图片浮动时,下放会产生空隙,解决方案:对图片的属性设置 vertical-align:top;