類(lèi)數(shù)組轉(zhuǎn)換為數(shù)組
htmlcollection = document.getElementByTagName('tr');
htmlcollection = Array.prototype.slicestrong text.call(htmlcollection);
重力感應(yīng)事件
注意移動(dòng)端和PC端的屬性不相同，當(dāng)重力感應(yīng)事件 onorientationchange被觸發(fā)時(shí)。
可以通過(guò)判斷window.orientation來(lái)或得旋轉(zhuǎn)的方向，但是在PC端當(dāng)中，這個(gè)屬性等同于
window.screen.orientation.type，并且不能如愿的區(qū)分各個(gè)方向，大多其值為landscape-promary。
window.onorientationchange = orientationChange;
function orientationChange(){
switch(window.orientation){
case 0:
console.log('正常的');
break;
case 90:
console.log('左轉(zhuǎn)');
break;
case -90:
console.log('右轉(zhuǎn)');
break;
case 180:
console.log('倒轉(zhuǎn)');
break;
}
};
通過(guò)CSS設(shè)置設(shè)備轉(zhuǎn)屏?xí)r的樣式
<!--豎屏?xí)r使用的樣式-->
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
<!--橫屏?xí)r使用的樣式-->
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
關(guān)于innerHTML
innerHTML在IE10以前不支持
<col><colgroup><frameset><head><html><style><table><tbody><thead><tfoot><tr>
所以可以使用以下方案解決
function setTBodyInnerHTML(tbody, html) {
var div = document.createElement("div")
div.innerHTML = "<table>" + html + "</table>";
while (tbody.firstChild) {
tbody.removeChild (tbody.firstChild)
}
tbody.appendChild (div.firstChild.firstChild)
}
關(guān)于inline-block的bug
display:inline-block
如此設(shè)置會(huì)導(dǎo)致元素現(xiàn)實(shí)上有多余空格，解決方案：把元素間空格省略，或者設(shè)置font-size為0
移動(dòng)端滾動(dòng)條緩沖
-webkit-overflow-scrolling:touch; /* 核心代碼 */
代碼有效性
使用 W3C HTML Validator 來(lái)驗(yàn)證你的HTML代碼有效性；
使用 W3C CSS Validator 來(lái)驗(yàn)證你的CSS代碼有效性。
Css縮寫(xiě)
CSS文本：
font-style: italic;
font-weight: bold;
font-size: 30px;
line-height:50px;
font-family:arial,sans-serif;
font:italic bold 30px/50px arial,sans-serif;（有順序）
CSS背景：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
background:#f00 url(background.gif) no-repeat fixed 0 0; （無(wú)順序）
JS自定義事件
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
touch事件
原生的touch事件是 touchStart、touchMove、touchEnd。
在寫(xiě)自定義的touch時(shí)間的時(shí)候 需要注意是否需要將事件冒泡到document上，將會(huì)導(dǎo)致document的偏移，因此 可以使用以下代碼來(lái)阻止時(shí)間冒泡。
document.addEventListener('touchmove', function(e) {
e.preventDefault();
});
關(guān)于如何理解Css動(dòng)畫(huà)透視
關(guān)于3D動(dòng)畫(huà)的容器設(shè)置 prespective 的值時(shí)，可以簡(jiǎn)單將其理解為三維坐標(biāo)軸的原點(diǎn) ，該值決定的是Z值，另兩個(gè)值由 prespective-origin來(lái)決定，默認(rèn)為容器的中心。
因此當(dāng)確定透視點(diǎn)之后，所有元素沿Z軸的位移不能超過(guò)prespective的值，原因是默認(rèn)屏幕為Z= 0的平面，設(shè)置prespective = x坐標(biāo)原點(diǎn)變化后，屏幕為Z=x的平面，所有元素在Z軸上的位移超過(guò)x，在理論上將存在于屏幕的前方，所以無(wú)法在屏幕上顯示。
關(guān)于動(dòng)畫(huà)的注意事項(xiàng)
prespective 相關(guān)的屬性 要先于 rotateXTZ定義。否則無(wú)意義。
使用樣式
所有樣式使用class 與JS相關(guān)的 使用js-開(kāi)頭 用來(lái)與非功能性樣式區(qū)分
表單驗(yàn)證
所有的文字內(nèi)容需要轉(zhuǎn)碼 encodeURI進(jìn)行轉(zhuǎn)碼
撥打電話
a標(biāo)簽的tel協(xié)議
<a href='tel:18945000734'>my</a>
關(guān)于把數(shù)據(jù)強(qiáng)制轉(zhuǎn)換為布爾值的最佳實(shí)踐
！！num
非零數(shù)據(jù)為true 0為false
使用 ~實(shí)現(xiàn) indexof()==-1 轉(zhuǎn)換為false
~取反 為在十進(jìn)制中表現(xiàn)為 符號(hào)取反后減一 故此，-1取反變現(xiàn)為0 由此可以使用這種方式
if(~'abc'.indexOf(b))console.log(ok)
setTimeOut() 和 clearTimeOut（）使用
通常用于處理程序執(zhí)行超時(shí)
var setTime；
window.clearTimeOut(setTime);
var setTime = setTimeOut(function(){
console.log('ok');
},1000);
window.onload與document.DOMContentLoaded事件
window.onload需要等到所有全部加載完成，包括我們不想等待的圖片加載。
document.DOMContentLoaded則是當(dāng)所有DOM解析完以后會(huì)觸發(fā)這個(gè)事件。
常見(jiàn)的庫(kù)中都提供了此事件的兼容各個(gè)瀏覽器的封裝，如果你是個(gè)jQuery使用者，你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){}) 這都是使用了DOMContentLoaded事件
Css樣式 加載順序
不以class內(nèi)寫(xiě)的順序迭代，而是以CSS中寫(xiě)的順序?yàn)闇?zhǔn)
圖片加載
onload onerror 這個(gè)事件不冒泡
function loadImage(url, callback) {
var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載
img.src = url;
if(img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)
callback.call(img);
return; // 直接返回，不用再處理onload事件
}
img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)。
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象
};
};
CSS動(dòng)畫(huà)結(jié)束觸發(fā)的事件
webkitTransitionEnd
transition-property
PC上已經(jīng)支持 transform ,手機(jī)端需要 使用 -webkit-transform
-webkit-transform: translate3d(-1125px, 0px, 0px);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
關(guān)于min-height
即使父元素已經(jīng)觸發(fā)min-height，但是min-height子元素透明，子元素獲取不到父元素的高，所以在響應(yīng)式設(shè)計(jì)中需要注意的是盡量減少層級(jí)。
與此相同的還有 伸縮盒模型
關(guān)于垂直居中
top：50%；
transform: translatey(-50%);
translatey以百分比設(shè)置時(shí)，其基于元素本身大小進(jìn)行計(jì)算。
同理 進(jìn)行水平居中的時(shí)候
top：50%；
transform: translatex(-50%);
clac()
calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：
使用“+”“-”“*”“/”四則運(yùn)算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進(jìn)行計(jì)算。
瀏覽器支持
firefox 4.0+已經(jīng)開(kāi)支支持calc()功能，不過(guò)要使用-moz-calc()私有屬性，chrome從19 dev版，也開(kāi)始支持私有的-webkit-calc()寫(xiě)法，IE9這次則牛逼了一次，原生支持標(biāo)準(zhǔn)的不帶前綴的寫(xiě)法了。Opera貌似還不支持～～
注意：
在http://www.qianduan.net/calc-at-at-at-page-intelligent-layout.html看到的，他的原文中width:calc(100%-100px)是沒(méi)有空格的，經(jīng)測(cè)試無(wú)效，就像其評(píng)論中：calc()里面的表達(dá)式好像要注意格式。
事件
function swithcToTouchEvent(ori, pro){
var TouchList = [{
clientX : pro.clientX,
clientY : pro.clientY,
pageX : pro.pageX,
pageY : pro.pageY,
screenX : pro.screenX,
screenY : pro.screenY,
target : pro.target
}];
ori.changedTouches = TouchList;
ori.touches = TouchList;
ori.targetTouches = TouchList;
return ori;
}
mockTouchstart = document.createEvent('MouseEvents');
mockTouchstart.initEvent('touchstart',true,true);
frameDom.addEventListener('mousedown',function(e){
window._mockTouchTarget = e.target;
frameDom._touchstate = true; e.target.dispatchEvent(swithcToTouchEvent(mockTouchstart,e));
},false);
值得注意的是 creatEvent('MouseEvents'),MouseEvents.
圖片格式的選擇
能夠滿(mǎn)足透明需求的圖片格式有 png和 gif。
gif的透明只提供全透明，對(duì)于半透明不知道。
對(duì)于圖片中色彩跨度大的圖片適用于jpg
對(duì)于圖片中色彩較為單一png壓縮比更高。
另有新興圖片格式webP，該格式不能處理透明。
獲取css最終樣式
window.getComputedStyle(document.getElementById('name'))
此時(shí)取到的為計(jì)算后的樣式 ，transform為矩陣方式表達(dá)的。
表單input包在label內(nèi)
會(huì)擴(kuò)大有效操作區(qū)域
css3 實(shí)現(xiàn)毛玻璃濾鏡
-webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);
