专栏首页HTML5学堂2016.07 第3周 群问题分享

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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一步步实现静态页面布局

    本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

    HTML5学堂
  • 原生JS | 作用域

    HTML5学堂-码匠:作用域那些必须掌握的知识,还有大量作用域案例练习与分析,快快进来! 作用域的基础知识 在JavaScript中,每个变量会有一个有效区域(...

    HTML5学堂
  • 让剁手党洞察物体细节,“放大镜”当之无愧

    经常浏览淘宝、京东等一些商城网站,都会看到各种各样的页面交互效果,放大镜交互效果在商城网站中算是比较常见的。作为程序员的我们也会经常去考虑放大镜效果的实现方式,...

    HTML5学堂
  • 基于Caffe 框架的AI图像识别自动化

    自动化实现过程,UI框架的自动化往往不能满足所有场景的需求,比如:动态效果图片内容一致性检查;在全民AI的浪潮中,基于Caffe框架的AI图像识别结合QT4A...

    腾讯移动品质中心TMQ
  • aceEditor实现类似于codepen的效果

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    lzugis
  • 淘宝高并发订单的数据库方案

    周末参加了@淘宝技术嘉年华 主办的技术沙龙, 感觉收获颇丰,非常感谢淘宝人的分享。这里我把淘宝下单高并发解决方案的个人理解分享一下。我不是淘宝技术人员,本文只是...

    后端技术探索
  • 判别模型、生成模型与朴素贝叶斯方法

    1、判别模型与生成模型 回归模型其实是判别模型,也就是根据特征值来求结果的概率。形式化表示为 ? ,在参数 ? 确定的情况下,求解条件概率 ? 。通俗的解...

    机器学习AI算法工程
  • AI学习者必备 | 圣母大学公开统计计算课程讲义(视频+PPT+作业)

    翻译 | AI科技大本营(rgznai100) 参与 | 刘畅 近日,圣母大学(University of Notre Dame)公开了一门统计学课程资源,包括...

    AI科技大本营
  • 2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

    windseek
  • 杨老师课堂之JavaScript定时器案例的红绿灯设计

    杨校

扫码关注云+社区

领取腾讯云代金券