日常工作bug总结

1.在使用jQuery的text()与val()使用时，如果按钮是<button></button>的形式使用text()写入时，在IE8下会出现延迟，即我在写定时器5秒倒计时写入button标签时，5,4,3,2,1,中的4有时出现不了，解决方法是使用<input type="button" value="">按钮代替button标签，使用val()写入。所以在写入时有变量则要选择使用input按钮。例：oBtn.val(i);

2.在使用opacity: 0.1;filter: alpha(opacity=10);(IE下一一般会使用滤镜) 父元素使用透明度时会使子元素也产生透明，解决方法是使俩元素的父子关系转化为兄弟关系。在使用 background:rgba(51,51,51,0.1);设置透明时不会使子元素发生透明，但只支持IE9+。

3.jquery的height()无法获得可视区的高度，使用原生JS的clientHeight。

可以：$('window').height();

兼容写法

if(document.compatMode == "BackCompat") {//渲染方式
    wHeight = document.body.clientHeight;
}else {//"CSS1compat"
    wHeight = document.documentElement.clientHeight;
}

4.max-width一般与下面几个属性一起使用

max-width: 300px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;

当页面超出范围时显示...。

5.关于CDN

CDN是Content delivery network（内容分发网络)的简称，这一技术以往只应用于大型商业性网站。通过使用这种技术，可以将网站上的静态内容（例如.html文件、.jpg图片）和动态内容（例如数据库查询）缓存到CDN提供商位于全球各地的多个服务器上。这样当全世界不同访客访问这个网站的时候，就不再需要通过网站所在服务器读取这些内容，而是可以从就近的CDN缓存服务器上读取，因此内容的读取速度更快，直接影响就是网页的加载速度更快。

6.em,px,rem

如果设置body的font-size的大小为24px;子元素字体大小设置为0.5em则字体大小为12px

rem只支持IE8以上的浏览器(不包括IE8)，当使用 rem 单位，他们转化为像素大小取决于页根元素(html)的字体大小

7.文档碎片(减少页面重绘重排)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文档碎片</title>
</head>
<body>    
<script>
    var temp = document.createDocumentFragment();//文档碎片(当把文档碎片付给某节点时，只是把文档碎片中的子节点付给了某节点，它本身并没有插入到这个节点中)
    for (var i=0; i<100; i++) {
        var test =document.createElement('div');//创建一个节点
        test.innerHTML = 'aaa' + i;//给节点添加内容
        temp.appendChild(test);//把创建的节点插入到temp文档中
    }
    document.body.appendChild(temp);//把temp文档插入到body末尾
</script>
</body>
</html>
</html>

8.box-sizing: border-box;

当给元素设定宽高时，设置border，padding不改变其宽高的大小。即IE盒模型。与之相反的是标准盒模型(boz-sizing: content-box;)。

9.通过

function getByClass(oParent,sClass){
	var aEle=oParent.getElementsByTagName("*");
	var i=0;
	var aResult=[];
	for(i=0;i<aEle.length;i++){
		if(aEle[i].className==sClass){
			aResult.push(aEle[i]);
		}
	}
		return aResult;
}

例：var aLi = getByClass(xx,‘xx’)；

aLi是一个数组，获取的是一个唯一值时要用aLi[0]获得。

10.俩个二级域名http://user.cliim.net与http://biz.cliim.net/，其中一个设置的cookie在另一个获取不到，所以要将cookie设置在一级域名http://cliim.net下

var SetCookievar = function(name,value,domain){
　　document.cookie = name + "="+ escape (value) +";domain=" + domain;
}

domain为cliim.net而不是http://cliim.net。

可通过正则表达式获取var domain = window.location.host.replace(/(biz\.)|(user\.)/, "");

http://baidu.com/a与http://baidu.com/b同理。

获取方式：url.replace(/http:\/\/.*?([^\.]+\.(com\.cn|org\.cn|net\.cn|[^\.]+))\/.+/, "$1"));

11.IE7提示升级

document.documentMode：IE多少则返回多少。

12.判断某元素是否含有子元素：

if(this.model.children&&this.model.children.length){}

13.如何判断是否获取到jquery对象

$("#XXXX").length != 0

14.谷歌高清屏背景图片的添加方式

background-image: url('/cli/images/user_plugin_service_head_bg_1x.png');
background-image: -webkit-image-set(url('/cli/images/user_plugin_service_head_bg_1x.png') 1x,url('/cli/images/user_plugin_service_head_bg_2x.png') 2x);

15.对某内联元素使用定位时，会将其从内联元素变为块元素(只有块级元素才可以使用定位)，width的长度不再是文字的长度

16.JSON.parse()：JSON字符串转化为JSON对象

JSON.stringify()：JSON对象转化为JSON字符串

17.关于字符编码

一个字节有八位，可以表示2^8=256个字符，而ASCLL码有128个字符，英文字符可以用这128个字符表示，所以一个英文字母代表一个字节，但中文有十万多个字，并不能用256个字符表示，所以会用gb2312，即用俩个字节表示
，表示的字数可以为256*256=65536个字符。
在128到256之间空的位置不同的编码方式存放不同的字符，Unicode则编码使用唯一的编码，即不会产生乱码，
utf-8是Unicode的一种方式。
Unicode例\u7528，可以用console.log直接输出
URL在进行get请求时会对汉字进行编码，使用decodeURIComponent()对汉字进行解码
编码函数是encodeURIComponent()
对整个URL进行编码：encodeURI()
解码：decodeURI()

18.$_each()的使用

$_each($('li'), function(i, n) {

　　console.log(i + n);

　　//其中i表示第几个$('li')，n表示该$('li');

})

19.关于get与post的区别

一般的我们都认为是一下的三个区别

1. GET使用URL或Cookie传参。而POST将数据放在BODY中。（没有规定get请求一定要放在url中，post一定要放在body中）

2. GET的URL会有长度上的限制，则POST的数据则可以非常大。（URL过长会对服务器产生负担，是对http请求的限制）

3. POST比GET安全，因为数据在地址栏上不可见。（不正确）

但以上的理解这只是HTML标准对HTTP协议的用法的约定。不能当成GET和POST的区别。

他们只有一点根本区别，简单点儿说，一个用于获取数据，一个用于修改数据。

参考博客：http://www.cnblogs.com/nankezhishi/archive/2012/06/09/getandpost.html

20.事件委托如何获取父级ID

在事件委托里，点击goSomewhere里的代码获取target.id会得到div1或div2，如何获得goSomewhere，

使用css：

#goSomewhere > *{
　　pointer-events: none;
}

元素永远不会成为鼠标事件的target

21.关于vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <title></title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        background:green; 
        color:white; 
        padding-left:20px;
        height: 100px;
        padding-top: 20px;

    }
    .dot {
        display:inline-block; 
        width:80px; 
        height:30px; 
        vertical-align: middle;
        line-height: 30px;
        background-color: red;
    }
    </style>
</head>
<body>
    <div class="box">
        <span class="dot">伊的文字</span>
        我是一段卡哇伊的文字.
    </div>
</body>
</html>
<!-- http://www.w3school.com.cn/tiy/t.asp?f=csse_vertical-align -->

View Code