2022-08-25 第二小组 张鑫 学习笔记
作者：互联网
实训四十七天 元素操作 BOM
1.学习内容
自定义属性
设置元素属性
<div haha="abc" id="xyz"></div>
<script>
let div = document.querySelector("div");
//获取属性值
//元素.属性名 的方式只能适用于元素原生的属性
console.log(div.getAttribute("haha"));
//设置元素的属性
div.className="mmm";
//用元素，属性名的方式行不通
div.setAttribute("class","nnn");
div.setAttribute("hehehe","hiehiehie");
//重复赋值会覆盖
div.setAttribute("hahaha","hijklmn");
//删除属性
div.removeAttribute("haha");
</script>
获取元素属性
<div haha="abc" id="xyz"></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='xxx';
</script>
定义样式
<div>112233</div>
<script>
let div = document.querySelector("div");
div.id="aaa";
div.title = "bbb";
//样式特殊 className
div.className ="fontStyle";
//行内样式
div.style="color:yellow;display:inline";
</script>
BOM
BOM:Browser Obje Model
BOM核心对象 window
回调函数
let callback = function(a){
console.log(a);
}
callback(1);
callback("hello");
callback({name:"zhangsan"});
callback([1,2,3]);
/*
test函数中，入参可以是一个函数
*/
let test = function(fun){
console.log("before");
//调用传进来的函数
fun(1000);
console.log("after");
}
let calllback = function(data){
console.log("I am calllback."+data);
}
/*
传入的参数是一个函数类型时
只需要写函数名，不需要写小括号
*/
test(calllback);
/*
回调函数，一个函数的参数是另一个函数
*/
//function fun(){}
时间计时器
<body>
<button onclick="btimer">开始</button>
<button onclick="etimer">终止</button>
<script>
/*
参数1：函数
参数2：延迟时间
*/
//5000毫秒后打印
//timer 叫一个计时器
let timer = setTimeout(function () {
document.write("<h1>5s中后可以见到我</h>")
},5000);
//清除计时函数
//参数：要清除哪一个计时器
clearTimeout(timer);
/*
定义两个按钮
点击第一个按钮，几秒钟后打印输出一句话
点击第二个按钮，终止这个操作
*/
let btimer = setTimeout(function () {
document.write("<h1>2s中后可以见到我</h>");
},2000);
//清除计时函数
//参数：要清除哪一个计时器
let etimer = clearTimeout(btimer);
</script>
</body>
周期定时器
<script>
let timer = setInterval(function () {
console.log("123");
}, 2000);
clearInterval(timer);
/*
倒计时
*/
let i = 5;
let goTime = setInterval(function () {
if (i >= 1) {
document.write(i);
i--;
}
else
document.write("go")
}, 2000)
clearInterval(timer);
</script>
浏览器
<script>
/*
浏览器自带小型数据库
浏览器自带的一个map集合，永久保存
*/
//向Storage中设置键值对
window.localStorage.setItem("name","lucy");
//从Storage中根据键获取值
console.log(localStorage.getItem("name"));
//从Storage中删除对应的键值对
localStorage.removeItem("name");
//清空Storage中所有的键值对
localStorage.clear();
/*
session:会话--一问一答
*/
sessionStorage.setItem("name","jack");
</script>
警告弹窗
<script>
//警告弹窗
alert(1);
//带有确认和取消的弹窗
//点击确定返回true，点击取消，返回false
let flag =confirm("你是小黑子吧？");
alert(flag);
//带有文本框的弹窗
let name = prompt("请输入你的名字：","例如：ikun");
alert(name);
//开发基本不用
</script>
页面跳转
<a href="demo02.html"></a>
<script>
/*
localStorage
sessionStorage
history
*/
function fun(){
//前进
history.forward();
//退退退
history.back();
//既可以前进也可以后退
//传入参数为正，前进；传入参数为负，后退
history.go();
}
</script>
<button onclick="fun()">按钮</button>
<script>
//location
function fun(){
//值是要跳转页面的路径
//可以是相对路径，也可以是绝对
location.href ="demo02.html";
//取值
alert(location.href);
}
</script>
获取浏览器参数
<script>
//navigator
//获取一些浏览器的参数
console.log(navigator.platform);
console.log(navigator.appVersion);
console.log(navigator.appName);
</script>
关闭浏览器
<button onclick="fun()">关闭</button>
<script>
function fun() {
window.close();
window.open("demo01.html");
window.print();
}
</script>
事件
创建事件
<script>
//获取指定元素
let div =document.querySelector("div");
/*
参数1：要添加的事件类型
参数2：添加事件要触发的函数
*/
div.addEventListener("click",function(){
alert("click");
});
//操作元素的属性
div.onclick=function(){
alert("onclick");
};
</script>
删除事件
<script>
let div = document.querySelector("div");
div.onclick =function(){
alert("onclick")
}
//删除事件的方式
div.onclick=null;
div.onclick=false;
div.onclick="";
let callback = function(){
console.log("callback");
}
div.addEventListener("click",callback);
div.removeEventListener("click",callback);
</script>
<form action="aaa" onsubmit="return fun()">
<input type="text" required>
<input type="submit" value="提交">
</form>
<script>
/*
onsubmit注意事项
1.onsubmit加在form表单上
2.onsubmit要有return
3.函数也要返回Boolean类型
*/
function fun(){
return true;
}
</script>
阻止事件冒泡
<script>
function fun(){
alert("111");
}
let li =document.querySelector("li");
li.addEventListener("click",function(event){
alert("222");
//阻止事件冒泡
event.stopPropagation();
})
//阻止事件冒泡
/*
1.在子元素的事件触发函数中阻止
2.借助event对象
3.调用一个方法
event必须用add添加才能使用
*/
</script>
ES6
<script>
/*
ES6语法
1.let const
2.模板字符串
3.箭头函数
4.Symbol
5.Promise 函数，处理回调地狱
*/
setInterval(() => {
setInterval(() => {
setInterval(() => {
}, 4000)
}, 3000)
}, 2000);
let a = Symbol("hello");
let b = Symbol("hello");
console.log(a == b);
let callback = (a, b) => { a };
setInterval(() => { }, 2000)
let sql = `select * from student left join teacher on st sadf
asf
dasdfa
asfa
sa
asf
asfda
ffasd fasdfsdfas
fasdfsad
false`;
</script>
案例1
<!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="show()">3秒看结果</button>
<button onclick="stopShow()">不看结果</button>
<script>
let timer;
function show(){
timer=setTimeout(function(){
console.log("我就是你要看的");
},3000)
}
function stopShow(){
clearTimeout(timer);
}
</script>
</body>
</html>
案例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>
</head>
<body>
<button onclick="goTime()">倒计时</button>
<div>
</div>
<script>
function goTime(){
let div = document.querySelector("div");
let i=5;
let timer =setInterval(function(){
div.innerHTML=`<h1>${i}</h>`;
i--;
if(i<0){
// clearInterval(timer);
div.innerHTML="<h1>GO!!</h1>"
return;
}
},1000)
}
</script>
</body>
</html>
案例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>网上点餐</title>
<style>
</style>
</head>
<body>
<h1>欢迎来到本小店</h1>
<p>
辣子鸡----------------------￥45
<button id="but1down">-</button>
<input type="text" size="2" value="0" id="numlzj">
<button id="but1up">+</button>
<button id="but1add">添加</button>
</p>
<p>
木须柿子--------------------￥25
<button id="but2down">-</button>
<input type="text" size="2" value="0" id="nummxsz">
<button id="but2up">+</button>
<button id="but2add">添加</button>
</p>
<p>
可口可乐--------------------￥ 4
<button id="but3down">-</button>
<input type="text" size="2" value="0" id="numkl">
<button id="but3up">+</button>
<button id="but3add">添加</button>
</p>
<p>
米饭二两--------------------￥ 2
<button id="but4down">-</button>
<input type="text" size="2" value="0" id="nummf">
<button id="but4up">+</button>
<button id="but4add">添加</button>
</p>
<button id="order">查看订单</button>
<button id="empty">清空订单</button>
<button id="check">结账</button>
<script>
let laziji = "";
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
let but1down = document.querySelector("#but1down");
let but1up = document.querySelector("#but1up");
let but1add = document.querySelector("#but1add");
but1down.onclick = function () {
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
if(p1 != 0){
p1--;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
}
but1up.onclick = function () {
let n1 = document.querySelector("#numlzj");
let p1 = document.querySelector("#numlzj").value;
p1++;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
but1add.onclick = function () {
let p1= document.querySelector("#numlzj").value;
laziji = "辣子鸡----------------------￥45*" + p1;
n1.value = p1;
}
let muxushizi = "";
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#numlzj").value;
let but2down = document.querySelector("#but2down");
let but2up = document.querySelector("#but2up");
let but2add = document.querySelector("#but2add");
but2down.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
if(p2 != 0){
p2--;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
}
but2up.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
p2++;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
but2add.onclick = function () {
let n2 = document.querySelector("#nummxsz");
let p2 = document.querySelector("#nummxsz").value;
muxushizi = "木须柿子----------------------￥25*" + p2;
n2.value = p2;
}
let kele = "";
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
let but3down = document.querySelector("#but3down");
let but3up = document.querySelector("#but3up");
let but3add = document.querySelector("#but3add");
but3down.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
if(p3 != 0){
p3--;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
}
but3up.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
p3++;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
but3add.onclick = function () {
let n3 = document.querySelector("#numkl");
let p3 = document.querySelector("#numkl").value;
kele = "可口可乐--------------------￥ 4*" + p3;
n3.value = p3;
}
let mifan = "";
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
let but4down = document.querySelector("#but4down");
let but4up = document.querySelector("#but4up");
let but4add = document.querySelector("#but4add");
but4down.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
if(p4 != 0){
p4--;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
}
but4up.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
p4++;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
but4add.onclick = function () {
let n4 = document.querySelector("#nummf");
let p4 = document.querySelector("#nummf").value;
mifan = "米饭二两----------------------￥2*" + p4;
n4.value = p4;
}
order.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
let p1 = document.querySelector("#numlzj").value;
let p2 = document.querySelector("#nummxsz").value;
let p3 = document.querySelector("#numkl").value;
let p4 = document.querySelector("#nummf").value;
alert(laziji + "\n" + muxushizi + "\n" + kele + "\n" + mifan + "\n" + "总价：" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4));
}
empty.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
laziji = "";
muxushizi = "";
kele = "";
mifan = "";
n1.value = 0;
n2.value = 0;
n3.value = 0;
n4.value = 0;
}
check.onclick = function () {
let n1 = document.querySelector("#numlzj");
let n2 = document.querySelector("#nummxsz");
let n3 = document.querySelector("#numkl");
let n4 = document.querySelector("#nummf");
let p1 = document.querySelector("#numlzj").value;
let p2 = document.querySelector("#nummxsz").value;
let p3 = document.querySelector("#numkl").value;
let p4 = document.querySelector("#nummf").value;
let flag = confirm("共消费" + (45 * p1 + 25 * p2 + 4 * p3 + 2 * p4) + "是否结账？");
if (flag == true) {
laziji = "";
muxushizi = "";
kele = "";
mifan = "";
n1.value = 0;
n2.value = 0;
n3.value = 0;
n4.value = 0;
alert("消费成功");
}
}
</script>
</body>
</html>
标签：function,25,张鑫,08,value,let,querySelector,div,document 来源： https://www.cnblogs.com/zxscj/p/16631327.html