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 条评论
登录 后参与评论

相关文章

来自专栏大内老A

ASP.NET Core的路由[2]:路由系统的核心对象——Router

ASP.NET Core应用中的路由机制实现在RouterMiddleware中间件中,它的目的在于通过路由解析为请求找到一个匹配的处理器,同时将请求携带的数据...

4123
来自专栏性能与架构

jquery官方性能优化建议

jquery的官网上给出了6点性能方面的建议: (1)在循环外面做append操作 DOM操作是有成本的,一次性append要比循环中每次都append要好很多...

3276
来自专栏用户2442861的专栏

STL map, hash_map , unordered_map区别、对比

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/haluoluo211/article/d...

974
来自专栏cnblogs

Javascript的内存泄漏分析

     作为程序员(更高大尚的称谓:研软件研发)的我们,无论是用Javascript,还是.net, java语言,肯定都遇到过内存泄漏的问题。只不过他们都有...

822
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

654
来自专栏点滴积累

Scala 中方法扩展实践

这个名字不知道取得是否合适,简单来说要干的事情就是给某个类型添加一些扩展方法,此场景在各种语言中都会用到,比如 C# 语言,如果我们使用一个别人写好的类库,而又...

601
来自专栏编程

Java反射札记

Java反射相关内容,在阅读一些开源框架和自己动手封装逻辑时常要用到,以前陆陆续续地看到过一些文章,但是最终留下的是破碎的代码片段和类名,所以这次重新敲一遍反射...

18210
来自专栏HTML5学堂

HTML5-类库系列 类名的各种操作

HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:类名的各种操作。在这里,HTML5学堂提醒各位,不要...

3305
来自专栏大内老A

一句代码实现批量数据绑定[下篇]

《上篇》主要介绍如何通过DataBinder实现批量的数据绑定,以及如何解决常见的数据绑定问题,比如数据的格式化。接下来,我们主要来谈谈DataBinder的设...

1875
来自专栏H2Cloud

C++使用ffpython嵌入和扩展python

摘要: 在服务器编程中,经常会用到python脚本技术。Python是最流行的脚本之一,并且python拥有定义良好的C API接口,同时又有丰富的文档,与C+...

3244

扫码关注云+社区