2016.07 第3周 群问题分享
HTML+CSS
怎么实现输入框高度自适应
2016.07.18~2016.07.22
核心内容
contenteditable
问题解析
因为textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。
而用div来模拟时，首先遇到的问题是：div怎么实现输入功能？
contenteditable 属性规定是否可编辑元素的内容。
可能我们还是第一次见到这个属性contenteditable，如一个普通的元素上加上contenteditable="true"就实现可编辑状态，就出现光标了。如
<div contenteditable="true"></div>效果：
contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。
HTML代码
<div class="wrap" contenteditable="true"></div>CSS代码
.wrap {
width: 400px;
min-height: 20px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
border: 1px solid #a0b3d6;
line-height: 24px;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
outline: 0;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}CSS代码中，因为IE6不支持min/max，所以做了hack，其他的也好理解。
效果：
JavaScript
focus/blur与focusin/focusout的区别与联系
2016.07.18~2016.07.22
核心内容
focus/blur与focusin/focusout
问题解析
- focus/blur不冒泡，focusin/focusout冒泡
- focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件委托，可考虑在FireFox下使用事件流elem.addEventListener(‘focus’, handler, true)
- 可获得焦点的元素： window 链接被点击或键盘操作 表单空间被点击或键盘操作 设置tabindex属性的元素被点击或键盘操作
===运算符判断相等的流程是怎样的
2016.07.18~2016.07.22
核心内容
操作符
问题解析
1、如果两个值不是相同类型，它们不相等
2、如果两个值都是null或者都是undefined，它们相等
3、如果两个值都是布尔类型true或者都是false，它们相等
4、如果其中有一个是NaN，它们不相等
5、如果都是数值型并且数值相等，他们相等， -0等于0
6、如果它们是字符串并且在相同位置包含相同的字符，它们相等；如果在长度或者内容上不等，它们不相等；两个字符串显示结果相同但是编码不同==和===都认为他们不相等
7、如果它们指向相同对象、数组、函数，它们相等；如果指向不同对象，他们不相等
Web storage和cookie的区别
2016.07.18~2016.07.22
核心内容
Web storage和cookie
问题解析
Web storage的概念和cookie相似，storage是为了更大容量存储设计的。cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie等方法。
但是Cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web storage仅仅是为了在本地“存储”数据而生。
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持Web storage(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是JavaScript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持Web storage。cookie的兼容性小编就不说，因为cookie很早就出现了。
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
JS数组去重
2016.07.18~2016.07.22
核心内容
indexOf()、push()
问题解析
Array.prototype.unique1 = function () {
var n = []; //一个新的临时数组
for (var i = 0; i < this.length; i++) { //遍历当前数组
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function() {
var n = {},r=[]; //n为hash表，r为临时数组
for(var i = 0; i < this.length; i++) { //遍历当前数组
if (!n[this[i]]) //如果hash表中没有当前项
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
Array.prototype.unique3 = function() {
var n = [this[0]]; //结果数组
for(var i = 1; i < this.length; i++) { //从第二项开始遍历
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，
//那么表示第i项是重复的，忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}HTML5学堂小编 - 陈林&堡堡 耗时5h