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{_100px;} //IE6 .header{*+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时 ' ' 也会算作一个文本节点 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;