一、HTML5新增属性
语义化标签:article、footer、header、nav、section、aside
article | <article> 标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。 |
header | <header>标签用来表示介绍性的内容,即定义了文档中的页眉 |
footer | HTML5 <footer>标签用于定义文档的页脚部分。 |
nav | <nav>标签用于表示HTML页面中的导航,可以是页与页之间导航,也可以是页内的段与段之间导航。 |
section | <section>标签对文档中的内容进行分块或分段。 |
aside | aside 跟 article 是一起使用;是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域;(最常见的京东的右侧的工具栏) |
表单控件及属性:datalist、keygen、details、output、calendar、date、time、email、url、search、range
datalist | <datalist> 标签需要与 <input> 标签配合使用,用来表示可选的列表。 |
keygen | 规定用于表单的密钥对生成器字段 |
output | <output> 标签定义不同类型的输出,比如脚本的输出。 |
details | <details> 标签用于创建一个可展开折叠的元件,用户可以从中检索其他附加的信息。 |
output | <output> 元素用于不同类型的输出,比如计算或脚本输出 |
calendar | 日历控件(移动端适用 ) |
date | 日期 |
time | 定义日期或时间 |
邮箱验证 | |
search | 搜索圆圈提示 |
range | 输入范围 |
placeholder、require、step、progress(进度条)等
多媒体元素:
audio | 定义音频内容 |
video | 定义视频(video 或者 movie) |
source | 定义多媒体资源 <video> 和 <audio> |
embed | 定义嵌入的内容,比如插件。 |
track | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新增标签
fieldset | HTML5 <fieldset>标签用于对表单中的相关元素进行分组 |
legend | <legend>元素是<fieldset>元素的第一个子元素,定义了<fieldset>元素的标题。 |
optgroup | <optgroup>标签用来定义一个选项组,即,可以将文档中的选项进行组合。 |
map | <map>标签用来表示图像映射,也就是指带有可点击区域的图像映射: |
address | <address>标签,你可以得到某个文档中所属作者或者所有者的相关的联系信息 |
传统表单常用事件:click、change、foucs、blur、keydown、keyup
移动端没有keydown和keyup事件,移动端使用的键盘是虚拟的。移动端多了一个事件类型:input事件。oninput:随操作过程而连续触发。
二、 css3新增属性
border-radius 属性用于创建圆角
box-shadow 用于向方框添加阴影
border-image 属性,可以使用图片来创建边框
新的背景属性
background-clip | 规定背景的绘制区域。 | |
background-origin | 规定背景图片的定位区域。 | 背景图片可以放置于 content-box、padding-box 或 border-box 区域。 |
background-size | 规定背景图片的尺寸。 | 能够以像素或百分比规定尺寸 |
text-shadow 可向文本应用阴影
word-wrap 属性允许文本强制文本进行换行
hanging-punctuation | 规定标点字符是否位于线框之外。 |
punctuation-trim | 规定是否对标点字符进行修剪。 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 |
text-outline | 规定文本的轮廓。 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 |
text-shadow | 向文本添加阴影。 |
text-wrap | 规定文本的换行规则。 |
word-break | 规定非中日韩文本的换行规则。 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
@font-face : 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件
转换属性
transform | 向元素应用 2D 或 3D 转换。 |
transform-origin | 允许改变被转换元素的位置。 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
perspective | 规定 3D 元素的透视效果。 |
perspective-origin | 规定 3D 元素的底部位置。 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 |
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
动画属性
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |
多列属性
column-count | 规定元素应该被分隔的列数。 |
column-fill | 规定如何填充列。 |
column-gap | 规定列之间的间隔。 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 |
column-rule-color | 规定列之间规则的颜色。 |
column-rule-style | 规定列之间规则的样式。 |
column-rule-width | 规定列之间规则的宽度。 |
column-span | 规定元素应该横跨的列数。 |
column-width | 规定列的宽度。 |
columns | 规定设置 column-width 和 column-count 的简写属性。 |
repaint重绘:元素的外观改变了,但是没有改变布局
reflow重排:会影响到dom的结构渲染,同时会触发repaint。
visibility:hidden --->产生重绘
display:none ---->产生重排
三、 js进阶
1、JS继承的7种类型
原型继承
function object(O){
function F(){};
F.prototype = o;
return new F();
}
从本质上讲,object()对传入的对象进行了一次浅复制。特点:把父类私有的、公有的都继承到了子类原型上,变为子类公有的。
call继承
function A(){}
A.call(this);
call 执行A方法,并把A中的this 改变。特点:把父类私有的属性和方法,克隆一份给子类私有的属性。
冒充对象继承
function B(){
var temp=new A;
for (var key in temp){
this[key] = temp[key];
}
}
B.prototype.constructor=B;
var n = new B;
把A的一个实例遍历,把父类私有的和公有的(此处指自己在原型上扩展的方法,内置属性不可遍历)克隆一份给子类私有的。
混合模式继承(原型继承和call继承)
特点:call继承父类的私有的,原型继承继承公有的私有的,相当于私有的拿了两次。
寄生式继承
创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回对象。
function createAnother(o){
var c=object(o);
c.sayHi(){};
return c;
}
var another = createAnother(Person);
another.sayHi();//可执行
新对象another不仅有Person的所有属性和方法,还有自己的sayHi()方法。
寄生式组合继承 (object.create()和call继承)
B.prototype=Object.create(A.prototype);
把A的原型给B的原型
中间类继承法
arguments是类数组,不能用数组的方法
arguments.__proto__=Array.prototype;
这样arguments就可以使用数组的原型上面的方法。只是存在兼容性问题。
2 JS中异步编程的四种情况
(1)定时器(任务队列池)
(2)所有的事件绑定
(3)Ajax读取数据
(4)回调函数(bind)
3、forEach()和map() call() 和bind()
forEach():遍历数组中的每一项,(ie6\7\8不兼容),此方法没有返回值,理论上对原数组不产生影响,但可以通过数组索引来修改原来的数组。
map():遍历数组中的每一项,有返回值,对原数组不产生影响(相当于把原数组克隆一份,把克隆的这一份的数组中对应项改变了)
上述两个方法都有一个传入参数,是一个匿名回调函数。forEach()方法中的this是调用此方法的数组本身。匿名回调函数中的this是默认是window。也都支持第二个参数值,指定匿名回调函数中的This。
call(obj) | 给forEach()赋值的时候,首先把匿名函数执行,并把匿名函数中的this变为obj,最后把匿名函数执行的返回结果返回,为undefined |
bind(obj) | ie6\7\8不兼容,只是预先处理,把函数内部this 变为obj ,不立即执行 |
4、数据类型检测
(1)typeof 检测数据类型,返回的是一个字符串。局限性:typeof null = object,不能具体细分是数组还是正则,都返回对象object.
(2)instanceof 检测某一个实例是否属于某个类
对于字面量方式创建出来的结果是基本的数据类型,不是严谨的实例,只要是在当前实例的原型链上,我们检测出来结果都是true,
(3)constructor 构造函数,使用此方法检测不到object。局限性:可以把类的原型重写,重写时可能覆盖constructor
(4)object.prototype.tostring().call(*)
首先获取object原型上的tostring()方法,并且让方法里面的this指向重新定义的。
5、js延迟加载
一般有以下几种方式:
6.浅拷贝,深拷贝
浅拷贝,obj1和obj2共享同一块内存地址,改变了其中一个,都会影响拷贝对象和原对象都发生改变。
深拷贝,开辟一块新的内存地址,将原对象的各个属性复制进去,这样拷贝对象和原对象的操作互不影响
6.1 浅拷贝的实现
1)循环遍历对象属性
2)objec.assign()用于对象的合并,并将原对象的所有可枚举属性复制到目标对象
6.2 深拷贝的实现
1)Array 的slice()和concat()表现像深拷贝,实际是浅拷贝。
对于数组是一维的,数组元素只有数字和字符串,可以实现深拷贝;但是如果数组元素是引用类型的,则没法实现深拷贝。
2)递归实现深拷贝
3)Json.parse(Json.stringify(source))
parse用于从一个字符串中解析出json对象
stringify()用于从一个对象解析出字符串