x-webkit-speech 语音插件
placeholder="请输入查询地址"
Autocomplete jq有这个插件
autocomplete="off" 不留痕迹
location的属性：hash、host、hostname、href、pathname、port、protocol、search
reload()将服务端数据重新载入
replace()将当前页面替换成另一个页面window.location.replace("http://www.baidu.com");
html5 历史管理onhashchange: 当window.location.hash值有变化的时候，就会触发
history: pushState( 数据, 标题(未实现) , 地址(可选) );
popstate事件: 读取诗句 event.state
<input type="text" autocapitalize="off" autocorrect="off" /> 自动修正大小写
新的特殊内容元素
如:article,footer,header,nav,section
新的表单控件
calendar,date,time,email,url,search
|
应用缓存
html5Doctor
要将描述文件与页面关联起来,manifest要指定这个文件的路径
<html manifest=“/offline.manifest”>
这个文件的MIME类型必须是text/cache-manifest
applicationCache对象
status状态码
0无缓存,没有与页面相关的应用缓存
1闲置,应用缓存为得到更新
2检查中,正在下载描述文件并检查更新
3下载中,正在下载描述文件中指定的资源
4更新完成,应用缓存已经更新资源,资源下载完毕,可以用过swapCache()来使用
5废弃,描述文件不存在,无法访问应用缓存
事件
checking
error
nouodate
downloading
progress
updateready
cached
applicationCache.update()一经调用,应用缓存就会去检查描述文件是否更新,
出发checking事件,如果触发cached事件,说明应用缓存准备就绪,不会触发其他事件了,
如果触发updateready事件,说明新版本的应用缓存已经可用,此时需要调用swapCache来启用新应用缓存
web计时
window.performance
performance导航相关属性
performance.navigation.redirectCount页面加载前重定向次数
performance.navigation.type
0页面第一次加载
1页面重载过
2页面通过后退和前进按钮打开的
performance.timing时间戳属性
performance.timing.responseEnd
全面了解页面在被加载到浏览器的过程中经历了哪些阶段,哪些阶段影响性能瓶颈,web Timing API
Jquery Mobile事件
pageinit ＝dom加载完成后出发
tap ＝触摸
taphold =长按
swipe ＝滑动
swipeleft =向左滑
swiperight =向右滑
scrollstart =开始滑动
scrollstop =停止滑动
JS判断设备
function deviceType(){
var ua = navigator.userAgent
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++) {
if(ua.indexOf(agent[i])>0){
break
}
}
}
deviceType()
window.addEventListener('resize', function() {
deviceType()
})
|
JS判断微信浏览器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i)=='micromessenger') {
return true
} else {
return false
}
}
|
设备高度: device-width, device-height
渲染窗口宽高: width, height
设备手持方向: orientaion
设备分辨率: resolution
页面宽小于640px调用此样式
<link rel="stylesheet" href="?.css" type="text/css" media="only screen and (max-width:640px)">
页面宽大于680px调用此样式
@media screen and (min-width:680px){...}
|
html5拖拽
draggable="true" 可拖拽
ondragstart - 开始拖动 event.dataTransfer.setData("Text", event.target.id); 拖拽id
ondrag - 正在拖动
ondragend - 完成拖动
接收对象
ondragenter - 进入容器范围
ondragover - 容器范围内拖动
ondragleave - 对象离开容器范围
ondrop - 拖动过程中，释放拖拽对象
xhr.upload 这是html5新增的api,储存了上传过程中的信息
xhr.upload.onprogress = function (ev) {
var percent = 0;
if(ev.lengthComputable) {
percent = 100 * ev.loaded/ev.total;
//document.getElementById('progress').innerHTML = percent;
document.getElementById('bar').style.width = percent + '%';
}
}
|
##移动端电话短信邮件
// 一、打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
// 二、发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
// 三、写邮件
//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头
// 1.普通邮件
<a href="mailto:863139978@qq.com">点击我发邮件</a>
// 2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">点击我发邮件</a>
// 3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">点击我发邮件</a>
// 4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址
<a href="mailto:863139978@qq.com;384900096@qq.com">点击我发邮件</a>
// 5.包含主题，用?subject=
<a href="mailto:863139978@qq.com?subject=邮件主题">点击我发邮件</a>
// 6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行
<a href="mailto:863139978@qq.com?body=邮件主题内容%0A腾讯诚信%0A期待您的到来">点击我发邮件</a>
// 7.内容包含链接，含http(s)://等的文本自动转化为链接
<a href="mailto:863139978@qq.com?body=http://www.baidu.com">点击我发邮件</a>
// 8.内容包含图片（PC不支持）
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">点击我发邮件</a>
// 9.完整示例
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[邮件主题]&body=腾讯诚邀您参与%0A%0Ahttp://www.baidu.com%0A%0A<img src='images/1.jpg' />">点击我发邮件</a>
|
html5 audio和video
// 音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
// 音频，写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>
// JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function() {
music.play()
})
// 微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play()
}, false)
// 小结
// 1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常
// 2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间
|
播放视频不全屏
<!--
1.ios7+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true"
3.播放视频不全屏
webkit-playsinline="true"
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
|
localStorage
https://github.com/marcuswestin/store.js
https://github.com/brianleroux/lawnchair
https://github.com/d0ugal-archive/locache
https://github.com/pamelafox/lscache
// 上传
https://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/