HTML5新特性汇总

1. 新的选择器

通过 class 定位元素 (dom api)
var el = document.getelementbyid(‘section1’);
el.focus();

var els = document.getelementsbytagname(‘p’);
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’];

数据库-web-sql-database">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)));
});
}