目录
BOM:（Browser Object Mode1）浏览器对象模型
重点归纳
- JavaScript
- 回调函数
- 定时函数/周期函数
- 事件的添加、删除、捕获
- 一些ES6语法
知识点
属性的获取
所有的HTML元素，可以根据具体需求，自定义添加属性
但一些属性由于元素本身的特性，拿不到，那就没用
元素.属性名获取值的方式，只适用于元素本身就有的属性
getAttribute方法可以获取自定义的属性的值（也能拿元素自带的属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div haha="adc" id="xyz"></div>
<input type="text" name="username">
<script>
let div = document.querySelector("div");
// 获取这个属性的值
// name拿不到，id能拿到，为什么？
// name只有提交数据时有用，div的name不提交任何内容，所以没用
// 元素.属性的方法只能获取元素原生的属性
// 元素.getAttribute()可以拿到任何属性
console.log(div.getAttribute("haha"));
// 设置元素的属性
// 直接元素.属性的方法行不同，用getAttribute()
div.setAttribute("class","nnn");
// 重复的设置会覆盖
div.setAttribute("haha","sss");
// 删除属性
div.removeAttribute("haha");
//
</script>
</body>
</html>拿到所有属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div haha="adc" id="xyz" class="nnn"></div>
<script>
let div = document.querySelector("div");
// 拿到所有属性
// 返回的结果是一个属性节点的映射和集合
console.log(div.attributes);
console.log(div.attributes[1]);
console.log(div.attributes[1].name);
console.log(div.attributes[1].value);
div.attributes[1].value = "ddd";
</script>
</body>
</html>BOM:（Browser Object Mode1）浏览器对象模型
BOM核心对象window
- navigator
- history
- screen
- location
回调函数:很重要*****
一个函数的参数是另一个函数，叫回调函数。
JS数据类型：number,string,boolean,object,array
null,undefined,function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ES6语法定义函数
let callback = function () {
console.log("xiba");
}
// 传参
callback(1);
callback("hello");
// 对象用{}
callback({ name: "zhangsan" });
callback([1, 2, 3]);
// test函数中参数可以是函数
let test = function (fun) {
console.log("before");
// 调用函数，在此调用函数，在此传参
fun(100);
console.log("adter");
}
// 只能传函数参数
// 传入的参数是一个函数类型时，只需要写函数名，不需要写()小括号
test(callback);
</script>
</body>
</html>定时函数setTimeout（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/* setTimeout（）是一个函数
参数1：函数
参数2：延迟时间
*/
// 5000ms后打印123
// timer就是一个计时器
let timer = setTimeout(function(){
document.write("<h1>5秒之后看到我！</h1>");
},5000);
// 清除延迟（计时器）函数
// 需要传参：要清除的计时器
clearTimeout(timer);
/* 练习
第一个按钮：x秒后打印输出一句话
第二个按钮：终止这个操作
*/
</script>
</body>
</html>每隔指定时间执行一次的周期性函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 与setTimeout（）类似
let timer = setInterval(function(){
document.write("123");
},1000)
clearInterval(timer);
</script>
</body>
</html>练习
倒计时：每隔一秒执行一次倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let i = 5;
let timer = setInterval(function(){
if(i>0){
document.write(i+"<br>");
i--;
}else{
//关闭计时器
clearInterval(timer);
document.write("开吃!!!");
}
},999);
</script>
</body>
</html>浏览器自带的小型数据库
实际上是一个map集合，永久保存。叫做storage
第一种：window.localStorage
写document时也有window，只不过可以省略
第二种：window.sessinoStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// window.localStorage
// 向storage中设置键值对
window.localStorage.setItem("name","lucy");
// 从storage中获取值
console.log(localStorage.getItem("name"));
// 删除对应键值对
localStorage.removeItem("name");
//清空所有键值对
localStorage.clear();
/*
session：会话
什么是会话？
一问一答式
*/
sessionStorage.setItem("name","jack");
</script>
</body>
</html>警告弹窗：
alert：关了警告弹窗才能操作其他
带有确认、取消的弹窗
点击确定返回true，点击取消返回flase
let flag = confirm("你是好人吗？")；
alert(flag);带有文本框的弹窗
有两个参数，第一个是要输入的文字，第二个参数可以不写，写了就是默认值
返回值为文本框内容
let name = prompt("请输入你的名字","例如张三");
alert = name;这三个弹窗在前端开发中一定不用！
原因：
1.太丑
2.不同浏览器弹窗长得不一样
3.位置不能修改（谷歌在上边，火狐、IE在中间）
BOM对象
1.两个数据库:
localStorage
sessionStorage
2.history:历史记录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="ch06test.html">倒计时5秒</a>
<button onclick="fun()">前进</button>
<button onclick="fun1()">关闭</button>
<script>
function dun(){
// //前进
history.forward();
// // 退退退！
history.back();
// 还可以传参
//参数为正,前进,参数为负,后退,数字大小为前进过后退几步
history.go(2);
}
</script>
</body>
</html>location位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="fun()">按钮</button>
<script>
function fun(){
// 让按钮跳转到输入的地址
// 可以是相对路径，也可以是绝对路径，还可以是http地址
// location.href = "ch06test.html";
location.href = "http://www.baidu.com";
// 取值:取当前页面的完整地址
alert(location.href);
}
// 刷新页面
location.reload();
function fun1() {
// 关闭窗口
// window.close();
// 打开窗口(输入地址)
// window.open("demo01.html");
window.print();
}
</script>
</body>
</html>屏幕：screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 网页窗体（BOM）的尺寸
console.log(screen.width);
console.log(screen.height);
// 网页页面（DOM）的尺寸
console.log(screen.availWidth);
console.log(screen.availHeight);
</script>
</body>
</html>navigator
获取一些浏览器的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(navigator.platform);
// 浏览器版本
console.log(navigator.appVersion);
// 网景
console.log(navigator.appName);
</script>
</body>
</html>事件的添加
少用在标签中写οnclick=""的方式
添加事件的方法:addEventListener() （大神写法）
参数1：要添加的事件类型
参数2：添加事件要触发的函数传说中，这种添加事件的方式有兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 61.8px;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取指定元素
let div = document.querySelector("div");
/*
添加事件的方法:addEventListener()
（大神写法）
参数1：要添加的事件类型
参数2：添加事件要触发的函数
传说中，这种添加事件的方式有兼容性问题
*/
div.addEventListener("click", function () {
alert("click");
});
//操作元素的属性
div.onclick = function(){
alert("onclick");
}
</script>
</body>
</html>事件的删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 61.8px;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector("div");
div.onclick = function(){
alert("onclick");
}
// 删除事件的方式一
div.onclick = null;
div.onclick = false;
div.onclick = "";
let callback = function(){
document.write("callback");
}
//添加一个事件
div.addEventListener("click",callback);
// 删除事件方式二
div.removeEventListener("click",callback);
</script>
</body>
</html>提交表单时触发的事件：onsubmit
onsubmit事件注意：
1.onsubmit是加在表单上的
2.onsubmit要有return
3.函数也要Boolean类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在表单处加事件才是表单事件（加return后，如果返回值为false，提交失效） -->
<form action="aaa" onsubmit="return fun()">
<input type="text" required>
<input type="submit" value="提交">
</form>
<script>
function fun() {
return false;
}
</script>
</body>
</html>事件捕获
阻止事件冒泡：
1.在子元素的事件触发函数中阻止
2.借助event对象
3.调用一个方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
background-color: pink;
}
li{
background-color: skyblue;
}
</style>
</head>
<body>
<ul onclick="fun()">
<li onclick="lifun()">哈哈哈</li>
</ul>
<script>
// 只在ul中添加点击事件，点击li也会触发ul的点击事件
function fun(){
alert("111");
}
// ul、li都有点击事件，点击ul触发ul的点击事件，点击li会触发ul和li的两个事件：这类事件问题称为事件冒泡
function lifun(){
alert("222");
// 阻止事件冒泡
event.stopPropagation();
}
/*
阻止事件冒泡：
1.在子元素的事件触发函数中阻止
2.借助event对象
3.调用一个方法
event对象必须通过addEventListener方式添加事件才能使用
*/
</script>
</body>
</html>E S 6 语法
1.let、const
2.模板字符串:着重符``，随意换行
3.箭头函数
4.Symbol
5.Promise()函数，处理回调地狱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 2.
let sql = `select *
from
student
left join teacher on student.id = teacher.sid`
// 3.
let callback = (a,b) => {};
setInterval(() => {
},2000);
// 4.
let a = Symbol("hello");
let b = Symbol("hello");
document.write(a == b);
</script>
</body>
</html>前端练习案例
网上点餐
规则：
1.点击查看订单要看到
可口可乐-----2------￥6
米饭---------1------￥2
总价：8
2.清空订单就是清空
3.结账
出现一个带有确认和取消的弹窗，显示已选的菜品
点击确认结账
结账时可以自定义一些规则：
起送价：60
需要注意：
1.订单的显示
可口可乐----1----￥3
在点一个可乐又出现一个
可口可乐----1----￥3
2.结账时订单清空
3.一上来就点结账过查看订单，做出友好提示
主页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<form action="#" class="form">
<table class="table">
<tr>
<td class="title" colspan="3" align="center">欢迎来到本小店</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="padding_left font" id="laziji">辣子鸡</td>
<td class="font">￥45</td>
<td>
<button onclick="jian1()" class="button">-</button>
<input type="text" value="0" class="input" id="num1" onfocus="kong1()">
<button onclick="jia1()" class="button">+</button>
</td>
</tr>
<tr>
<td class="padding_left font" id="muxushizi">木须柿子</td>
<td class="font">￥25</td>
<td>
<button onclick="jian2()" class="button">-</button>
<input type="text" value="0" class="input" id="num2" onfocus="kong2()">
<button onclick="jia2()" class="button">+</button>
</td>
</tr>
<tr>
<td class="padding_left font" id="kele">可口可乐</td>
<td class="font">￥3</td>
<td>
<button onclick="jian3()" class="button">-</button>
<input type="text" value="0" class="input" id="num3" onfocus="kong3()">
<button onclick="jia3()" class="button">+</button>
</td>
</tr>
<tr>
<td class="padding_left font" id="mifan">米饭2两</td>
<td class="font">￥2</td>
<td>
<button onclick="jian4()" class="button">-</button>
<input type="text" value="0" class="input" id="num4" onfocus="kong4()">
<button onclick="jia4()" class="button">+</button>
</td>
</tr>
<tr>
<td><button type="button" class="buttons font" id="button1" onclick="order()">查看订单</button></td>
<td><button type="button" class="buttons font" id="button2" onclick="clearall()">清空订单</button></td>
<td><button type="button" class="buttons font" id="button3" onclick="checkout1()">结账</button></td>
</tr>
</table>
</form>
<script src="./js/test.js"></script>
</body>
</html>CSS样式
.table{
margin-top: 0;
width: 640px;
height: 745px;
margin-left: auto;
margin-right: auto;
padding-left: 60px;
padding-right: 60px;
padding-top: 190px;
padding-bottom: 45px;
background-image: url(../img/downloadfile-1661420680395.jpeg);
opacity: 0.8;
}
.form {
background-image: url(../img/jiu.jpeg);
}
.padding_left{
padding-left: 40px;
}
.font {
font-size: 25px;
font-weight: bold;
}
.title {
font-size: 30px;
font-weight: bold;
}
.buttons {
width: 150px;
height: 40px;
margin-left: 5px;
background-color: rgb(178, 136, 19);
}
.button{
background-color: rgb(233, 213, 159);
border-radius: 50px;
font-weight: bold;
}
.input {
width: 40px;
height: 20px;
background-color: rgb(233, 213, 159);
text-align: center;
}JS脚本
function jia1() {
let num1 = document.querySelector("#num1");
num1.value = parseInt(num1.value) + 1;
}
function jia2() {
let num2 = document.querySelector("#num2");
num2.value = parseInt(num2.value) + 1;
}
function jia3() {
let num3 = document.querySelector("#num3");
num3.value = parseInt(num3.value) + 1;
}
function jia4() {
let num4 = document.querySelector("#num4");
num4.value = parseInt(num4.value) + 1;
}
function jian1() {
let num1 = document.querySelector("#num1");
if (num1.value > 0) {
num1.value = parseInt(num1.value) - 1;
}
}
function jian2() {
let num2 = document.querySelector("#num2");
if (num2.value > 0) {
num2.value = parseInt(num2.value) - 1;
}
}
function jian3() {
let num3 = document.querySelector("#num3");
if (num3.value > 0) {
num3.value = parseInt(num3.value) - 1;
}
}
function jian4() {
let num4 = document.querySelector("#num4");
if (num4.value > 0) {
num4.value = parseInt(num4.value) - 1;
}
}
function order() {
let num1 = document.querySelector("#num1");
let num2 = document.querySelector("#num2");
let num3 = document.querySelector("#num3");
let num4 = document.querySelector("#num4");
let cai1 = document.querySelector("#laziji");
let cai2 = document.querySelector("#muxushizi");
let cai3 = document.querySelector("#kele");
let cai4 = document.querySelector("#mifan");
alert(cai1.innerHTML + "\n" + "单价￥45" + "\n" + num1.value + "份" + "\r" +
cai2.innerHTML + "\n" + "单价￥25" + "\n" + num2.value + "份" + "\r" +
cai3.innerHTML + "\n" + "单价￥3" + "\n" + num3.value + "份" + "\r" +
cai4.innerHTML + "\n" + "单价￥2" + "\n" + num4.value + "份" + "\r" +
"总计：" + (parseInt(num1.value) + parseInt(num2.value) + parseInt(num3.value) + parseInt(num4.value)) + "份商品" +
(parseInt(num1.value) * 45 + parseInt(num2.value) * 25 + parseInt(num3.value) * 3 + parseInt(num4.value) * 2) + "元"
);
}
function clearall() {
let num1 = document.querySelector("#num1");
num1.value = 0;
let num2 = document.querySelector("#num2");
num2.value = 0;
let num3 = document.querySelector("#num3");
num3.value = 0;
let num4 = document.querySelector("#num4");
num4.value = 0;
}
function checkout1() {
let num1 = document.querySelector("#num1");
let num2 = document.querySelector("#num2");
let num3 = document.querySelector("#num3");
let num4 = document.querySelector("#num4");
let cai1 = document.querySelector("#laziji");
let cai2 = document.querySelector("#muxushizi");
let cai3 = document.querySelector("#kele");
let cai4 = document.querySelector("#mifan");
if ((parseInt(num1.value) * 45 + parseInt(num2.value) * 25 + parseInt(num3.value) * 3 + parseInt(num4.value) * 2) < 60) {
alert("60元起送，再点一些东西吧！");
} else {
confirm(cai1.innerHTML + "\n" + "单价￥45" + "\n" + num1.value + "份" + "\r" +
cai2.innerHTML + "\n" + "单价￥25" + "\n" + num2.value + "份" + "\r" +
cai3.innerHTML + "\n" + "单价￥3" + "\n" + num3.value + "份" + "\r" +
cai4.innerHTML + "\n" + "单价￥2" + "\n" + num4.value + "份" + "\r" +
(parseInt(num1.value) + parseInt(num2.value) + parseInt(num3.value) + parseInt(num4.value)) + "份商品" + "\r" +
"请支付："+(parseInt(num1.value) * 45 + parseInt(num2.value) * 25 + parseInt(num3.value) * 3 + parseInt(num4.value) * 2) + "元")
}
}成果展示
