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

问题解析

  1. focus/blur不冒泡,focusin/focusout冒泡
  2. focus/blur兼容性好,focusin/focusout在除FireFox外的浏览器下都保持良好兼容性,如需使用事件委托,可考虑在FireFox下使用事件流elem.addEventListener(‘focus’, handler, true)
  3. 可获得焦点的元素: 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仅仅是为了在本地“存储”数据而生。

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JetpropelledSnake

Django学习笔记之Django模版系统

1012
来自专栏老马寒门IT

Node入门教程(13)第十一章:mocha单元测试+should断言库+istanbul覆盖率测试+art-template

声明: 以下为老马的全栈视频教程的笔记,如果需要了解详情,请直接配合视频学习。视频全部免费,视频地址:https://ke.qq.com/course/2945...

1070
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

2776
来自专栏互联网杂技

js事件

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body...

33211
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(七)事件冒泡

事件冒泡:当有多个元素嵌套,并且这些元素绑定了相同的事件,这时候如果里面的元素事件触发了,那么外面的事件会自动触发。

603
来自专栏菜鸟前端工程师

JavaScript学习笔记001-变量0获取和操作标签

772
来自专栏jojo的技术小屋

原 荐 自己写JSON编辑器

作者:汪娇娇 时间:2018年1月15日 下一篇:自己写代码对比工具 时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。...

4537
来自专栏AhDung

C#遐想/瞎想

782
来自专栏腾讯IVWEB团队的专栏

ECMAScript 2015 (ES6) in Node.js(译)

Node.js是建立在V8引擎的基础上。通过保持对该引擎最新发布版的更新,我们可以确保能够将JavaScript ECMA-262 specification中...

1230
来自专栏MasiMaro 的技术博文

使用MSHTML解析HTML页面

最近在写一个爬虫项目,本来打算用C/C++来实现,在网上查找有关资料的时候发现了微软的这个MSHTML库,最后发现在解析动态页面的时候它的表现实在是太差:在项目...

443

扫描关注云+社区