欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5新特性汇总

程序员文章站 2023-10-06 14:01:27
1. 新的选择器 通过 class 定位元素 (dom api) var el = document.getelementbyid(‘section1’); el.focus...

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