2022-08-25 第二小组 张鑫 学习笔记

news/2024/4/20 8:28:24/文章来源:https://www.cnblogs.com/zxscj/p/16631327.html

实训四十七天 元素操作 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";//样式特殊 classNamediv.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--;}elsedocument.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，点击取消，返回falselet flag =confirm("你是小黑子吧？");alert(flag);//带有文本框的弹窗let name = prompt("请输入你的名字：","例如：ikun");alert(name);//开发基本不用</script>
页面跳转
<a href="demo02.html"></a>
<script>/*localStorage sessionStoragehistory */ function fun(){//前进history.forward();//退退退history.back();//既可以前进也可以后退//传入参数为正，前进；传入参数为负，后退history.go();}
</script>

<button onclick="fun()">按钮</button>
<script>//locationfunction 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要有return3.函数也要返回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 const2.模板字符串3.箭头函数4.Symbol5.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 sadfasfdasdfa asfasaasfasfdaffasd fasdfsdfasfasdfsad 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_2814.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

NetCDF库编译安装

NetCDF库编译安装

1. 准备 系统环境，全部是deepin系统自带，并无单独安装deepin 20.6 gcc 8.3.0 g++ 8.3.0 cmake 3.22.1 netcdf安装版本：此次使用最新4.9.0，系统为deepin 20.6，大于4.3.0 源码下载地址，下载netcdf-c-4.9.0.tar.gz： https://downloads.unidata.ucar.edu/netcdf/ netCDF-C S…
阅读更多...
el-button点击了按钮会出现保留点击的状态

el-button点击了按钮会出现保留点击的状态

问题 el-button点击了按钮之后，将鼠标移出按钮，会出现保留点击的状态 再查看它的css样式后，可以看到官方默认设置有:focus的状态规则解决办法 在el-button的css里自定义或者复制原有的color、border-color、background-color三条样式， 然后再重写:hover方法就可以了， 其实…
阅读更多...
SpringBoot日志系统——logback

SpringBoot日志系统——logback

logback是SpringBoot内置的日志处理框架,你会发现spring-boot-starter其中包含了spring-boot-starter-logging，该依赖内容就是 Spring Boot 默认的日志框架 logback。而spring-boot-starter-web包含了spring-boot-starter，可通过引入spring-boot-starter-web后的项目JAR依赖关…
阅读更多...
seurat 单细胞数据分析中 VizDimLoadings 函数

seurat 单细胞数据分析中 VizDimLoadings 函数

前期处理：https://www.jianshu.com/p/fef17a1babc2 #可视化对每个主成分影响比较大的基因集 001、dat <- pbmc[["pca"]]@feature.loadings ## 数据来源 dat[1:3, 1:3] dat <- dat[order(-dat[,1]),][1:29,1] dat <- as…
阅读更多...
网页返回顶部的几种方法

网页返回顶部的几种方法

网页返回顶部的几种方法 - 腾讯云开发者社区-腾讯云 https://cloud.tencent.com/developer/article/2043539 1，在页面顶部固定一个 返回网页顶部的 按钮.back-to-top {position: fixed;right: 20px;bottom: 10px;width: 100px;height: 30px;text-align: center;line-height: …
阅读更多...
Navicat_Keygen_Patch_v5.6

Navicat_Keygen_Patch_v5.6

navicat download: Navicat keygen download: Navicat_Keygen_Patch_v5.6 注意事项： 1.运行注册机请断网；2.最好关闭电脑的杀毒软件； 3.无需将注册机放到 Navicat Premium 安装目录下；4.请选择对版本，Products那块；5.安装完成后不要直接运行软件，要先打开注册机 pat…
阅读更多...
AI模型集成到业务系统的方式演化

AI模型集成到业务系统的方式演化

如今，AI模型百花齐放，在业务场景中的使用是越来越多，那AI模型是如何集成到系统中的呢？这几年的集成方式又有何变化呢？在一些早期系统中，模型比较简单，这时，真正在线上系统部署模型时，模型只是以算法的形式出现，模型参数作为算法所需要的“数据”，存储在内存或分布式…
阅读更多...
Python教程：文件和读写的详细教程

Python教程：文件和读写的详细教程

文件操作的模式 文件操作的模式如下表：1. open 打开文件 使用 open 打开文件后一定要记得调用文件对象的 close() 方法。比如可以用 try/finally 语句来确保最后能关闭文件。 file_object = open(rD:\test.txt) # 打开文件 try:all_the_text = file_object.read( ) # 读文件的…
阅读更多...
学习：python进阶 （一）

学习：python进阶 （一）

python解释器多版本共存 1.下载需要的版本安装包 2.增加环境变量，把优先用的python放到第一个 修改python.exe可执行文件，在终端输入对应名称可以指定需要运行的python版本 虚拟环境 python3 -m venv 虚拟环境路径 #新建虚拟环境 cd 虚拟环境路径/Script acticate.bat #开启虚…
阅读更多...
04Spring MVC入门

04Spring MVC入门

Spring MVC三层架构表现层 业务层 数据访问层MVC(处理表现层)Model：模型层 View：视图层 Controller：控制层底层请求方式 在controller中添加 @RequestMapping("/http")public void http(HttpServletRequest request, HttpServletResponse response) throws IOExce…
阅读更多...
Python中itertools

Python中itertools

一、介绍 itertools 是python的迭代器，itertools提供的工具相当高效且节省内存 使用这些工具，可创建自己定制的迭代器用于高效率循环 1.count（初值=0，步长=1）：1 from itertools import count2 for i in count():3 print i4 if i > 10:5 break6 7 #从0…
阅读更多...
R语言中 %||%什么意思？

R语言中 %||%什么意思？

001、 %||% 函数用于判断 左侧变量是否为NULL， 如果左侧为NULL， 则返回右侧的变量； 否则，返回左侧的变量library(rlang) x = NULL y = 10 x %||% y ## 左侧变量x为NULL， 则返回右侧变量y的值x = 888 x %||% y ## 左侧变量x不为NULL， 则返回左侧变量的值
阅读更多...
2022HDU多校第五场 - 1007 Count Set

2022HDU多校第五场 - 1007 Count Set

置换群 + 生成函数 + NTT + 启发式合并/分治 题意 给一个 1-n 的排列 p 和一个非负整数 k，求大小为 k 的 {1， 2， 3，... n} 的子集合 T 的数量，满足即 T 的元素按 p 置换一轮后和自身没有交集 思路\(i\) -> \(p_i\) 连边，找到 m 个环设某个环的大小为 a，要找 b 个元素…
阅读更多...
MapReduce计算流程

MapReduce计算流程

MapReduce的计算流程 1.1 原始数据File The books chronicle the adventures of the adolescent wizard Harry Potter and his best friends Ron Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. 1T数据被切分成块存放…
阅读更多...
TCP协议

TCP协议

TCP协议 TCP（Transmission Control Protocol）协议是一种面向连接的、可靠的、基于字节流的传输层通信协议，由IETF的RFC 793 定义。 TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。…
阅读更多...
MySQL九：MVCC能否解决幻读问题

MySQL九：MVCC能否解决幻读问题

转载~ 幻读【前后多次读取，数据总量不一致】同一个事务里面连续执行两次同样的sql语句，可能导致不同结果的问题，第二次sql语句可能会返回之前不存在的行。事务A执行多次读取操作过程中，由于在事务提交之前，事务B（insert/delete/update）写入了一些符合事务A的查询条件的记…
阅读更多...
C - Candles

C - Candles

题目链接： C - Candles (atcoder.jp) 题目大意： 给你n个蜡烛的坐标，你想点燃其中k个蜡烛，一开始你在坐标0，每次向左或者向右可以移动一格，问点燃k个蜡烛至少需要移动多少步。 分析： 最优的移动的路线可以看作是一个‘U’型再加上一个线段。 以第一个样例为例： 如图所示…
阅读更多...
手机PC安装油猴

手机PC安装油猴

一、移动端使用油猴脚本移动端可以不使用油猴插件，就可直接安装脚本（需要浏览器支持），这样天然支持油猴脚本的移动浏览器还是很多，比如：书签地球、X浏览去、M浏览器等，但是各个浏览器的支持情况不一样，下面我以**【书签地球】**为例，展示安装使用，此浏览器经过测试对…
阅读更多...
DTSE Tech Talk | 云原生架构下的数字身份治理实践

DTSE Tech Talk | 云原生架构下的数字身份治理实践

摘要：由华为技术大咖VS派拉软件CTO为大家详解云原生架构下的身份管理平台，构建云安全数字身份入口。 本文分享自华为云社区《DTSE Tech Talk | 第4期：云原生架构下的数字身份治理实践》，作者： 华为云社区精选。 DTSE Tech Talk是华为云开发者联盟推出的技术公开课，解读云…
阅读更多...
【技术流吃瓜】python可视化大屏舆情分析“张天爱“事件网友评论

【技术流吃瓜】python可视化大屏舆情分析“张天爱“事件网友评论

python可视化大屏分析，舆情分析，张天爱事件目录一、事件背景二、微热点分析二、自开发Python舆情分析2.1 Python爬虫2.2 可视化大屏2.2.1 大标题2.2.2 词云图2.2.3 条形图2.2.4 饼图（玫瑰图）2.2.5 地图三、演示视频 一、事件背景 大家好，我是马哥python说。 演员张天爱于2…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023