一真的小站

鳶飛魚躍,無處不是化境。

0%

十一、缓存

介绍

1.概念:

使用HTML5,通过创建 cache manifest 文件,可以轻松地创建 web应用的离线版本

2.优势:

a)可配置需要缓存的资源

b)网络无连接应用仍可用

c)本地读取缓存资源,提升访问速度,增强用户体验

d)减少请求,缓解服务器负担

3.Cache Manifest 基础:

a)如需启用应用程序缓存,请在文档的标签中包含manifest属性:

1
2
3
<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>

b)每个指定了manifest的页面在用户对其访问时都会被缓存。如果未指定manifest属性,则页面不会被缓存(除非在manifest文件中直接指定了该页面)。

c)manifest 文件的建议的文件扩展名是:”.appcache”。

d)注意,manifest 文件需要配置正确的MIME-type,即”text/cache-
manifest”。必须在web 服务器上进行配置

4.Manifest文件:

a)概念:manifest文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)

b)manifest 文件可分为三个部分

CACHE MANIFEST-开始
CACHE在此标题下列出的文件将在首次下载后进行缓存
NETWORK-在此标题下列出的文件需要与服务器的连接,且不会被缓存
FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)

写法

主体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<!-- manifest="应用程序缓存清单文件的路径建议文件的扩展名是appcache,这个文件的本质就是一个文本文件 -->
<htmllang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 300px;
display: block;
}
</style>
</head>
<body>
<img src="../images/11.jpg" alt="">
<img src="../images/12.jpg" alt="">
<img src="../images/13.jpg" alt="">
<img src="../images/14.jpg" alt="">
</body>
</html>

Manifest文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
CACHE MANIFEST
#上面一句代码必须是当前文档的第一句
#后面写注释
#需要缓存的文件清单列表
CACHE:
#下面就是需要缓存的清单列表
../images/11.jpg
../images/12-jpgl
# *:代表所有文件
#配置每一次都需要重新从服务器获取的文件清单列表
NETWORK:
./images/13.jpg
#配置如果文件无法获取则使用指定的文件进行替代
FALLBACK:
./images/14.jpg../images/banner_1.jpg
# /:代表所有文件

十、web存储

1.sessionstorage的使用

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
<!--
sessionstorage的使用:存储数据到本地。存储的容量5mb左右。
setItem(key,value):存储数据,以键值对的方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称key删除对应的值
clear():清空所有存储的内容<br> -->
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<script>
// 存储数据
document.querySelector("#setData").onclick = function() {
// 获取用户名
var name = document.querySelector("#userName").value;
// 存储数据
window.sessionStorage.setItem("userName", name);
}
// 获取数据
document.querySelector("#getData").onclick = function() {
var name = window.sessionStorage.getItem("userName");
alert(name);
}
// 删除数据
document.querySelector("#removeData").onclick = function() {
window.sessionStorage.removeItem("userName");
}
</script>
</body>

参数

对象 定义
onclick 事件会在元素被点击时发生
value 表单被提交时被发送到服务器的值
sessionStorage 存储数据到本地;存储的容量5mb左右
setItem 存储数据,以键值对的方式存储
getItem 获取数据,通过指定名称的key获取对应的value值
alert 用于显示带有一条指定消息和一个 确认 按钮的警告框
removeItem 删除数据,通过指定名称key删除对应的值

2.localstorage的使用

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<body>
<!-- localstorage的使用:
1.存储的内容大概20mb
2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效,它的数据是存储在硬盘上,并不会随着页面或者浏览器的关闭而清除
setItem(key,value):存储数据,以键值对的方式存储
getItem(key):获取数据,通过指定名称的key获取对应的value值
removeItem(key):删除数据,通过指定名称key删除对应的值
clear():清空所有存储的内容<br> -->
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">

<script>
document.querySelector("#setData").onclick = function() {
var name = document.querySelector("#userName").value;

/*使用localStorage存储数据*/
window.localstorage.setItem("userName", name);
}
/*获取数据*/
document.querySelector("#getData").onclick = function() {
var name = window.localstorage.getItem("userName")
alert(name);
}
/*清除数据*/
document.querySelector("#removeData").onclick = function() {
window.localstorage.removeItem("userName");
}
</script>
</body>

参数

对象 定义
localstorage 存储在硬盘;大概20mb
setItem 存储数据,以键值对的方式存储
getItem 获取数据,通过指定名称的key获取对应的value值
alert 用于显示带有一条指定消息和一个 确认 按钮的警告框
removeData 删除数据,通过指定名称key删除对应的值

九、拖拽接口

样例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<div class="div1" id="div1">
<p id="pe" draggable="true">拖拖</p>
</div>
<div class="div2" id="div2"></div>
<script>
var p = document.querySelector("#pe");
p.ondragstart = function() {
console.log("ondragstart");
}
p.ondragend = function() {
console.log("ondragend");
}
p.ondragleave = function() {
console.log("ondragleave");
}
p.ondrag = function() {
console.log("ondrag");
}
</script>
</body>
拖拽元素对象 定义
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
目标元素对象 定义
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用

八、即时预览图片

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
<form action="">
<Input type="file" name="myFile" id="myFile" onchange="getFileContent();"><br>
<Input type="submit">
</form>
<img src="" alt="">
<script>
function getFileContent() {
// console.log(123);
var reader = new FileReader();
var file = document.querySelector("#myFile").files;
// // reader.readAsDataURL();
// reader.readAsDataURL(file[0]);
// console.log(reader.result);//没读完
reader.onload = function() {
console.log(reader.result);
document.querySelector("img").src = reader.result;
}
}
</script>
</body>

参数含义

对象 定义
reader 创建文件读取对象
readAsDataURL 没有返回值:void;需要传递一个参数(图片及嵌入到文档的文件);将读取的结果存储在读取对象的result中
files 储存在file的数组值
FileReader事件模型 定义
onabort 读取文件中断片时触发
onerror 读取文件错误时触发
onload 读取文件完成时触发
onloadend 读取文件完成时触发,不论是否成功
onloadstart 开始读取时触发
onprogress 读取文件过程中持续触发

七、网络接口

写法

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<script>
// 1.ononline:网络连通时候触发这个事件
window.addEventListener("online",function(){
alert("网络连通了")
});
// 2.onoffline:网络断开时触发
window.addEventListener("offline",function(){
alert("网络断开了")
});
</script>
</body>

参数含义

对象 定义
addEventListener 设定一个事件监听器,当某一事件发生通过设定的参数执行操作
“online” 网络连通时候触发这个事件
“offline” 网络断开时触发
function 事件触发后调用的函数

六、自定义属性

规范

1.data-开头

2.data-后至少有一个字符,多个单词使用-连接

建议:

1.名称应该都使用小写,不要包含任何的大写字符

2.名称中不要有任何的特殊符号

3.名称不要使用纯数字

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<p data-school-name="itcast">XXXXX</p>
<p data-name="itcast">XXXXX</p>

<script>
window.onload = function() {
var p = document.querySelector("p");
// 获取自定义属性值
// 将data-后面的单词使用camel命名法连接;必须使用camel合法取值,N大写
var value = p.dataset["schoolName"];
console.log(value)
}
</script>

</body>

参考含义

对象 定义
p 会自动在其前后创建一些空白,浏览器会自动添加这些空间

五、类样式操作

head写法

头部

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<style>
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
.underline {
text-decoration: underline;
}
</style>
</head>

添加获取样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
<ul>
<li>前端</li>
<li class="blue">java</li>
<li>js</li>
<li class="red">c++</li>
</ul>
<input type="button" value="为第一个li元素添加样式" id=add>
<script>
window.onload = function() {
// add:为元素添加指定名称样式
document.querySelector("#add").onclick = function() {
// classList:当前元素的所有样式列表-数组
document.querySelector("li").classList.add("red");
document.querySelector("li").classList.add("underline");
// className会覆盖
// document.querySelector("li").className="red underline";
// 获取样式
var result = document.querySelector("li").classList.item(2);
console.log(result);
}
}
</script>
</body>

参数含义

对象 定义
button 定义一个按钮
onclick 当按钮被点击时执行Javascript代码
classList 当前元素的所有样式列表-数组
add 为元素添加指定名称样式
underline 下划线
className 属性设置或返回元素的 class 属性(覆盖)

移除样式

1
2
3
4
5
6
7
8
9
<input type="button" value="为第二个li元素移除样式" id=remove>
<script>
window.onload = function() {
// remove:为元素移除指定名称的样式,一次只能移除一个
document.querySelector("#remove").onclick = function() {
document.querySelector(".blue").classList.remove("blue");

}
}

参数含义

对象 定义
remove 为元素移除指定名称的样式,一次只能移除一个

切换样式

1
2
3
4
5
6
7
8
<input type="button" value="为第三个li元素切换样式" id=toggle>
<script>
window.onload = function() {
// toggle:切换元素的样式,如果元素之前没有指定名称样式则添加,如果有则移除
document.querySelector("#toggle").onclick = function() {
document.querySelectorAll("li")[2].classList.toggle("green");
}
}

参数含义

对象 定义
toggle 切换元素的样式,如果元素之前没有指定名称样式则添加,如果有则移除

判断是否包含某个样式

1
2
3
4
5
6
7
8
9
<input type="button" value="判断第四个li是否包含某个样式" id=contain>
<script>
window.onload = function() {
// contains:判断元素是否包含指定名称的样式,返回true/false
document.querySelector("#contain").onclick = function() {
var isContain = document.querySelectorAll("li")[3].classList.contains("red");
console.log(isContain);
}
}

参考含义

对象 定义
contains 判断元素是否包含指定名称的样式,返回true/false

四、获取dom元素

1.ElementsByTagName

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head> 
<style>
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="red">前端</li>
<li class="green">java</li>
<li class="blue">js</li>
<li>c++</li>
</ul>
<script>
window.onload = function() {
// ElementsByTagName获取的是数组
// 索引:不直观
var cli = document.getElementsByTagName("li")[0]
console.log(cli)
}
</script>
</body>

参数含义

对象 定义
ul 标签定义无序列表
li 列表项目
script 插入JavaScript脚本
window.onload 用于在网页加载完毕后立刻执行的操作
function 声明一个函数
var 创建一个变量
document 使我们可以从脚本中对 HTML 页面中的所有元素进行访问
getElementsByTagName 返回带有指定标签名的对象的集合
[0] li的第0个数组
console.log 在控制台输出信息

2.querySelector

写法

1
2
3
4
5
6
7
8
9
10
11
12
<script>
window.onload = function() {
// query:查询 Selector:选择器
// querySelector获取单个元素,如果获取不止一个,只返回满足条件的第一个元素
// 如果类选择器,添加.
// 如果id选择器添加#
// 否则当成标签处理
var javaLi = document.querySelector(".green")
// var javaLi=document.querySelector("#blue")
console.log(javaLi)
}
</script>

参数含义

对象 定义
query 查询
Selector 选择器
querySelector 获取单个元素,如果获取不止一个,只返回满足条件的第一个元素

3.querySelectorAll

写法

1
2
3
4
5
6
7
<script>
window.onload = function() {
// querySelectorAll获取满足条件的所有元素
var allLi = document.querySelectorAll("li")
console.log(allLi)
}
</script>

参数含义

对象 定义
All 获取满足条件的所有元素

三、多媒体标签

1.audio音频

写法 参数含义
src 音频文件路径
controls 音频播放器控制器面板
autoplay 自动播放
loop 循环
1
2
3
4
<body>    
<audio src="../mp3/1.mp3" controls autoplay>
</audio>
</body>

2.video视频

写法 参数含义
width 宽度
height 高度
poster 默认显示封面
1
2
3
4
<body>
<video src="../mp4/1.mp4" poster="../images/1.jpg" controls height="600">
</video>
</body>

二、表单

1.type属性

写法 参数含义
text 表示导航
password 密码
tel 为了移动端打开梳子键盘
url 网址必须包含http://
unmber 只能输入数字,max;min;value
search 更人性化,文本后有X
range 范围,max;min;value默认50
color 颜色拾取
time 时间 时分秒
date 日期 年月日
datetime 仅苹果浏览器
datetime-local 通用时间日期
month 月份
week 星期

示例

1
2
<input type="text"> <br>
<input type="number" balue="60" max="100" min="0"> <br>

2.其它属性

写法 参数含义
placeholder 提示文本
autofocus 自动获取焦点
autocomplete=”on/off” on打开off关闭1、必须成功提交2、必须有name属性
required 必须输入
pattern=”“ 正则表达式验证*任意;?0或1;+1或多;
file 文件上传
multiple 选多个文件

3.下拉菜单

写法 参数含义
select 下拉菜单
option 可创建单选或多选菜单
1
2
3
<select name="" id="">
<option value=""></option>
</select>
写法 参数含义
datalist 下拉菜单
value 具体值
label 提示信息
1
2
3
4
<input type="text" list="id号">
<datalist id="id号">
<option value=""></option>
</datalist>

4.新增事件

写法 参数含义
opinput 监听当前指定元素,内容改变就会触发,键盘按下触发
onkeyup 键盘弹起触发,每一键都触发一次
oninvalid 当验证不通过触发

5.进度条

1)

写法 参数含义
progress 进度条
max 最大值
value 当前值

2)

写法 参数含义
meter 进度条度量器
high 规定较高值
low 规定较低值
max 最大
min 最小
value 当前度量值