目录
7.2 拖动什么 - ondragstart 和 setData()
1 新增标签
1.1 常用语义化标签
<nav>、<header>、<footer>、<main>、<article>、<aside> (在页面中不唯一)
1.2 进度条
<progress>:属性max、value
<meter>:度量器衡量当前进度值,属性:high、low、max、min、value
1.3 音频视频
<audio>:文件路径 src、控制进度条 controls、自动播放 autoplay、循环播放 loop
<video>:与上述一样 + 指定未播放时画面 poster、视频宽高 width height(画面按比例缩放,一般只设置其中一个)
source:保证浏览器可以播放其中一个视频,兼容性
<video controls>
<source src = "....flv" type = "video/flv">
<source src = "....mp4" type = "video/mp4">
</video>
2、表单元素中新增
2.1 input 中新增
属性 | 值 | 用途 | 备注 |
---|---|---|---|
type | 邮箱地址完整性验证 | 属性mutiple:允许用逗号分隔多个邮箱 | |
tel | 在移动端打开数字键盘 | ||
url | 验证网址,必须包含http:// | ||
number | 只能输入数字 | 可以设置默认值value,最大值max,最小值min | |
search | 文本框 | 右边有一个删除全部内容键 | |
range | 范围拖动条 | 属性max,min,value | |
color | 颜色选择 | ||
time | 时间 | ||
date | 日期 | ||
datetime-local | 日期+时间 | ||
file | 上传文件 | 属性mutiple增加上传的文件的个数 | |
placeholder | placeholder | 提示文本 | |
autofocus | autofocus | 自动焦点 | |
autocomplete | on/off | 自动提示输入过的内容 | 执行条件:成功提交过且有name属性 |
required | required | 必须填写 |
2.2 datalist标签
<datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。
如果 input 的 type="url" 若 datalist 中没有含有 http:// 的选项,则不会有下拉列表
使用 input 元素的 list 属性来绑定 datalist 的 id。
2.3 keygun标签
用于表单的密钥对生成器字段
当提交表单时,私钥存储在本地,公钥发送到服务器
2.4 output标签
不同类型的输出,比如脚本的输出
2.5 新增事件
oninput:元素内容改变触发
oninvalid:验证不通过时触发
设置默认的提示信息:setCustomValidity
3 获取dom元素
.querySelector("类样式 / # + id / . + class")(如果有多个元素,则取第一个)
.querySelectorAll()返回所有符合条件的元素----数组
4 操作类样式方法
.classList.add("样式名字")-------------追加样式,一次只能一个
.classList.remove("样式名字")-------------删除样式,一次只能一个
.classList.toggle("样式名字")-------------该样式 与 没有样式 之间切换
.classList.contain("样式名字")-------------判断元素是否包含指定名称的样式,返回Boolean值
.classList.item[x]("样式名字")-------------获取第x个样式名字
5 自定义属性
命名:
1、data- 开头
2、data- 后面至少有一个字符,多个单词用 - 连接
建议
1、名称都用小写
2、没有特殊符号
3、不使用纯数字
取值:js中取值
.dataset [ "data- 后面的内容" ] 多个单词用驼峰命名法连接
6 新增接口
6.1 网络接口
window.addEventListener("online", function() {............});------------网络连通触发
window.addEventListener("offline", function() {............});------------网络断开触发
6.2 全屏接口
1、开启全屏显示:requestFullScreen()---------前面加某标签
2、退出全屏显示:cancelFullScreen()--------前面加document全局
3、检测是否全屏状态:fullScreenElement()---------前面加document全局
不同浏览器加不同前缀
chorme & safari : webkit firefox : moz ie : ms opera : o
6.3 地理定位接口
获取当前地理信息
1. 原理:
PC端:IP地址定位,精度很差
问题:Chrome从google.com的IP库查询(翻墙),IE从microsoft.com的IP库查询
解决:用后台的IP库来匹配
移动端:GPS定位,精度高
2. 方法:
navigator.geolocation.getCurrentPosition(res, error, option)
(1)success:获取地理信息成功之后的回调
回调参数的数据:
- res.coords.latitude 纬度
- res.coords.longitude 经度
- res.coords.accuracy 精度
- res.coords.altitude 海拔高度
(2)error: 获取地理信息失败之后的回调
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
(3)option:
- 调整获取当前地进信息的方式
- enableHighAccuracy:true/false:是否使用高精度
- timeout:设置超时时间,单位ms
- maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位是ms
7 拖动事件
拖拽元素事件:ondrag、ondragstart、ondragleave、ondragend
目标元素事件:ondragenter、ondragover、ondrop、ondragleave
7.1 设置元素为可拖放
首先,为了使元素可拖动,把 draggable 属性设置为 true :
<img draggable="true" />
7.2 拖动什么 - ondragstart 和 setData()
然后,规定当元素被拖动时,会发生什么,ondragstart(事件)。
dataTransfer.setData() 方法设置被拖数据的数据类型和值:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。
7.3 放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法:
event.preventDefault() // 阻止默认处理方式(不允许放置)
7.4 进行放置 - ondrop
当放置被拖数据时,会发生 drop 事件。
浏览器默认会阻止 ondrop 事件,可以在 ondragover 中阻止浏览器默认行为, preventDefault()
在上面的例子中,ondrop 属性调用了一个函数,drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
/*学习拖拽,主要就是学习拖拽事件*/
/*应用于被拖拽元素的事件
*ondrag 应用于拖拽元素,整个拖拽过程都会调用--持续
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用*/
document.ondragstart=function(e){
/*通过事件捕获来获取当前被拖拽的子元素*/
e.target.style.opacity=0.5;
e.target.parentNode.style.borderWidth="5px";
obj= e.target;
/*通过dataTransfer来实现数据的存储与获取
* setData(format,data):
* format:数据的类型:text/html text/uri-list
* Data:数据:一般来说是字符串值*/
e.dataTransfer.setData("text/html", e.target.id);
}
document.ondragend=function(e){
e.target.style.opacity=1;
e.target.parentNode.style.borderWidth="1px";
}
document.ondragleave=function(e){
}
document.ondrag=function(e){
}
/*应用于目标元素的事件
*ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用*/
document.ondragenter=function(e){
console.log(e.target);
}
document.ondragover=function(e){
/*如果想触发ondrop事件,那么就必须在这个位置阻止浏览器的默认行为*/
e.preventDefault();
}
/*浏览器默认会阻止ondrop事件:我们必须在ondragover中阻止浏览器的默认行为*/
document.ondrop=function(e){
/*添加元素*/
//e.target.appendChild(obj);
/*通过e.dataTransfer.setData存储的数据,只能在drop事件中获取*/
var id=e.dataTransfer.getData("text/html");
/*console.log("id="+id);*/
e.target.appendChild(document.getElementById(id));
}
document.ondragleave=function(e){
}
8 Web 存储
8.1 sessionStorage
- 每个域名5M
- 存储在当前页面的内存中
- 关闭页面,数据自动清除
8.2 localStorage
- 每个域名5M
- 不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
- 永久生效,数据存储在硬盘上,必须手动清除
- 用途:记录用户名,保存草稿
setItem ( key , value ): 存储数据,以键值对的方式存储
getItem ( key ): 获取数据,通过指定名称的key获取对应的value值
removeItem ( key ): 删除数据,通过指定名称key删除对应的值
clear (): 清空所有存储的内容
9 canvas
10 WebWorker
Web多进程(基本不用)
主进程——UI进程
子进程——工作进程
- 不能控制UI,可以数据交互
- 子进程不能再创建子进程
- 不能跨域获取别人的文件
- 利用CPU资源
都是用onmessage、postMessage交换数据
<!-- 主进程 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// 创建子进程(引入js文件)
let oW=new Worker('1.js');
// 收到子进程的数据
oW.onmessage=function (ev){
alert(ev.data);
};
// 向子进程发送数据
oW.postMessage({n1: 25, n2: 99});
</script>
</head>
<body>
</body>
</html>
// 子进程
// 收到主进程数据
this.onmessage=function (ev){
let {n1, n2}=ev.data;
let result=n1+n2;
// 发送数据给主进程
this.postMessage(result);
};
11 应用缓存
在html标签中添加 manifest 属性,对应值的文件扩展名建议为 .appcache
.appcache 文件格式
第一句必须是:CACHE MANIFEST
# 井号后面写注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
../images/l3.jpg
#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件