我乞求你别再虚度光阴
▶ 空心
---------------------------------------------------------------------------------------------------------------------------------
摘自哔哩哔哩听课笔记。
01 上篇：核心语法
1.基于页面效果的操作
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>颜色切换示例</title>
</head><style>.change {background-color: tomato;line-height: 100px;width: 300px;text-align: center;transition: all 1s;}.box {line-height: 100px;width: 300px;background-color: yellow;text-align: center;}
</style><body><div class="box">鸡蛋的黄</div><script>const dom1 = document.querySelector('.box');dom1.onclick = function () {this.innerHTML = '西红柿的红';this.className = 'change';};</script>
</body></html>注意：在获取类选择器时候需要使用变量重新获取。但ID选择器不用。
我们可以通过src实现,HTML和JS的分离。
<script src="index.js"></script>2.基于数值的操作
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</
<style>
</style>
<body>使用循环，函数去书写1~100的和<script>function GetSum(){console.log("开始了")var sum =0;for(var i =1;i<=100;i++){sum +=i;}return sum;}GetSum();var All =GetSum();console.log(All);</script>
</body>
</html>打开F12，查看控制台，笔记本电脑，按Fn+F12
3.使用函数作为参数，处理更加复杂的逻辑
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>function sum(start,end,f){var sum =0;for(var i =start;i<=end;i++){if(f(i)){sum+=i;}}return sum;}var result =sum(1,100,function(n){if(n%2==0){return true;}return false;});console.log(result);</script></body>
</html>
4.创建一个对象，并遍历它
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script>var People={name:"苏高阳",age:22,}for(var key in People){console.log(key,People[key]);}</script></body>
</html>
02 中篇：Dom&Timer
Dom&Bom 指的是文档模型对象和浏览器模型
要使用Javascript对值进行修改，首先要找到标签进行操作。
getElementById 获取指定的HTML页面元素对象
getElementByTagName 返回所有指定标签名的HTML页面的元素对象
getElementByName 获取一组指定name的HTML页面元素
getElementByClassName 返回所有指定类名的HTML页面元素对象
除了Id只有一个，其他方法默认查找多个，所以其他方法默认存在数组里。
1.使用contentText修改元素的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用contentText去修改元素的值</title>
</head>
<body><div id="block">Hello</div> <script>var dom1 = document.getElementById("block")dom1.textContent="JavaScript";</script>
</body>2.使用索引遍历处理去修改元素的值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用contentText去修改元素的值</title>
</head>
<body><p>苏轼</p><p>苏东坡</p><p>苏有朋</p><p>苏秦</p><script>var dom1 =document.getElementsByTagName('p');for(var i=0;i<dom1.length;i++){dom1[i].textContent="苏高阳";}</script>
</body>3.其他获取元素的方式
我觉得这个视频博主举的例子就很好，弹幕说很具有人文主义。
针对一个元素：querySelector()
针对获取同级别的上一个元素：previousElementSibling
针对获取同级别的下一个元素： nextElementSibling
获取父元素：parentNode
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<body>
<div id="containner"><p>镇山的老虎</p><p class="item">敏捷的豹</p><p>远见的鹰</p><p>善战的狼</p>
</div>
<script>var dom1 =document.querySelector('.item');dom1.textContent='替罪的羊'; // dom1上面的元素dom1.previousElementSibling='划水的鱼';//dom1 上面的元素dom1.nextElementSibling='看门的狗';// 父元素var dom2= dom1.parentNode;dom2.textContent="儆猴的鸡"
</script>
</body>4.利用事件实现前后端交互
简单的应用，弹出surprise
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<style>#containner{margin: 10px 10px;width: 100px;height: 100px;text-align: center;background-color: aqua;line-height: 100px;}
</style>
<body>
<div id="containner">
默认文本
</div>
<script>containner.onclick=function(){alert('surprise')}
</script>
</body>我想要实现再次点击，弹出surprise again
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<style>#containner{margin: 10px 10px;width: 100px;height: 100px;text-align: center;background-color: aqua;line-height: 100px;}
</style>
<body>
<div id="containner">
默认文本
</div>
<script>containner.addEventListener('click',function(){alert('surprise')})containner.addEventListener('click',function(){alert('surprise again')})
</script>
</body>5.轮播图
学会这些简单的之后，我们就可以试着去写一个轮播图carousel
nth-child()是一个伪类选择器，用于选取父元素的第n个子元素。
首先我们可以先理清楚思路，需要定义的是四个列表，两个按钮，过渡是由透明度为1到透明度为0来进行切换，opacity:1是不透明，0是透明。是由第一个列表切换到第二个列表。
在书写JS时，定义的变量，一是整个轮播图carousel，引出的是列表的每个元素，按钮的两个元素。
最难的是添加事件的方法，将active赋予到每个元素中去。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title>
</head>
<style>#carousel li{width: 200px;line-height: 200px;position: absolute;text-align: center;font-size: 35px;color:#fff;opacity: 0;transition:opacity 1s;}#carousel li:nth-child(1){background-color: orange;}#carousel li:nth-child(2){background-color: brown;}#carousel li:nth-child(3){background-color: skyblue;}#carousel li:nth-child(4){background-color:grey;}#pre{margin-top: 300px;margin-left: 40px;}#next{margin-top: 300px;margin-left: 100px;}/* 第一张图不要是透明色 */#carousel li.active{opacity: 1;}
</style>
<body>
<ul id="carousel"><li class="active">镇山的虎</li><li>敏捷的豹</li ><li>远见的鹰</li><li>善战的狼</li>
</ul>
<button id="pre">上一张</button>
<button id="next">下一张</button>
<script>
// 轮播图
var carousel =document.querySelector('#carousel')
var items =carousel.children
var preBtn =document.querySelector('#pre')
var nextBtn =document.querySelector('#next')var index=0
nextBtn.addEventListener('click',function(){items[index].className=''if(index==items.length-1){index = -1}index++items[index].className='active'
})preBtn.addEventListener('click', function() {items[index].classList.remove('active');index = (index - 1 + items.length) % items.length;items[index].classList.add('active');});</script>
</body>03 下篇：ES6上
1.变量与常量
使用const定义的变量，不能被改变。
{let count=0count++const BASE_URL='https://www.baidu.com'}2.模块字符块
const str1='abc'+'efg'// 反引号就是波浪号的标记const str2 =` efg ${str1}`console.log(str2)3.解构赋值
也就是变量与值一一对应
const [a,b,c] =[1,2,3]console.log(a,b,c)const { username,age:userAge,...otherInfo } ={username:'苏高阳',age:18,gender:'male',category:'user'}console.log(username,userAge,otherInfo)4. 数组和对象的扩展
const arr1 = [1,2,3]const arr2 = [4,5,6]const arr3 =[100,...arr1,...arr2,10,20]console.log(arr3)const obj1={a:1}const obj2={b:2}const obj3={...obj1,...obj2}console.log(obj3)5.数组的方法，Array from.参数..forEach 每一个
fn(1,2,3,4)function fn(){Array.from(arguments).forEach(function(item){console.log(item)})}6.对象的方法
合并对象
const objA={name:'吴悠',age:18}const objB={gender:'male',}// 我希望将obj1与obj2合并const objC=Object.assign({},objA,objB)console.log(objA,objB,objC);类与构造方法
// 5. Classclass A {// 构造方法 constructor(name, age) {this.name = name;this.age = age;}intruduce() {console.log(`我的名字是 ${this.name}, 我的年龄是 ${this.age}`);}
}
const a1 = new A('苏高阳', 18);
a1.intruduce();7.箭头函数
// 如果我想要表达的含义是const getSum1 =function(){return n+3}// 那我可以写成const getSum2 = n = n=>n+3// 表示n1+n2const getSum3 =(n1,n2)=>n1+n2
![[Spring] SpringCloud概述与环境工程搭建](https://i-blog.csdnimg.cn/direct/df8e2ab9732648fd88c5e6de1cb15593.png)
