(十七)原生js案例之h5中的几个特性记录
h5 中的新特性
- 语义化标签
- 增强型表单
- 元素选择器
- querySelector
- querySelectorAll
- getElementsByClassName
- class 的操作
- classList.add
- classList.remove
- classList.toggle
- classList.contains
- classList.replace
- JSON
- JSON.stringify
- JSON.parse
- eval 可以解析任何字符串变成 js
- pares 只能解析 JSON 形式的字符串变成 js 安全性高
var str = 'alert("hello")';
eval(str); // 执行了
const str2 = 'function() show{alert("hello2222")}';
JSON.parse(str2);
show(); //报错了
// Uncaught SyntaxError: Unexpected token 'u', "function() "... is not valid JSON
// at JSON.parse (<anonymous>)
- json。parse 必须是严格的 json 格式, 否则会报错
const str2 = '{"name":"zs","age":18}';
const json = JSON.parse(str2);
console.log(json.name);
深拷贝
const obj = { name: "zs", age: 18 };
const obj2 = JSON.parse(JSON.stringify(obj));
obj2.name = "ls";
console.log(obj); // {name: "zs", age: 18}
console.log(obj2); // {name: "ls", age: 18}
dataset 自定义数据
- 比较麻烦的方式
<div id="box" name="zhangsan" age="30">这一段描述文本</div>
window.onload = function () {
const oDiv = document.getElementById("box");
const name = oDiv.getAttribute("name");
const age = oDiv.getAttribute("age");
console.log(name, age);
};
- h5 提供了 dataset
<div id="box" data-name="zhangsan" data-age="30">这一段描述文本</div>
window.onload = function () {
const oDiv = document.getElementById("box");
const name = oDiv.dataset.name;
const age = oDiv.dataset.age;
console.log(name, age);
};
defer 和 async
- defer 立即加载 js 文件，在页面解析完之后才执行
- async 异步加载 js 文件，执行完之后页面解析完再执行
- defer 和 async 都是异步加载 js 文件，但是执行顺序不同
- defer 加载 js 文件是按照顺序执行的，async 是无顺序的
- defer 加载 js 文件是阻塞解析的，async 是非阻塞解析
h5 中的历史管理
-
history.pushState(state, title, url)
-
history.replaceState(state, title, url)
-
history.back()
-
history.forward()
-
history.go()
-
state 状态对象，可以传递任意数据
-
title 标题，没有实际意义
-
url 页面地址，必须和当前页面同源
-
页面跳转不会刷新页面，只是改变 url
-
页面刷新会触发 popstate 事件,会读取 event.state
-
注意网址是虚假的，需要后端配合，否则刷新会找不到页面
-
hash 改变会触发 hashchange 事件
window.onhashchange = function () {};
h5 中的拖拽
-
拖拽元素的事件
- dragstart 开始拖拽
- drag 拖拽中 与
mousemove的移动事件类似，但是drag会一直触发， - dragend 拖拽结束
-
目标元素的事件
- dragenter 拖拽进入目标元素
- dragover 拖拽在目标元素上
- dragleave 拖拽离开目标元素
- drop 拖拽在目标元素上释放
-
阻止默认事件
- event.preventDefault()
- event.stopPropagation()
-
事件触发顺序
不触发 drop- dragstart ->drag -> dragenter -> dragover -> dragleave -> dragend
触发 drop - dragstart ->drag -> dragenter -> dragover -> drop -> dragleave -> dragend
- dragstart ->drag -> dragenter -> dragover -> dragleave -> dragend
-
拖拽图片
-
拖拽图片时，需要阻止默认事件
-
FileReader 读取文件
-
dataTransfer.setData 设置数据
-
dataTransfer.getData 获取数据
-
dataTransfer.effectAllowed 设置允许拖拽类型
-
dataTransfer.dropEffect 设置拖拽类型
-
readAsDataURL 读取文件为 base64,将文件读取为 DaataURL
-
onload 读取完成,this.result 为读取结果,如果是图片
读取的 base64 字符串
-
window.onload = function () {
const oBox = document.getElementById("box");
const oList = document.getElementById("list");
oBox.ondragenter = function (e) {
e = e || window.event;
e.preventDefault();
this.innerHTML = "可以释放啦~";
};
oBox.ondragover = function (e) {
e = e || window.event;
e.preventDefault();
};
oBox.ondragleave = function (e) {
this.innerHTML = "将文件拖拽到此区域~";
};
oBox.ondrop = function (e) {
e = e || window.event;
e.preventDefault(); // 阻止默认行为，图片会打开
this.innerHTML = "将文件拖拽到此区域~";
const data = e.dataTransfer.files;
console.log("🚀 ~ data:", data);
for (let i = 0; i < data.length; i++) {
const type = data[i].type;
if (type.indexOf("image") == -1) {
alert("文件格式错误");
return false;
}
// 读取文件内容
const reader = new FileReader();
reader.readAsDataURL(data[i]);
reader.onload = function () {
const oLi = document.createElement("li");
const img = document.createElement("img");
img.src = reader.result;
oLi.appendChild(img);
oList.appendChild(oLi);
};
reader.onprogress = function (e) {
console.log("🚀 ~ reader:", e);
};
}
};
};
原文地址：https://blog.csdn.net/qq_27702739/article/details/140612114
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！