JScss
1.對於原型而言,只要構造函數纔有prototype屬性,而構造函數的實例是沒有該屬性的,也就是說console.log(a1.prototype)輸出的是undefined.html
2.每個函數的prototype屬性指向的對象都包含惟一一個不可枚舉屬性constructor,constructor又指向了它所在的構造函數。每個構造函數的實例都會繼承這個constructor。json
3.新定義prototype對象的話,該prototype對象中的constructor就會指向別的構造函數(以下),此時的constructor指向的就是objectcanvas
A.prototype={數組
getName:function(){return this.name}閉包
}函數
修改這個問題的方法就是,再給這個prototype顯示的添加上constructor:A性能
4.js的解析過程分爲兩個階段:預編譯期和執行期this
預編譯的時候,會先將聲明式函數進行處理,同時也進行變量的聲明,將其賦爲undefined。按照代碼塊(<script>)從上到下分別進行編譯,因此下面的代碼塊能夠引用上面代碼塊的變量。spa
若代碼塊出現錯誤,則會跳過該代碼塊剩下的代碼,進入下一個代碼塊。
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;