html5--笔记
目录
- 避免变量名污染的方式
- input-type类型
- .dataset[] 获取自定义数据集
- SVG
- html5 新选择器
- 添加事件监听
- Element.classList
- 访问历史API
- 全屏API
- css/js注入内容
- 应用缓存
- Web Storage 网页存储
- 文件API
- 拖拽操作
避免变量名污染的方式
- html5 自执行函数
(function(){ ... })(); - jQuary $
$(function(){ ... });
返回目录
input-type类型
- button(单机按钮)
- checkbox(复选框)
- file(文件上传)
- hidden(隐藏的输入字段)
- image(图像形式的提交按钮)
- password(密码字段)
- radio(单选按钮)
- reset(重置按钮)
- submit(提交按钮)
- text(文本)
html5中type类型：
email
(email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。)
url
(url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。)
number
(number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定：Points: <input type="number" name="points" min="1" max="10" step="2" value="6"/> (value为默认值 step为步长))
range
(range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：<input type="range" name="points" min="1" max="10" />)
date pickers:
- date 选取日、月、年
- month 选取月、年
- week 选取周和年
- time 选取时间（小时和分钟）
- datetime 选取时间、日、月、年（UTC 时间）
- datetime-local 选取时间、日、月、年（本地时间）
search
(search 类型用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。)
返回目录
.dataset[] 获取自定义数据集
event.prenventDefault(); 取消事件的默认动作
返回目录
SVG
Scalable Vector Graphics 可缩放矢量图形
优势：体积小，质量高，效果好，可控程度高
- 以文件方式载入方式：
**<iframe src="demo.svg" frameborder="0"></iframe><object data="demo.svg" type=""></object><embed src="demo.svg" type=""></embed>
- 直接把svg代码复制进html中
返回目录
html5 新选择器
- 返回第一个满足选择器条件的元素，一个dom对象
document.querySelector(selector); - 返回所有满足该条件的元素，一个元素类型是dom类型的数组
document.querySelectorAll(selector);
类比jQuery的$('.item')是返回一个jQuary对象(dom元素的数组)
本质上jQuery方式和querySelector方式都是获取DOM数组，只不过jQuery会多一些其他成员
dom数组的每一个成员注册事件不能像jQuery一样直接注册，需要遍历每个子元素分别注册
h5就是将我们经常需要的操作又包装了一层
返回目录
添加事件监听
element.addEventListener('click',function(e){
...
e.perventDefault();//阻止默认事件
});
返回目录
Element.classList
输出Element拥有的class的数组
Element.classList.add('classAttr');//添加类Element.classList.remove('classAttr');//移除类Element.classList.toggle('classAttr',true/false);//切换事件,true为添加、false为删除ELement.classList.contains('classAttr')//判断当前classlist中有没有classAttr这个属性;
返回目录
访问历史API
在此之前可以使用window.对象实现前进、后退和刷新之类的操作
标准键值?key=val
window.history.forword();//前进window.history.back();//后退window.history.go();//刷新（可传入url不写是本页面）- 新加入的API
window.history.pushState(state,title,url);//url='?+t'+title
//当我们在伪造访问历史记录的前进或后退时会执行一个popstate事件
window.addEventListener('popstate',function(e){
//e.state = title;
});
//第一次请求过来，获取地址栏中的t参数
var title = window.location.search.split('=')[1];
title = decodeURI(title);//decodeURI作用是将URL编码转换到之前的状态
返回目录
全屏API
var element = 需要全屏的元素;
fi(elememt.webkitRequestFullScreen){
element.webkitRequestFullScreen();
}
else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}
// 标准函数：
else if(element.requestFullScreen){
element.reuqestFullScreen();
}
返回目录
css/js注入内容
css使用::before ::after伪类注入（before是元素开始的时候，在元素内部）
body::before{
content: 'css注入的内容';
}
js
document.write("js注入的内容");
返回目录
应用缓存
<html lang="en" manifest="cache.manifest">
需要创建一个cache.manifest文件
CACHE MANIFEST
# version 1.0.0
CACHE: //缓存的文件
index.html
script.js
style.css
//这一行有一个Tab缩进
NETWORK: //联网状态下可访问的文件
*
返回目录
Web Storage 网页存储
localStorage本地存储 sessionStorage会话存储
var btnSet = document.querySelector('#btn_set');
var btnGet = document.querySelector('#btn_get');
var txtValue = document.querySelector('#txt_value');
btnGet.addEventListener('click',function(){
if(window.localStorage)
//txtValue.value = localStorage.getItem('key1');获取一个不存在的键，返回空字符串
txtValue.value = localStorage['key1'];//获取一个不存在的键，返回undefined
});
btnSet.addEventListener('click',function(){
localStorage['key1'] = txtValue.value;
});
返回目录
文件API
提供客户端本地操作文件的可能
对于表单里的input来说：可以直接通过name找到元素//document.form[0].input_file
<form action="">
<input type="file" name="input_file" id="input_file" multiple>//multiple可多选文件
</form>
返回目录
拖拽操作
drag&drop 拖&放
var target = document.querySelector('#target');//找到拖拽目标框
target.addEventListener('dragenter',function(){
//添加拖拽进去事件
});
target.addEventListener('dragleave',function(){
//添加拖拽离开事件
});
target.addEventListener('dragover',function(e){
//如果想要捕获drop事件，就一定要在该事件中阻止默认事件
e.preventDefault();
e.stopPropagation();//阻止事件冒泡
});
target.addEventListener('drop',function(e){
//把元素放在该对象中
if(e.dataTransfer.files.length){
//拖拽文件
var files = e.dataTansfer.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');
e.preventDefault();
e.stopPropagation();
}
}
});