Html5 02(new-selectors、Element.classList、history-api、cache离线访问、web-storage数据存储、file-api、drag&drop拖放操作)
new-selectors
var items = document.querySelectorAll('ul > .item'); console.log(items); for (var i = 0; i < items.length; i++) { items[i].addEventListener('click', function(e) { console.log(1111); }); }
Element.classList
// (function() { // 获取界面上的每一个li元素 var liElements = document.querySelectorAll('.nav > li'); // 遍历每一个元素 分别注册点击事件 for (var i = 0; i < liElements.length; i++) { liElements[i].addEventListener('mouseover', function(e) { for (var i = 0; i < liElements.length; i++) { liElements.item(i).classList.remove('active'); } this.classList.add('active'); e.stopPropagation(); e.preventDefault(); }); } // })();
history-api历史记录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>访问历史 API</title> <style> html, body { height: 100%; margin: 0; overflow: hidden; padding: 0 } aside { background-color: #e0e0e0; float: left; height: 100%; width: 220px; } article { background-color: #f5f5f5; height: 100%; margin-left: 220px; padding: 20px; overflow: scroll; } article > p { line-height: 2; font-size: 20px; } ul { list-style: none; padding: 0; margin: 0; } ul > li { font-size: 18px; line-height: 50px; margin: 5px 0; text-align: center; cursor: pointer; } ul > li::before { content: '🍋'; margin-right: 5px; } ul > li:hover { background-color: #c0c0c0; } </style> </head> <body> <aside> <ul id="list"></ul> </aside> <article> <p id="content"></p> </article> <script src="data.js"></script> <script> (function() { // 获取所有需要操作的DOM对象 var list = document.querySelector('#list'); var content = document.querySelector('#content'); // 先展示数据 for (var title in data) { var liElement = document.createElement('li'); liElement.setAttribute('data-title', title); liElement.innerHTML = title; list.appendChild(liElement); // 为每个li注册点击事件 liElement.addEventListener('click', function(e) { content.innerHTML = data[this.dataset.title]; if (window.history && history.pushState) { // 支持历史状态操作 history.pushState(this.dataset.title, 'title useless', '?t=' + this.dataset.title); } }); } // 在历史状态中前进后退触发该事件 window.addEventListener('popstate', function(e) { console.log(e.state); contentent.innerHTML = data[e.state]; });
// window.location = "https://www.baidu.com";
// 第一次请求过来 获取地址栏中的t参数
// window.location可以拿到当前网页中跟地址相关的信息
var search = window.location.search; // ?t=jkaljdksfla
// 如果地址栏中的地址有中文，会以URL编码方式呈现
// decodeURI 可以转换到之前中文
var title = search.split('=')[1]; // ['?t','jkaljdksfla']
if (title) {
// 有值 decodeURI作用就是从URL编码转换到之前的状态
console.log(decodeURI(title));
content.innerHTML = data[decodeURI(title)];
}
})();
</script>
</body>
</html>
cache离线访问
<!DOCTYPE html> <html lang="en" manifest="cache.manifest"> <head> <meta charset="UTF-8"> <title>离线访问</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- stackedit.io --> <!-- 1. 应用程序缓存 正常 2. html添加一个manifest属性指向一个文件 --> <p>hahahahahahahahaha</p> <script src="script.js"></script> </body> </html>
cache.manifest
CACHE MANIFEST
# version 1.0.1
CACHE:
index.html
script.js
style.css
NETWORK:
*
web-storage数据存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<textarea id="txt_value" cols="80" rows="10"></textarea>
<input type="button" value="SET" id="btn_set">
<input type="button" value="GET" id="btn_get">
<script>
var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click', function() {
// txtValue.value = sessionStorage.getItem('key1');
if (window.sessionStorage)
txtValue.value = sessionStorage.getItem('key1')
// txtValue.value = sessionStorage['key1'];
});
btnSet.addEventListener('click', function() {
// sessionStorage.setItem('key1', txtValue.value);
sessionStorage['key1'] = txtValue.value;
});
</script>
</body>
</html>
file-api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件API</title>
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container">
<form action="">
<!-- 对于表单里的input来说：可以直接通过name找到
document.form[0].input_file
multiple让文件域可以多选 -->
<input id="input_file" class="form-control hidden" type="file" name="input_file" multiple> ///hidden隐藏 multiple多选
<input id="btn_select" class="btn btn-info" type="button" value="选择文件">
<!-- <input id="btn_read" class="btn btn-warning" type="button" value="读取文件列表"> -->
<ul id="file_list" class="list-group">
</ul>
</form>
</div>
<script>
(function() {
var inputFile = document.querySelector('#input_file');
var btnRead = document.querySelector('#btn_read');
var fileList = document.querySelector('#file_list');
var btnSelect = document.querySelector('#btn_select');
btnSelect.addEventListener('click', function() {
// 在按钮点击时调用input的点击
inputFile.click();
});
// 点击过后
// btnRead.addEventListener('click', function() {
// var files = inputFile.files;
// for (var i = 0; i < files.length; i++) {
// var li = document.createElement('li');
// li.setAttribute('class', 'list-group-item');
// // 创建信息的子节点
// li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
// fileList.appendChild(li);
// }
// });
// 选择完成后
inputFile.addEventListener('change', function() {
var files = inputFile.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.setAttribute('class', 'list-group-item');
// 创建信息的子节点
li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>';
fileList.appendChild(li);
}
});
})();
</script>
</body>
</html>
drag&drop拖放操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>拖放操作</title> <meta name="author" content="汪磊"> <link rel="stylesheet" href="bootstrap.css"> <style> #target { padding: 20px; height: 300px; border: 5px dashed #c0c0c0; color: #e0e0e0; font-size: 40px; line-height: 260px; text-align: center; -webkit-user-select: none; cursor: pointer; } #target.actived { border-color: #888; color: #eaeaea; box-shadow: 0 0 80px #e0e0e0 inset; } </style> </head> <body> <div class="container"> <div class="page-header"> <h1>Drag&Drop</h1></div> <div class="jumbotron"> <p>你好啊，你今年几岁啊，哈哈，我的今天在哪里</p> <img src="toy.png" alt=""> </div> <div id="target"> Drag something into here <ul id="result" class="list-group"></ul> </div> <br> </div> <script> (function() { // 找到目标位置框框 var target = document.querySelector('#target'); var fileList = document.querySelector('#result'); // 注册拖拽进入 target.addEventListener('dragenter', function() { this.classList.add('actived'); }); // 离开 target.addEventListener('dragleave', function() { this.classList.remove('actived'); }); // 如果想要捕获drop事件 就一定得在该事件中阻止默认事件 target.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); }); // 当元素放到该对象上 target.addEventListener('drop', function(e) { if (e.dataTransfer.files.length) { var files = e.dataTransfer.files; for (var i = 0; i < files.length; i++) { var li = document.createElement('li'); li.setAttribute('class', 'list-group-item'); // 创建信息的子节点 li.innerHTML = '<h5 class="list-group-item-heading">' + files[i].name + '</h5><p class="list-group-item-text">' + files[i].lastModifiedDate.toLocaleDateString() + ' ' + files[i].lastModifiedDate.toLocaleTimeString() + ' ' + (files[i].size / 1024).toFixed(2) + 'KB</p>'; fileList.appendChild(li); } } else { // 短路运算 // var data = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text/uri-list'); var data = e.dataTransfer.getData('text/plain'); if (data) { // 拖入的是文本 target.innerHTML = data; } else { var img = document.createElement('img'); img.src = e.dataTransfer.getData('text/uri-list'); target.appendChild(img); } } this.classList.remove('actived'); e.preventDefault(); e.stopPropagation(); }); })(); </script> </body> </html>
