【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;
【离线储存】
更新中……