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仅仅是为了在本地“存储”数据而生。
浏览器的支持除了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
- [编程经验] 链家23个全国主要城市的现房数据分析
- [编程经验] Python中的modlue和packages的区别
- Day5上午解题报告
- [编程经验] Pandas中比较好用的几个方法
- [编程经验] Elasticsearch 初识
- 2017.10.26水题大作战部分题解
- 2017.10.27涩会题大乱斗部分题解
- 【 关关的刷题日记50】 Leetcode 345. Reverse Vowels of a String
- Day1上午解题报告
- 【 关关的刷题日记51】 Leetcode 67. Add Binary
- 【 关关的刷题日记53】 Leetcode 100. Same Tree
- Day1下午解题报告
- 【关关的刷题日记54】Leetcode 226. Invert Binary Tree
- Day2上午解题报告
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring Data REST不完全指南(二)
- Cocos2d-js中的简易MVC框架(三)中介者Mediator
- Cocos2d-js中的简易MVC框架(二)数据模型Model
- Python 还能实现图片去雾?FFA 去雾算法、暗通道去雾算法用起来! | 附代码
- 探秘计算机视觉中的注意力机制
- 采用 Vue 编写的功能强大的 Swagger-ui 页面
- Spring Data REST不完全指南(三)
- Spark Kafka 基于Direct自己管理offset
- 使用Reactor响应式编程
- 多场景下MySQL临时表的作用
- Flink 自定义触发器实现带超时时间的 CountWindow
- 聊聊Spring Boot Actuator
- [译]按功能(特性)分包
- Spring Boot Admin简介及实践
- Spring Boot Admin实现服务健康预警