基础问题整理

!!

utf8_unicode_ci和utf8_general_ci

计算运行时间（性能）

width: 100%的应用

nth-child和nth-of-type的区别

document.addEventListener

offsettop的问题

在手机上测试网页遇到的问题

什么是Unicode,什么是UTF-8

手机屏幕分辨率和手机浏览器分辨率

!!

类型转换将对应的类型转换为boolean型

!!b指的是将b转换为boolean值去两次非是因为将b转换位boolean值后取了一次非，所以得到的值正好相反，再取一次反回来

utf8_unicode_ci和utf8_general_ci

具体的说：

1、对于一种语言仅当使用utf8_unicode_ci排序做的不好时，才执行与具体语言相关的utf8字符集校对规则。例如，对于德语和法语，utf8_unicode_ci工作的很好，因此不再需要为这两种语言创建特殊的utf8校对规则。

2、utf8_general_ci也适用与德语和法语，除了‘?’等于‘s’，而不是‘ss’之外。如果你的应用能够接受这些，那么应该使用 utf8_general_ci，因为它速度快。否则，使用utf8_unicode_ci，因为它比较准确。

用一句话概况上面这段话：utf8_unicode_ci比较准确，utf8_general_ci速度比较快。通常情况下 utf8_general_ci的准确性就够我们用的了，在我看过很多程序源码后，发现它们大多数也用的是utf8_general_ci，所以新建数据 库时一般选用utf8_general_ci就可以了

计算运行时间（性能）

console.time(arg1) & console.timeEnd(arg1)

<script type="text/javascript">

$(function(){

console.time('high');//测试js执行时间开始位置，参数作为前缀输出，console.time()同console.timeEnd()配套使用，参数必须一致！

var $page = $('#page'),option;

for(var i=1;i<1000;i++){

option+="<option value="+i+">第 "+i+" 页</option>";

}

//dom 操作一次

$page.append(option);

console.timeEnd('high');//测试js执行时间结束位置

******************

console.time('low');

var $page = $('#page')

for(var i=1;i<1000;i++){

//dom 操作999次

$page.append("<option value="+i+">第 "+i+" 页</option>");

}

console.timeEnd('low');

});

</script>

总结:

1. 有开有关

2. 参数一致

3.ie不支持,要使用Date计算

参考资料：如何获取js执行时间

width: 100%的应用

使行属性标签既可以设置宽高，又可居中

===============================

span{

width:85px;

height:24px;

display: inline-block;

}

//父级

#main span{

Width: 100%;

text-align: center;

}

nth-child和nth-of-type的区别

els：nth-child（n）

1.往上找父级

2.父级下的第n个元素若为els======选中

els:nth-of-type（n）

往上找父级，父级下的第n个els元素=======被选中

<div>

<ul class="demo">

<p>zero</p>

<li>one</li>

<li>two</li>

</ul>

</div>

上面这个例子，.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li:nth-of-type(2)则选择的是<li>two</li>节点。

document.addEventListener

1.冒泡和下沉

document.addEventListener("事件名称", 函数, false);

addEventListener里最后一个参数决定该事件的响应顺序；

-----如果为true事件执行顺序为

addEventListener -> 标签的onclick事件 -> document.onclick　 （下沉）

-----如果为false

标签的onclick事件 -> document.onclick -> addEventListener （冒泡）

理解为其他代码的调用入口

2.解决让一个js事件执行多个函数

document.onclick=function (){

alert('a');

}

document.onclick=function (){

alert('b');

}

--->只输出b

******************

document.addEventListener("click", function (){

alert('a');

}, false);

document.addEventListener("click",function (){

alert('b');

},false);

--->输出a,b

3.总结

true 的触发顺序总是在 false 之前；

如果多个均为 true，则外层的触发先于内层；

如果多个均为 false，则内层的触发先于外层。

响应顺序：

白块：2

绿块：1

黄块：3