HTML5新特性汇总

当前位置 : 首页 > 网页制作 > html5 > HTML5新特性汇总

HTML5新特性汇总

来源: 作者: 时间:2016-01-30 08:53
1 新的选择器通过 class 定位元素 (DOM API) var el = document getElementById(‘section1’); el focus();var els = document getElementsByTagName(‘div’); els[0] focus();var e

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)));
});
}

 

Tag:
网友评论

<