html5各种新增知识点记录

【html5全局属性:】

1/contentEditable( 是否允许在线编辑内容,true和false )

2/designMode( 整个页面是否允许被编辑,on和off )

3/draggable( 元素是否可以拖放,true和false )

4/hidden( 元素状态是否可见,true和false )

5/spellcheck( 对用户输入的内容进行拼写和语法检查,true和false )

6/tabindex( 是否允许用tab键来获得上下焦点,true和false )

【功能性标签:】

1/datalist标签,配合表单使用,list属性指向id,触发下拉值,和option配合使用

2/details标签,配合summary标签使用,summary代表标题,内容可自行添加标签,可收缩

3/dialog标签,里面配合dt,dd使用,表示对话框

4/keygen标签,代表加密强度

5/progress标签,进度条,含value和max属性,分别表示当前的值和最大值

【表单新控件:( type类型 )】

color/date/datetime/datetime-local/week/email/url/number/range/tel/search/month/time

【表单新增属性:】

1/placeholder( 这个不用多说,都用坏了 )

2/autocomplete( 设置记忆列表提示,on开启,off关闭 )

3/required( 字段必填项 )

4/pattern( 正则校验格式 )

5/list( 指向标签datalist的id,一串下拉的东西option )

6/autofocus( 自动获得焦点 )

7/multiple( 选择多项内容或多文件 )

8/formaction( submit提交的指定url地址 )

9/step\max\min( range\number\date控件专有,表示步长,最大和最小值 )

10/form( 可脱离form标签,表单元素只需指定form标签的id即可 )

【新增的js选择器】

1/querySelector  ( 选择单一元素,包含标签、id、类和属性 )

2/querySelectorAll  ( 选择一组元素,包含标签、类和属性 )

3/getElementsByClassName ( 选择一组元素,只专门用于类选择器,不用带. )

classList属性:表示所有类名的列表

classList属性下的方法有add(),remove(),toggle(),增加/删除/切换 类名

【JSON新方法:】

1/JSON.parse()  //字符串转json格式,比eval()性能高

2/JSON.stringify()  //json格式转字符串

【自定义属性:】

1/data-为前缀,定义属性名称

2/dataset检测自定义属性值

【JS加载:】

1/defer:延迟加载

2/async:异步加载

【历史状态管理( 浏览器和前进后退功能 ):】

1/onhashchange事件

2/window.location.hash

3/pushState

4/onpopstate事件( 放在服务器上运行 )

【元素拖放:】

draggable=true( 设置拖放条件 )

【对象拖拽事件】

1/ondragstart( 拖拽开始事件 )

2/ondragend( 拖拽结束事件 )

3/ondrag( 拖拽前后连续触发 )

【目标元素事件】

1/ondragenter

2/ondragleave

3/ondragover( 目标前后触发,一定要阻止默认事件,否则ondrop起不了作用 )

4/ondrop( 释放鼠标时能拖进目标元素里所触发的效果 )

【火狐下兼容设置】

event.dataTransfer.setData('name','value');  //在ondrgastart事件下加

event.dataTransfer.getData('name');    //在ondrop事件下加

【dataTransfer对象】

1/effectAllowed( 设置光标样式,有copy,copyLink,link,copyMove,move,all,uninitialized,linkMove等 )

2/setDragImage( 3个参数,指定元素,X坐标,Y坐标,默认坐标是左上角 )

3/files:event.dataTransfer.files.length( 文件个数 );

event.dataTransfer.files.type( 文件类型 );

【fileReader对象:】

1/readAsDataURL( result返回的是文件的详情信息 )

2/onload读取成功时触发的事件

【音频与视频:】 

【媒体元素】

1/controls : 显示隐藏默认界面

2/autoplay : 是否自动播放

3/loop : 是否循环播放

4/currentTime : 开始到现在的播放时间

5/duration : 媒体总时间

6/volume : 音量( 0~1 )

7/muted : 是否静音

8/autobuffer : 是否缓冲加载,autoplay时忽略此属性

9/videoWidth : 视频实际宽度(可读不可设)

10/videoHeight : 视频实际高度(可读不可设)

【媒体方法】

1/play()播放

2/pause()暂停

3/load()加载

4/RequestFullScreen() : 进入全屏( chrome->webkitRequestFullScreen(); firefox->mozRequestFullScreen() )

5/exitFullscreen() : 退出全屏( chrome->webkitCancelFullScreen(); firefox->mozCancelFullScreen() )

6/poster : 播放前图片画面预览,指定图片格式

【媒体事件】

loadstart/progress/suspend/empited/stalled/play/pause/waiting/playing/canplay/seeking/seeked/ended/ratechange/durationchange/volumechange

【媒体事件检测方式】

事件监听:addEventListener(event,fn,false);

【地理位置】

单次定位请求:navigator.geolocation.getCurrentPosition( localtionSucc,localtionFail,json );

多次定位请求:navigator.geolocation.watchPosition( localtionSucc,localtionFail,json );类似setInterval

参数注明:1、请求成功时获取的一系列数据;2、请求失败时返回对应的编号;3、json形式的配置说明;

成功请求时返回的东西:

1/经度:  coords.longitude;

2/纬度:  coords.latitude;

3/准确度:  coords.accuracy;

4/海拔:  coords.altitude;

5/海拔准确度:  coords.altitudeAcuracy;

6/行进方向:  coords.heading;

7/地面速度: coords.speed;

8/时间戳: new Date( position.timestamp );

失败时返回的编号:

code( 0:不包括其他错误编号中的错误;1:用户拒绝浏览器获取位置信息;2:尝试获取用户信息,但失败了;3:设置了timeout值,获取位置超时了 )

json数据设置项:

enableHighAcuracy : 更精确的查找,默认false;

timeout : 获取位置允许最长时间,默认infinity;

maximumAge:  位置可以缓存的最大时间,默认0;

frequency: 请求频率

清除定位请求:navigator.geolocation.clearWatch(timer); 类似clearInterval;

应用:百度地图API

【本地储存】

cookie:临时性储存;  sessionStorage: 临时性储存;  localStorage: 永久性储存;

Storage特点:

1/存储容量(5M);

2/客户端完成,不会请求服务器处理;

3/sessionStorage数据是不共享、 localStorage共享;

设置本地储存:window.localStorage.setItem( name,value );

获取本地储存:window.localStorage.getItem( name );

删除本地储存:window.localStorage.removeItem( name );

删除全部数据:window.localStorage.clear();

存储事件:

当数据有修改或删除的情况下,就会触发storage事件,在对数据进行改变的窗口对象上是不会触发的(当前页面);

Key:修改或删除的key值,如果调用clear(),key为null;

newValue :  新设置的值,如果调用removeStorage(),key为null;

oldValue: 调用改变前的value值;

storageArea : 当前的storage对象;

url:  触发该脚本变化的文档的url;

【离线储存】

更新中……

你可能感兴趣的:(html5各种新增知识点记录)