HTML5 js api 教程

(一) 新的选择器

  • 根据类名匹配元素(DOM API),返回匹配到的元素数组,无匹配则返回空的数组。javascriptvar els = document.getElementsByClassName(‘section’);

    支持浏览器:IE9, FireFox 3.0+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

  • 根据css选择器匹配元素(Selectors API):querySelector 和 querySelectorAll。 querySelector返回匹配到的第一个元素,如果没有匹配则返回null
    javascript 

    var els = document.querySelector(“ul li:nth-child(odd)”);var els =document.querySelector(“table.test > tr > td”);

    querySelectorAll返回所有匹配到的元素数组,如果没有匹配则返回空的数组
    javascript

    var els = document.querySelectorAll(“ul li:nth-child(odd)”);var els =document.querySelectorAll(“table.test > tr > td”);

    支持浏览器:IE 8+, FireFox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+

选择器效率测试见:http://jsperf.com/queryselectorall2
Opera的Selectors API明显经过优化,其余浏览器的getElementById效率是最高的。
Selectors API遵循CSS选择器效率规则

(二) web本地存储

Web Storage就是放大版的cookie——提供了比cookie更大的本地存储,并且不会向服务器发出请求,并提供了一些API。总之本地存储能更专业地处理本地数据

可以像对象字面量那样使用Web Storage:
javascript

localStorage.fresh = “vfresh.org”;   //设置一个键值
var a = localStorage.fresh;   //获取键值
delete localStorage[  //删除键值

或者使用它的API:
javascript

//清空storage
localStorage.clear();

//设置一个键值
localStorage.setItem(“fresh”,“vfresh.org”);

//获取一个键值
localStorage.getItem(“fresh”);

//return “vfresh.org” //获取指定下标的键的名称(如同Array)
localStorage.key(0);

//return “fresh” //删除一个键值
localStorage.removeItem(“fresh”);

字面量方式比API更高效,也更方便,所以你懂的。
localStorage是永久性的保存,而sessionStorage在浏览器窗口关闭后就没有了(相当于Expire=0的cookie)。
支持浏览器:IE 8+, Firefox 3.0+, Safari 4.0+, Chrome 4.0+, Opera 10.5+

(三) 本地数据库

有了本地数据库,我们可以进行更复杂的本地数据处理。本地数据库使用的是SQLite这款轻型数据库。
操作数据库简单的两个步骤:1.创建并打开数据库;2.执行sql语句

  • 创建并打开数据库 javascriptvar db = openDatabase(‘mydb’, ’1.0′, ‘Test DB’, 2 * 1024 * 1024);

    上面的openDatabase我用了4个参数,依次为:

    • 数据库名称
    • 数据库版本号
    • 数据库说明
    • 数据库大小

    未使用的第五个参数是:

    • 创建数据库回调函数(在数据库创建后会执行回调函数,回调函数是可选的。)
  • 执行sql语句 javascriptvar db = openDatabase(‘mydb’, ’1.0′, ‘my first database’, 2 * 1024 * 1024);

db.transaction(function (tx) {
//创建table foo
tx.executeSql(‘CREATE TABLE IF NOT EXISTS foo (id unique, text)’);
//插入数据到foo
tx.executeSql(‘INSERT INTO foo (id, text) VALUES (1, “synergies”)’);
});

插入数据时还可以传递动态值:
javascript

tx.executeSql(‘INSERT INTO foo (id, text) VALUES (?, ?)’, [id, userValue);

(四) 离线应用

离线应用(Offline Web applications)将网页资源缓存到本地,可以减少对服务器的请求,并且可以在断线的情况下浏览网页。
使用离线应用需要两个步骤:

  • 建立缓存设定文件(.manifest)需要一个配置文件来设定哪些文件是需要缓存的:
    manifest 

    CACHE MANIFEST

#上面一行是必需的

#这是注释
#注释前面可以有空格
#但是必须是单独的一行

#空白的行也是会被忽略的

#下面列出来的文件是需要被缓存的
#或者你也可以在列这些文件之前用CACHE来标识
#需要注意的是一行一个文件
#也可以使用绝对路径或者URLs
images/sound-icon.png
images/background.png
http://img.example.com/cross.png
#下面列出的文件是需要在线加载的
#这些文件总是在线加载,除非断线了才会去尝试使用缓存的文件
NETWORK:
comm.cgi

#这是另一种设置需要缓存的文件方式
CACHE:
style/default.css

注意manifest文件的MIME-type必须是text/cache-manifest (需要服务器端设置)

  • 在网页中引入manifest文件html运行
    <html manifest=“offline.manifest”>…</html> 

    如此,经过上面两步,已经可以体验到离线应用的魅力了。
    但在测试中发现,各浏览器更新缓存的机制各异:chrome修改manifest就可以更新缓存了,但却无法加载manifest之外的资源;而firefox需要手动删除本地缓存数据。
    种种的这些兼容性问题,可以给NETWORK添加上通配符*来修正:
    manifest

    CACHE MANIFEST NETWORK:*

    具体的原因可能是在启用离线应用后浏览器不会加载manifest设定之外的资源;而且firefox等也把manifest文件给缓存了,导致无法获取最新的manifest资源列表
    现在来了解下离线应用的API:
    javascript

    /*当前文档的ApplicationCache对象*/

var cache = window.applicationCache;

/*
*当前worker的ApplicationCache对象*worker在本文第五节介绍
*/
var cache = self.applicationCache;

/*
*属性,返回当前离线应用的状态
* UNCACHED (数值0):未启用离线应用
* IDLE (数值1):已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
* CHECKING (数值2):当前更新缓存的状态为“检查中”
* DOWNLOADING (数值3):当前更新缓存的状态为“下载资源中”
* UPDATEREADY (数值4):当前更新缓存的状态为“更新完毕”
* OBSOLETE (数值5):已开启离线应用,但缓存资源都已标记为废弃
*/
cache.status
/*
*方法,下载资源到本地
*如果没有cache需要更新,则抛出 INVALID_STATE_ERR 异常
*/
cache.update();

/*
*方法,更新缓存到最新的资源
*如果没有新的资源,则抛出INVALID_STATE_ERR异常
*并不会使本次加载的页面立即重新加载资源,仅有在执行该方法后刷新页面才能看到最新的资源。
*/
cache.swapCache();

事件处理器:

事件名称接口执行时机下一步将执行
checkingEvent检查是否需要更新,或者在第一次下载manifest文件时。 最先执行的事件noupdate, downloading, obsolete, error
noupdateEventmanifest文件未修改,不需要更新Last event in sequence.
downloadingEvent需要更新缓存,或者第一次下载资源时progress, error, cached, updateready
progressProgressEvent下载资源中progress, error, cached, updateready
cachedEvent资源已下载完成,并且已完成缓存最后的事件
updatereadyEvent资源更新完毕,并且可以用swapCache()来启用新的缓存。最后的事件.
obsoleteEvent加载manifest文件时遇到401或404错误,所以缓存将被删除。最后的事件.
errorEvent加载manifest文件时遇到401或404错误,将中断缓存网页。最后的事件.
manifest文件无改动,但这个manifest文件无法下载。
读取资源时遇到致命的错误
正在更新时manifest被修改了客户端将会重新加载文件
支持浏览器:Firefox 3.0, Safari 4.0, Chrome 5.0, Opera 10.6

(五) 地理定位

地理定位(Geolocation)是一个可以获取到客户端经纬度等地理位置信息的API。
API本身是不知道客户端地理信息的,常见的地理位置信息来源有全球定位系统(GPS)和从网络信号中推断出的地理信息(如IP地址, RFID, WIFI, 蓝牙MAC地址, GSM/CDMA手机id,以及用户输入的信息 )

先来了解下Geolocation API:

javascript
//返回地理定位对象
var geo = navigator.geolocation;

/*
*方法,获取当前客户端地理位置
*有三个参数可以用
*successCallback:必需,函数,获取成功后的回调函数
*errorCallback:可选,函数,失败时的回调函数*options:可选,对象字面量,有三个值可设定:
*      enableHighAccuracy:是否启用高精度设备(高精度设备包含但不局限于前面所提到的 GPS 和 WIFI)
*      maximumAge:数值,如果将其定义为负数或者未定义,会重设为0
*      timeout:数值,请求获取地理信息时的超时时间,如果将其定义为负数会重设为0,如果未定义则不启用超时判断
*/
geo.getCurrentPosition(successCallback,errorCallback,options);

/*
*方法,持续监控当前客户端地理位置(实时)
*返回该watchPosition的id*参数同getCurrentPosition
*/
var watchGEO = geo.watchPosition(successCallback,errorCallback,options);

/*方法,结束指定ID的watchPosition*/
geo.clearWatch(watchId);

使用地理定位API需要获得用户的许可,如果没有,会执行errorCallback;

watchPosition的successCallback只有在获取到的实时地理位置和之前有较大不同时才会执行;

getCurrentPosition和watchPosition的successCallback都有一个position参数,它包含有详细的地理信息如经纬度:

javascript
geo.getCurrentPosition(function (pos) {//成功获取时执行
var coord = pos.coords,        //坐标detail
accuracy = coord.accuracy,    //精准度,单位为米
latitude = coord.latitude,       //纬度
longitude = coord.longitude,  //经度
altitudeAccuracy = coord.altitudeAccuracy,        //高度精确度,单位为米
heading = coord.heading,        //移动的方向
speed = coord.speed;        //速度
showLocationInfo(coord,‘map’);        //显示坐标信息
showMap(coord,‘map’);        //显示google地图
},
function (error) {//获取失败时执行
alert(‘error:’+error.message+‘\n\n无法获得您的地理位置:’);
});

取到经纬度就可以利用各map服务商的app来显示地图,如google map

声明:本文采用 BY-NC-SA 协议进行授权,本文链接:HTML5 js api 教程

发表评论