2025/1/12 复习JS

我乞求你别再虚度光阴

▶ 空心

---------------------------------------------------------------------------------------------------------------------------------

摘自哔哩哔哩听课笔记。

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=0
        count++
        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. Class
    class 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+n2
    const getSum3 =(n1,n2)=>n1+n2