类数组转换为数组
htmlcollection = document.getElementByTagName('tr');
htmlcollection = Array.prototype.slicestrong text.call(htmlcollection);
重力感应事件
注意移动端和PC端的属性不相同，当重力感应事件 onorientationchange被触发时。
可以通过判断window.orientation来或得旋转的方向，但是在PC端当中，这个属性等同于
window.screen.orientation.type，并且不能如愿的区分各个方向，大多其值为landscape-promary。
window.onorientationchange = orientationChange;
function orientationChange(){
switch(window.orientation){
case 0:
console.log('正常的');
break;
case 90:
console.log('左转');
break;
case -90:
console.log('右转');
break;
case 180:
console.log('倒转');
break;
}
};
通过CSS设置设备转屏时的样式
<!--竖屏时使用的样式-->
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
<!--横屏时使用的样式-->
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>
关于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)
}
关于inline-block的bug
display:inline-block
如此设置会导致元素现实上有多余空格，解决方案：把元素间空格省略，或者设置font-size为0
移动端滚动条缓冲
-webkit-overflow-scrolling:touch; /* 核心代码 */
代码有效性
使用 W3C HTML Validator 来验证你的HTML代码有效性；
使用 W3C CSS Validator 来验证你的CSS代码有效性。
Css缩写
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; （无顺序）
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。
在写自定义的touch时间的时候 需要注意是否需要将事件冒泡到document上，将会导致document的偏移，因此 可以使用以下代码来阻止时间冒泡。
document.addEventListener('touchmove', function(e) {
e.preventDefault();
});
关于如何理解Css动画透视
关于3D动画的容器设置 prespective 的值时，可以简单将其理解为三维坐标轴的原点 ，该值决定的是Z值，另两个值由 prespective-origin来决定，默认为容器的中心。
因此当确定透视点之后，所有元素沿Z轴的位移不能超过prespective的值，原因是默认屏幕为Z= 0的平面，设置prespective = x坐标原点变化后，屏幕为Z=x的平面，所有元素在Z轴上的位移超过x，在理论上将存在于屏幕的前方，所以无法在屏幕上显示。
关于动画的注意事项
prespective 相关的属性 要先于 rotateXTZ定义。否则无意义。
使用样式
所有样式使用class 与JS相关的 使用js-开头 用来与非功能性样式区分
表单验证
所有的文字内容需要转码 encodeURI进行转码
拨打电话
a标签的tel协议
<a href='tel:18945000734'>my</a>
关于把数据强制转换为布尔值的最佳实践
！！num
非零数据为true 0为false
使用 ~实现 indexof()==-1 转换为false
~取反 为在十进制中表现为 符号取反后减一 故此，-1取反变现为0 由此可以使用这种方式
if(~'abc'.indexOf(b))console.log(ok)
setTimeOut() 和 clearTimeOut（）使用
通常用于处理程序执行超时
var setTime；
window.clearTimeOut(setTime);
var setTime = setTimeOut(function(){
console.log('ok');
},1000);
window.onload与document.DOMContentLoaded事件
window.onload需要等到所有全部加载完成，包括我们不想等待的图片加载。
document.DOMContentLoaded则是当所有DOM解析完以后会触发这个事件。
常见的库中都提供了此事件的兼容各个浏览器的封装，如果你是个jQuery使用者，你可能会经常使用$(document).ready();或者$(function(){}) 这都是使用了DOMContentLoaded事件
Css样式 加载顺序
不以class内写的顺序迭代，而是以CSS中写的顺序为准
图片加载
onload onerror 这个事件不冒泡
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
CSS动画结束触发的事件
webkitTransitionEnd
transition-property
PC上已经支持 transform ,手机端需要 使用 -webkit-transform
-webkit-transform: translate3d(-1125px, 0px, 0px);
-webkit-transition: -webkit-transform 0.3s ease-in-out;
关于min-height
即使父元素已经触发min-height，但是min-height子元素透明，子元素获取不到父元素的高，所以在响应式设计中需要注意的是尽量减少层级。
与此相同的还有 伸缩盒模型
关于垂直居中
top：50%；
transform: translatey(-50%);
translatey以百分比设置时，其基于元素本身大小进行计算。
同理 进行水平居中的时候
top：50%；
transform: translatex(-50%);
clac()
calc()使用通用的数学运算规则，但是也提供更智能的功能：
使用“+”“-”“*”“/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算。
浏览器支持
firefox 4.0+已经开支支持calc()功能，不过要使用-moz-calc()私有属性，chrome从19 dev版，也开始支持私有的-webkit-calc()写法，IE9这次则牛逼了一次，原生支持标准的不带前缀的写法了。Opera貌似还不支持～～
注意：
在http://www.qianduan.net/calc-at-at-at-page-intelligent-layout.html看到的，他的原文中width:calc(100%-100px)是没有空格的，经测试无效，就像其评论中：calc()里面的表达式好像要注意格式。
事件
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.
图片格式的选择
能够满足透明需求的图片格式有 png和 gif。
gif的透明只提供全透明，对于半透明不知道。
对于图片中色彩跨度大的图片适用于jpg
对于图片中色彩较为单一png压缩比更高。
另有新兴图片格式webP，该格式不能处理透明。
获取css最终样式
window.getComputedStyle(document.getElementById('name'))
此时取到的为计算后的样式 ，transform为矩阵方式表达的。
表单input包在label内
会扩大有效操作区域
css3 实现毛玻璃滤镜
-webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px);
网友评论