HTML5新特性汇总

1. 新的选择器

通过 class 定位元素 (DOM API)
var el = document.getElementById(‘section1’);
el.focus();

var els = document.getElementsByTagName(‘div’);
els[0].focus();

var els = document.getElementsByClassName(‘section’);
els[0].focus();
通过类似 css 选择器的语法定位元素 (Selectors API)
var els = document.querySelectorAll(“ul li:nth-child(odd)”);
var els = document.querySelectorAll(“table.test > tr > td”);

2. 本地储存 - Web Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener(‘keyup’, function () {
window.localStorage[‘value’] = area.value;
window.localStorage[‘timestamp’] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage[‘value’];

3. 本地数据库 - Web SQL Database

var db = window.openDatabase(“Database Name”, “Database Version”);
db.transaction(function(tx) {
tx.executeSql(“SELECT * FROM test”, [], successCallback, errorCallback);
});

4.文件缓存 - Application Cache API

manifest=”cache-manifest”>
window.applicationCache.addEventListener(‘checking’, updateCacheStatus, false);
CACHE MANIFEST

5.让程序在后台运行 - Web Workers

main.js:
var worker = new Worker(‘extra_work.js’);
worker.onmessage = function (event) { alert(event.data); };

extra_work.js:
// do some work; when done post message.
postMessage(some_data);

6.双向信息传输 - Web Sockets

var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

7.桌面提醒 - Notifications

if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}

8.拖放操作 - Drag and drop

document.addEventListener(‘dragstart’, function(event) {
event.dataTransfer.setData(‘text’, ‘Customized text’);
event.dataTransfer.effectAllowed = ‘copy’;
}, false);
即将支持: 从桌面拖动文件到页面。

9.地理位置 - Geolocation

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setCenter(new GLatLng(lat, lng), 13);
map.addOverlay(new GMarker(new GLatLng(lat, lng)));
});
}