JavaScript 学习笔记

一，基础篇

1.变量的更新以及输入用户名案例

// 1.声明的同时直接赋值 变量的初始化

//正确写法：
 
let age = 18
age = 19

//错误写法：

let age = 18
let age = 19

//2.声明多个变量

let age = 18 ,name = '岁岁'

//提倡声明的方式
 
let age = 18
let name = '岁岁'

//输出用户名案例
//1.用户输入
//prompt（'请输入名字'）
//2.内部处理保存数据
let name = prompt ('请输入名字')
//3.打印输出
document.write(uname)

2.交换变量的值

需求：有两个 变量：num1里面放的是10，num2里面放的是20。最后变为num1=20，num2=10

//步骤：
//1.声明一个临时变量temp
//2.把num1的值赋给temp
//3.把num2的值赋给num1
//4.把temp的值赋给num2

let num1 = 10
let num2 = 20
let temp

//把右边给左边

temp = num1
num1 = num2
num2 = temp

3.变量的本质

变量本质：是程序在内存中申请的一块用来存放数据的小空间

3.1 变量的命名规范

规则：（必须遵守，不遵守会报错）

①不能用关键字：有特殊含义的字符，JavaScript内置的一些英语词汇。例如：let，var，if，for

②只能用下划线，字母，数字 ，$组成，且数字不能开头

③字母严格区分大小写，例如Age和 age是不同的变量

规范：（建议，不遵守不会报错）

①起名要有意义

②遵守小驼峰命名法：第一个单词字母小写，后面每个单词首字母大写 例如：userName

3.2 输入姓名案例

let uname = prompt('请输入名字')
let age = prompt('请输入年龄')
let gender = prompt('请输入性别')
document.write(uname,age,gender )

4.Let 和 Var 的区别

let 是为了解决var的一些问题，以后变量统一使用let

var声明：

①可以先使用，再声明（不合理）

②var声明 过的变量可以重复声明（不合理）

③比如变量提升，全局变量，没有块级作用域等

5.数组的基本使用

①数组是按顺序保存，所以每个数据都有自己的编号

②计算机中的编号从0开始，所以小明的编号为0，小李的编号为1，以此类推

③在数组中，数据的编号也叫索引或下标

④数组可以存储任意类型的数据

//let arr = [10,20,30]

//声明数组

let arr = ['小明','小李','小梅','小杜','小杨']

//使用数组 数组名[索引号] 从0开始 
 
//console.log(arr)

console.log (arr[0]) //小明

5.1 数组取值案例

需求：定义一个数组，里面存放星期一，星期二.....星期日。在控制台输出星期日

let names = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日']

console.log(names[6])

//打印数组长度

console.log (arr.length)

6.常量

常量的基本使用：

概念：使用const声明的变量称为“常量”

使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let

命名规范：和变量一致

常量使用：

//声明一个常量

const G = 9.8

//输出这个常量

console.log(G)

注意：产量不允许重新赋值，声明的时候必须赋值（初始化）

小技巧：不需要重新赋值的数据使用const

7.数据类型

JS数据类型整体分为两大类：

基本数据类型：                                                        引用数据类型：

① number 数字型                                                      ①object对象

②string 字符串型

③boolean 布尔型

④undefined 未定义型

⑤null 空类型

7.1 number 数字类型 

即我们数学中学习到的数字，可以是整数，小数，正数，负数

let age = 18 //整数

let price = 88.9 //小数

JavaScript中的正数，小数，负数等 统一称为 数字类型

注意事项：

①JS是弱数据类型，变量到底属于哪种类型，只有赋值后，才能确认

②Java是强数据类型，例如 int a = 3 必须是整数

算术运算符：

数字可以有很多操作，比如乘法*，除法/，加法+，减法-，等等，所以经常和算术运算符一起。数学运算符也叫算数运算符，主要包括加+，减-，乘*，除/，取余%（求模）

先乘除后加减，有括号先算括号里的

计算圆的面积：

//1.页面弹出输入框

let r = prompt （'请输入半径'） 
let PI = 3.14

//2.计算圆的面积

let S = PI * r * r

//3.页面输出

document.write (S)

NaN not a number:

NaN 代表一个计算错误，它是一个不正确的或者一个未定义的数学操作 所得到的结果

console.log('小明' - 2）//NaN

NaN是粘性的。任何对NaN的操作都会返回 NaN

console.log(NaN + 2) //NaN

7.2 String 字符串类型

通过单引号（' '），双引号（" "），反引号（` `）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号

let uname = '小明' //使用单引号
let gender = "男" //使用双引号
let goods = `小米` //使用反引号
let tel = '123456789' //看上去是数字，但是引号包裹了就是字符串
let str = '' //空字符串

注意事项：

1.无论单引号还是双引号必须成对使用

2.单引号/双引号可以互相嵌套，但是不可以自己嵌套自己

3.必要时可以使用转义符 \ ，输出单引号或双引号

console.log('我是"小明"') //我是"小明"
console.log('我是\'小明\'') //我是'小明'

字符串拼接：

场景：+ 运算符，可以实现字符串的拼接

口诀：数字相加，字符相连

console.log(1+1) //2
console.log('我是'+'小明') //我是小明

let uname = '忘情水'
let song = '刘德华' 
document.write(uname + song) //忘情水刘德华

let age = 22
document.write('我今年'+ 19) //我今年19
document.write('我今年'+ age) //我今年22
document.write('我今年'+ age + '岁了') //我今年22岁了

模板字符串：

使用场景：

①拼接字符串和变量

②在没有它之前，要拼接变量 比较麻烦

document.write('大家好，我叫' + name + '，今年' + age+ '岁')

语法：

① ` ` (反引号)

②内容拼接变量时，用${ }包住变量

let age = 20

document.write(`我今年${age}岁了`)

案例：页面输出用户信息案例

需求：页面弹出对话框，输入 年龄和姓名，页面显示：大家好 ，我叫xxx，今年xx岁了

let name = prompt ('请输入你的名字')
let age = prompt ('请输入你的年龄')

document.write(`大家好我叫${name}，今年${age}岁了`)

7.3 boolean 布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false (假)

let isCool = true
console.log(isCool) //true

7.4 undefined 未定义类型

未定义类型是比较特殊的类型，只有一个值undefined

什么 情况出现未定义类型？

只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined

let num
console.log (num) //undefined

7.5 null 空类型

JavaScript中的 null 仅仅是一个代表 “无”，“空” 或  “值未知” 的特殊值

null 和 undefined 的区别：

①undefined表示没有赋值

②null表示赋值，但是内容为空

let obj = null
console.log (obj) //null

null开发中的使用场景：

①官方解释：把null作为尚未创建的对象

②大白话：将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

console.log(undefined + 1) //NaN
console.log(null + 1) //1

7.6 检测数据类型

通过typeof关键字检测数据类型

typeof运算符可以返回被检测的数据类型。它支持两种语法形式：

①作为运算符：typeof x （常用的写法）

②函数形式：typeof （x)

let num = 10
console.log(typeof num) //number

let str = '你好'
console.log(typeof str) //String

let flage = false
console.log(typeof flage) //boolean

let un
console.log(typeof un) //undefined

let obj = null
console.log(typeof obj) //object

7.6隐式转换和显式转换

为什么需要转换类型？

JavaScript是弱数据类型：JavaScript也不知道变量到底属于哪种数据类型，只有赋值了才清楚。

注意：使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

console.log('10000' + '2000') //结果 100002000

隐式转换：

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换

规则：

① + 号两边只要有一个是字符串，都会把另一个转成字符串

②除了 + 以外的算术运算符，比如 - * / 等都会把数据转成数字类型

缺点：

①转换类型不明确，靠经验才能总结

小技巧：

 ① + 号作为正号解析可以转换成数字型

②任何数据和字符串相加结果都是字符串

console.log (1+1) //2
console.log (1+'1') //11
console.log (2-2) //0
console.log (2-'2') //0
console.log (+'123') //转换为数字类型

显式转换 ：

①Number（数据）

• 转成数字类型
• 如果字符串内容里有非数字，转换失败时内容为NaN即不是一个数字
• NaN也是number类型的数据，代表数字

let str = '123'
console.log (Number(str)) //123 数字类型
console.log (Number('pink')) //NaN

let num = prompt ('请输入年龄') //输入的都是字符串类型
console.log (Number(num))
//另一种写法
let num = Number(prompt('输入年龄'))
console.log (num) //数字类型
//另一种写法
let num = +prompt('输入年龄')
console.log (num) //数字类型

②parselnt（数据）：只保留整数

console.log (parseInt('12px')) //12
console.log (parseInt('12.78px')) //12
console.log (parseInt('abc12.78px')) //NaN

③parseFolat（数据）：可以保留小数

console.log (parseFloat('12px')) //12
console.log (parseFloat('12.48px'))  //12.48
console.log (parseFloat('ABC12.48px'))  //NaN

案例：计算两个数之和，并打印出来

let num1 = prompt('请输入第一个数')
let num2 = prompt('请输入第二个数')
alert(`两个数相加的和是：${Number(num1)+Number(num2)}`)
//另一种写法
let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
alert(`两个数相加的和是：${num1+num2}`)

8.运算符

8.1 赋值运算符：

对变量进行赋值的运算符，使用 "+=" 举例： 

let num = 1
num + 1
console.log(num) //1

let num = 1
num = num + 1
console.log(num) //2

//采取赋值运算符 

let num = 1
num += 1
console.log(num) //2

8.2 一元运算符：

众多的JavaScript的运算符可以根据所需表达式的个数，分为一元运算符，二元运算符，三元运算符

一元运算符：

let str = +'123'

二元运算符：

let num = 10 + 20

自增（自减）：

符号：++（--）

作用：让变量的值+1（让变量的值-1）

//前置自增：
//先自加再使用（++在前 先加）
let i = 1
console.log(++i + 2) //结果是4
//注意：i是2
// i 先自加1，变成2之后，在和后面的2相加

//后置自增
//先使用再自加 （++在后 后加）
let i = 1
console.log(i++ + 2) //结果是3
//注意：此时的i是1
//先和2相加，先运算输出完毕后，i再自加是2

8.3 比较运算符

比较运算符： 

① > ：左边是否大于右边

② < ：左边是否小于右边

③ >= ：左边是否大于等于右边

④ <= ：左边是否小于等于右边

⑤ == ：左右两边值是否相等

⑥ === ：左右两边是否类型和值都相等

⑦ !== ：左右两边是否不全等

比较结果为Boolean类型，只会得到 true 或 false

console.log(3 > 5)  //false
console.log(3 >= 3) //true
console.log(2 == 2) //true
//比较运算符有隐式转换 把'2' 转换为2 双等号值判断值
console.log(2 == '2') //true
console.log(undefined == null) //true
console.log(undefined === null) //false
console.log(2 === '2') //false
console.log(NaN === NaN) //false NaN不等于任何人包括它自己
console.log(2 !== '2') //true

字符串比较，是比较的字符对应的ASCII码

从左往右依次比较，如果第一位一样再比较第二位，以此类推

console.log('a' < 'b') //true
console.log('aa' < 'ab') //true
console.log('aa' < 'aac') //true

 注意：

NaN不等于任何值，包括它本身

尽量不要比较小数，因为小数有精度问题

不同类型之间比较会发生隐式转换

• 最终把数据隐式转换成number类型再比较
• 所以开发中，如果进行准确的比较我们更喜欢 === 或者 ！==

8.4 逻辑运算符

//逻辑与 一假则假
console.log(true && true) //true
console.log(false && true) //false
console.log(3 < 5 && 3 > 2) //true
console.log(3 < 5 && 3 < 2) //false
 
//逻辑或 一真则真
console.log(true || true) //true
console.log(false || true) //true
console.log(false || false) //false
 
//逻辑非 取反
console.log(!true) //false
console.log(!false) //true

 练习：用户输入一个，判断这个数能被4整除，但是不能被100整除

let num = +prompt('请输入整数')
alert(num % 4 === 0 && num % 100 !== 0）

8.5 运算符优先级

let a = 3 > 5 && 2 < 7 && 3 === 4
console.log(a) //false

let b = 3 <= 4 || 3 > 1 || 3 != 2
console.log(b) //true

let c = 2 === '2'
console.log(c) //false

let d = !c || b && a
//先算 b && a = false 再算 ！c || false = true || false = true
console.log(d)  //true

 9. if 语句

 if 语句有三种：单分支，双分支，多分枝

 9.1 单分支使用语法：

if (条件){
    满足条件要执行的代码
}

• 括号内的条件为true时，进入大括号里执行代码
• 除了 0 所有的数字都为真
• 除了空字符串  ' ' ,所有字符串都为真
• 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
• 如果大括号只有一个语句，大括号可以省略，但是，不提倡

案例：用户输入高考成绩，如果分数大于700，则提示恭喜考入清华大学

let i = +prompt('请输入高考成绩')
if (i >= 700){
alert('恭喜考入清华大学')
}

9.2 双分支if语法

if (条件){
    满足条件要执行的代码
}else{
    不满足条件执行的代码
}

案例：用户输入，用户名：岁岁 ，密码：123456，则提示登陆成功，否则提示登陆失败

let user = prompt('请输入用户名')
let password = prompt('请输入密码')
if（user === '岁岁' && password === '123456'){
     alert('登录成功')
}else{
     alert('登录失败')
}

案例：让用户输入年份，判断这一年是平年还是闰年

//能被四整除但不能被一百整除，或者被400整除的是闰年，否则都是平年
let year = +prompt('请输入年份')

if(year % 4 === 0 && yaer % 100 !== 0 || year % 400 === 0){
    alert(`${year}是闰年`)
}else{
    alert(`${year}不是闰年`)

9.3 多分支if语句

if (条件1){
     代码1
}else if (条件2){
     代码2
}else if (条件3){
     代码3
}else{
     代码n
}

释义：

1. 先判断条件1，若满足条件1就执行代码1，其他不执行
2. 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
3. 若依然不满足则继续往下判断，以此类推
4. 若以上条件都不满足，执行else里的代码n

注：可以写N个条件，但这里演示只写两个

案例：成绩90以上是优秀，70-90是良好，60-70是及格，60以下是不及格

let i = +prompt('请输入成绩')
if (i >= 90){
     alert('优秀')
}else if (i >= 70){
     alert('良好')
}else if (i >= 60){
      alert('及格')
}else{
     alert('不及格')
}

10.三元运算符

三元运算符使用语法

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

let sum = 3 < 5 ? 3 : 5
console.log(sum) //3

案例：用户输入2个数，控制台输出最大的值

let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
num1 > num2 ? alert(`最大值是${num1}`) : alert(`最大值是${num2}`)

案例：数字补零案例

let num = +prompt('请输入一个数字')
num = num < 10 ? '0' + num : num
alert(num)

//或者

let num = prompt('请输入一个数字')
num = num < 10 ? 0 + num : num
alert(num)

11.switch语句

swithc (数据) {
       case 值1：
           代码1
           break
       case 值2：
           代码2
           break
       default:
           代码n
           break
}

释义：

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等 === 的执行default里的代码

例：数据若跟值2全等，则执行代码2

swithc (2) {
       case 1：
           console.log('您选择的是1')
           break
       case 2：
            console.log('您选择的是2')
           break
       case 3：
            console.log('您选择的是3')
           break
       default:
             console.log('没有符合条件的')
           break
}
//您选择的是2

案例：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

let num1 = +prompt('请输入第一个数字')
let num2 = +prompt('请输入第二个数字')
let i = prompt('请输入 + - * / 运算符')
swithc (i) {
       case '+'：
           alert(`加法操作，结果是${num1 + num2}`)
           break
       case '-'：
            alert(`加法操作，结果是${num1 - num2}`)
           break
       case '*'：
           alert(`加法操作，结果是${num1 * num2}`)
           break
       case '/'：
            alert(`加法操作，结果是${num1 / num2}`)
           break
       default:
           alert(`请输入 + - * / `)
           break
}

12.while循环

while(循环条件){
     要重复执行的代码（循环体）
}

释义：

跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行的代码

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，知道括号内条件不满足，即跳出 

while循环需要具备三要素：

1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

let i = 1
while( i <= 3 ){
    document.write('我会循环三次')
    i++
}

案例：使用while循环，用户指定次数

//用户指定次数
let end = +prompt('请输入次数：')
let i = 1
while( i <= end){
    console('月薪过万 <br>')
    i ++
}

案例：页面输出1-100

let i = 1
while (i <= 100){
   document.write(`这是第${i}个数<br>`)
   i ++
}

案例：从1加到100的总和并输出

let i = 1
let sum = 0
while(i <= 100){
    sum = sum + i
    i ++
}
console.log(sum)

案例：计算1-100之间的所有偶数和

let i = 1
let sum = 0
while( i <= 100){
  if( i % 2 === 0){
      sum = sum + i
   }
  i++
}
console.log(sum)

12.1循环结束

目标：能说出continue和break的区别

循环结束：

• break：退出循环
• continue：结束本次循环，继续下次循环

 

 案例：页面弹出对话框，’你爱我吗‘，如果输入’爱‘，则结束，否则一直弹出对话框

while (true){
   let i = prompt('你爱我吗')
   if (i === '爱'){
   break
   } 
} 

案例：简易ATM取款机案例

let money = 100
while (true){
let i = +prompt('请输入你要使用的功能：<br>
                 1.存款 <br>
                 2.取款 <br>
                 3.查看余额 <br>
                 4.退出 <br>')

//退出
if (i === 4){
    break
}

switch( i ){

//存款
    case 1:
    let cun = +prompt('请输入要存款的金额 ')
    money =  money + cun 
    break

//取款
    case 2: 
    let qu = +prompt('请输入要取款的金额 ')
    money =  money - qu
    break

//查看余额
    case 3:
    alert(`您的银行卡余额是${money}`)
    break

}

12.2 if 多分支语句和 switch 的区别：

1.共同点：

• 都能实现多分支选择，多选一
• 大部分情况下可以互换

2.区别

• switch...case语句通常处理case为比较确定值的情况，而if..else语句更加灵活，通常用于范围判断（大于，等于某个范围）
• switch语句进行判断后直接执行到程序的语句，效率更高，而if..else语句有几种判断条件，就得判断多少次
• switch一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果

3.结论

• 当分支比较少时，用if..else语句执行效率高
• 当分支比较多时，switch语句执行效率高，而且结构更清晰

13. for语句

作用：重复循环代码

for(变量起始值；终止条件；变量变化量){
//循环体
}

//利用for循环输出三句话
for(let i = 1; i <= 3; i ++){
   document.write('月薪过万')
}

案例：利用for循环输出1-100岁

for(let i = 1;i <= 100; i++){
document.write(`第${i}个数`)
}

案例:求1-100之间所有的偶数和

let sum = 0
for(let i = 1 ; i <= 100 ; i++){
    if(i % 2 === 0){
    sum += i
  }
}
document.write(sum)

13.1 for 语句循环数组

需求：请将 数组 [ ‘马超’，‘赵云’，‘张飞’，‘关羽’]依次打印出来

//必须从0开始，因为数组索引号从0开始
let arr = ['马超','赵云','张飞','关羽']
for(let i = 0 ; i <= arr.length - 1 ; i++ ){
   console.log(arr[i])
}

13.2退出循环

• continue退出本次循环，一般用于排除或者跳过某一选项的时候，可以使用continue
• break退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用

了解：

while（true）来构造“无限”循环，需要使用break退出循环

for（ ； ；）也可以来构造“无线”循环，同样需要使用break退出循环

 for循环和while循环有什么区别：

• 当如果明确了循环的次数的时候推荐使用for循环
• 当不明确循环的次数的时候推荐使用while循环

13.3循环嵌套

for(外部声明记录循环次数的变量；循环条件 ；变化值){
    for(内部声明记录循环次数的变量； 循环条件 ；变化值){
        循环体
     }
}
//一个循环里再套一个循环，一般用在for循环里

案例：假如每天记住五个单词，三天后一共能记住多少单词

for(let i = 1; i <= 3; i ++){
     console.log(`第${i}天`)
   for(let a = 1; a <= 5; a ++){
   console.log(`记住第${a}个单词`)
   }  
}

案例：用户输入行和列，输出对应的星星列队

let row = prompt('请输入行数：')
let col = prompt('请输入列数：')
for(let i = 1, i <= row; i ++){
   for(let a = 1; a <= col; a++){
    document.write('⭐')
    }
   document。write('<br>')
}

案例：打印倒三角形星星

for(let i = 1; i <= 5; i++){
   for(let a = 1; a <= i ; a ++){
    document.write('⭐')
    }
   document.write('<br>')
}

案例：打印九九乘法表

for(let i = 1; i <= 9; i++){
   for(let a = 1; a <= i  ; a ++){
    document.write(`${a} X ${i} = ${i*a}`)
    }
   document.write('<br>')
}

14.数组

数组：（Array）是一种可以按顺序保存数据的数据类型

为什么要数组？

   如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

声明数组：

let 数组名 = [数据1，数据2，...,数据n]

let arr = new Array(数据1，数据2，...数据n)

取值语法：

数组名[下标]

14.1 遍历数组

用循环把数组中每个元素都访问到，一般会用for循环遍历 

for(let i = 0 ; i < 数组名.length; i ++){
    数组名[i]
}

案例 ：求数组[2,6,1,7,4]里面的所有元素的和以及平均值

let arr = [2,6,1,7,4]
let sum = 0
foe(let i = 0; i < arr.length ; i++ ){
   sum += arr[i]
}
console.log(`数组的和 的结果是：${sum}`)
console.log(`数组平均值：${sum / arr.length}`)

案例：求数组[2,6,1,77,52,25,7]中的最大值

 ​​​​

 

let arr = [2,6,1,7,4]
//max里面需要存的是最大值
let max = arr[0]
//遍历数组 ，因为arr[0]已经赋值给max了，所以从i = 1 开始遍历
for(let i = 1; i < arr.length；i++){
    //如果max，比数组元素里面的值小，我们就要把这个数组元素赋值给 max
    if(max < arr[i]){
      max = arr[i]
    }
}
console.log(max)

 14.2 数组操作-修改

let arr = []
console.log(arr)  //[]
console.log(arr[0])  //undefined
arr[0] = 1
arr[1] = 5
console.log(arr) //[1,5]


let arr = ['小李','小明','小梅']
//修改
arr[0] = '小江' 
console.log(arr)  //['小江','小明','小梅']

//给所有的数组元素后面加个老师 修改
for (let i = 0; i < arr.length; i ++){
   arr[i] = arr[i] + '老师' 
}
console.log(arr) //['小李老师','小明老师','小梅老师']

14.3 数组操作-新增

数组push( ) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

arr.push(元素1，...元素n)

let arr = ['pink','hotpink']
//新增 从后加
console.log(arr.push('deeppink')) //3
console.log(arr) // ['pink','hotpink','deeppink']

arr.unshift（新增的内容）方法将一个或多个元素添加到数组的开头，并返回该数组的长度

let arr = ['pink','hotpink']
//新增 从前加
arr.unshift('deeppink')
console.log(arr) // ['deeppink','pink','hotpink']

案例：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来。放入新数组

let arr = [2,0,6,1,77,0,52,0,25,7]
let newArr = []
for(let i = 0; i < arr.length; i++){
   if(arr[i] >= 10){
     newArr.push(arr[i]) 
   }
}
console.log(newArr)

案例：将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉后，形成一个不包含0的新数组

let arr = [2,0,6,1,77,52,0,25,7]
let newArr = []
for(let i = 0; i < arr.length; i++){
    if(arr[i] !== 0){
    newArr.push(arr[i])
    }
}
console.log(newArr)

14.4数组操作-删除

数组.pop( )方法从数组中删除最后一个元素，并返回该数组的值

arr.pop( )

let arr = ['red','green']
arr.pop( )
console.log(arr) //['red']

数组.shift( )方法从数组中删除第一个元素，并返回该数组的值

let arr = ['red','green']
arr.shift( )
console.log(arr) //['green']

数组.splice( )方法 删除指定元素

start起始位置：指定修改的开始位置（从0计数）

deleteCount:表示要移除的数组的个数。可选的，如果省略则默认从指定的起始位置删除到最后

arr.splice(start,deleteCount)
arr.splice(起始位置，删除几个元素)

let arr = ['red','green','blue']
arr.splice(1,1)
console.log(arr) //['red','blue']

15.冒泡排序

let arr = [5,4,3,2,1]
for(let i = 0; i < arr.length-1 ; i ++){
   for(let a = 0 ; a < arr.length-i-1 ; a++){
       if(arr[a] > arr[a+1]){
         let temp = arr[a]
         arr[a] = arr[a+1]
         arr[j+1] = temp
        }
   }
} 

 arr.sort( ) 将数组元素从小到大排序

//升序
arr.sort(function(a,b){
  teturn a - b
})

//降序
arr.sort(function(a,b){
  teturn b - a
})

16.函数

打印多个九九乘法表

//声明
function sheet99 (){
    for(let i = 1; i <= 9; i++){
       for(let a = 1; a <= i  ; a ++){
            document.write(`${a} X ${i} = ${i*a}`)
        }
    document.write('<br>')
    }
}

//调用
sheet 99 ()
sheet 99 ()

函数：function，是被设计为执行特定任务的代码块

说明：

•  函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用
• 比如alert（），prompt（），console.log（）都是一些js函数，只不过已经封装好了，可以直接使用的

函数的声明语法：

function 函数名(){
    函数体
}

函数的命名规范：

• 和变量名基本一致
• 尽量小驼峰式命名法
• 前缀应该为动词
• 命名建议：常用动词约定

动词	含义
can	判断是否可执行某个操作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数的调用语法：

//函数调用，这些函数体内的代码逻辑会被执行
 函数名 ()

注意：声明的函数必须调用才会真正被执行，使用（）调用函数

16.1函数传参

function 函数名(参数列表){
     函数体
}

//例如
function get(num1,num2){
     document.write(num1 + num2)
}

参数列表：

• 传入数据列表
• 声明这个函数需要传入几个数据
• 多个数据用逗号隔开

 

 函数传参-参数默认值：

形参：可以看做变量，但是如果变量不给值，默认是什么？

undefined

但是如果做用户不输入实参，刚才的案例，则出现undefined + undefined 结果是什么？

NaN

我们可以改进一下，用户不输入实参，可以给形参默认值，可以默认为0，这样程序更严谨 ，可以如下操作：

function getSum(x = 0 , y = 0){
    document.write(x + y)
}
getSum() //结果是0，不是NaN
getSum(1,2) //结果是3

 说明：这个默认值只会在缺少实参参数传递时，才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined

案例：求学生总分,学生的分数是一个数组，计算每个学生的总分

//自己写的
let arr = [60,80,70,90,100,85,75,55]
let newArr = 0
function sumArr (){
    for(let i = 0; i < arr.length; i ++){
        newArr += arr[i]
    }
console.log(newArr)
}
sumArr()

//pink老师写的
function getArrSum(arr = 0){
    let sum = 0
    for(let i = 0;i < arr.length; i ++){
        sum += arr[i]
    }
console.log(sum)
}
getArrSum([60,80,70,90,100,85,75,55])
getArrSum([60,33,59,77,55])
getArrSum()

 案例：求n~m的累加和

function getSum(n = 0, m = 0 ){
    let sum = 0
    for(let i = n; i <= m; i ++){
        sum += i
    }
console.log(sum)
}

//getSum(3,5)

let num1 = +prompt('请输入第一个值：')
let num2 = +prompt('请输入第二个值：')
getSum(num1,num2)

16.2函数返回值

 当函数需要返回数据出去时，用return关键字

function fn() {
    return 20
}
//相当于执行了 fn() = 20  fn()是调用者 
//console.log(fn())

let re = fn()
console.log(re)

求和函数的写法：

function getTotaPrice (x,y){
    return x + y
}
let sum = getTotaPrice (1,20)
console.log(sum)

细节：

• 在函数体中使用return关键字能将内部的执行结果交给函数外部使用
• return后面代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写
• return函数可以没有return，这种情况函数默认返回值为undefined 

 案例：求任意两个数中的最大值，并返回

function getMax (x,y) {
    return x>y ? x : y
}
let max = getMax(1,2)
console.log(max)

案例：求任意数组中的最大值并返回这个最大值

function maxArr (arr = []) {
//先准备一个max变量存放的第一个值
    let max = arr [0]
    for(let i = 0; i < arr.length; i++){
        if (max < arr[i]){
            max = arr[i]
        }
    }
//返回值
return max
}
let max = maxArr([10,20,30,25,60])
console.log(max)

案例：求最大值和最小值

function getArr (arr = []){
    let max = arr[0]
    let min = arr[0]
    for(let i = 0; i < arr.length; i ++){
        if(max < arr[i]){
            max = arr[i]
        }
          if(min > arr[i]){
            min = arr[i]
        }
    }
    return newArr = [max,min]
}
let endArr = getArr([10,30,50,70,90])
console.log(`最大值是${newArr[0]}`)
console.log(`最小值是${newArr[1]}`)

函数细节补充：

• 两个相同的函数后面的会覆盖前面的函数
• 在JavaScript中实参的个数和形参的个数可以不一致
•         如果形参过多，会自动填上undefined
•         如果实参过多，那么多余的实参会被忽略
• 函数一旦碰到return就不会再往下执行了，函数的结束用return 

16.3作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域

 

//全局变量
let num = 10
console.log(num)
function fn(){
    console.log(num)
}
fn()

//局部变量
function fun(){
    let str = 'pink'
}
console.log(str)

特殊情况：如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推

function fn() {
    num = 10 //全局变量来看
}
fn ()
console.log(num) //10

 函数内部的形参可以看作是局部变量

function fun(x,y){
    console.log(x)
}
fun(1,2) // 1
console.log(x) // x is not defined

就近原则

let num = 10
function fn() {
    let num = 20
    console.log(num) //20
}
fn()

变量的访问原则：

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 访问原则：在能够访问到的情况下 先局部，局部没有再找全局

16.4匿名函数

 使用方式：

• 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用，我们将这个称为函数表达式

let fn = function () {
     函数体
}

//函数表达式
fn(1,2) //错误
let fn = function (x,y){
    console.log(x+y)
}

//函数表达式和具名函数的不同 function fn() {}
//1.具名函数的调用可以写到任何位置
//2.函数表达式，必须先声明表达式，后调用
function fun () {
    console.log(1)
}
fun()

• 立即执行函数（结尾加；号）

//方式一
(function () {console.log(11) }) ()；
//第二个小括号相当于调用函数
(function(x,y) {
    console.log(x + y)
})(1,2)；


//方式二
(function () {console.log(11)} () )；
(function(x,y) {
    console.log(x + y)
} (1,3))；

案例：转换时间案例

let num = +prompt('请输入秒数')
function getnum (t) {
   let h = parseInt(t/60/60%24)
   let m = parseInt(t/60%24)
   let s = parseInt(t%60)
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    return `转换为${h}时${m}分${s}秒`
}
let time = getnum(num)
document.write(time)

17.逻辑中断

function fn(x,y){
//fn()中是空的即为undefined，所以x = x || 0 即为 0 || 0 取最后一个0
    x = x || 0 
    y = y || 0
    console.log(x + y)
}
fn() //0
fn(1,3) //4

17.1 转换为Boolean型：

显式转换：

1.Boolean（内容）

记忆：" ",undefined,null,false,NaN转换为布尔值后都是false，其余则为true

隐式转换：

1.有字符串的加法“ ” + 1，结果都是拼接字符串

2.减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串“ ”转换为0

3.null经过数字转换之后会变为0

4.undefined经过数字转换之后会变为NaN

18.对象

对象（object）：JavaScript里的一种数据类型

可以理解为是一种无序的数据集合，注意数组是有序的数据结合

let 对象名 = {
    属性名：属性值，
    方法名：函数
}
//或者
let 对象名 = new Object()

let goods = {
    name:'小米10青春版'
    num：'100012816024'
    weight:'0.55kg'
    address:'中国大陆‘
}

 18.1对象使用：

对象本质是无序的数据集合，操作数据无非就是增 删 改 查 语法：

 属性-查：

声明对象，并添加了若干属性后，可以使用，获得对象中属性对应的值，称之为访问属性

语法：对象名.属性

简单理解就是获得对象里面的属性值

let obj = {
    name:'小米10青春版'
    num：'100012816024'
    weight:'0.55kg'
    address:'中国大陆‘
}
console.log(obj.name)

第二种写法

let obj = {
    'goods-name':'小米10青春版'
}
//查的另一种属性
//对象名['属性名']
console.log(obj['goods-name'])

属性-改：

语法：对象名.属性 = 新值

let obj = {
    name:'小米10青春版'
    num：'100012816024'
    weight:'0.55kg'
    address:'中国大陆‘
}
obj.num = '123456789'

属性-增：

语法：对象名.新属性 = 新值

let obj = {
    name:'小米10青春版'
    num：'100012816024'
    weight:'0.55kg'
    address:'中国大陆‘
}
obj.price = '1200元'

属性-删：

语法：delete 对象名.属性

let obj = {
    name:'小米10青春版'
    num：'100012816024'
    weight:'0.55kg'
    address:'中国大陆‘
}
delete obj.name

18.2 对象的方法

let obj = {
    name = '刘德华'，
    song : function(x,y){
        //console.log('你好')
        console.log(x + y)
    }
}
//方法调用 对象名.方法名
obj.song（1,2）

对象中的方法：

• 1.方法是由方法名和函数两部分构成，他们之间使用 ： 分隔
• 2.多个属性之间使用英文 ，分隔
• 3.方法是依附在对象中的函数
• 4.方法名可以使用 “ “或 ' '，一般情况下省略，除非名称遇到特殊符号如空格，中横线等
• 5.声明对象，并添加若干方法后，可以使用  . 调用对象中函数，称之为方法调用
• 6.也可以添加形参和实参 

18.3遍历对象

let obj = {
    uname:'pink',
    age:18,
    gender:'男'
}
//遍历对象
for (let k in obj) {
    console.log(k) //打印 ： 'uname' 'age' 'gender'
    //console.log(obj.uname)
    //console.log(obj.k)
    //console.log(obj.'uname')
    //console.log(obj['uname'])
    console.log(obj[k])
}

遍历数组中的对象：

 

 18.4内置对象

内置对象-Math

作用：提供了一系列做数学运算的方法

random	生成0-1之间的随机数
ceil	向上取整
floor	向下取整
max	找最大值
min	找最小数
pow	幂运算
abs	绝对值
round	四舍五入（-1.1取整为-1，-1.51取整为-2）
parseInt	取整函数，可以转换字符串为数字
文档	Math官方文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math

内置对象-生成任意范围随机数

Math.random（）随机数函数，返回一个0-1之间，并且包括0不包括1的随机小数[0,1)

如何生成0-10的随机数？

Math.floor（Math.random（）* （10 + 1））

let arr = ['green','pink','blue']
let random = Math.floor(Math.random()*arr.length)
console.log(arr[random])

如何生成5-10的随机数？

Math.floor（Math.random（）* （5 + 1））+ 5

如何生成N-M之间的随机数？

Math.floor（Math.random（）* （M - N + 1））+ N

function getRandom (N,M){
    Math.floor（Math.random（）* （M - N + 1））+ N
}
console.log(getRandom(4,8))

案例：从数组中随机抽取一个人名

let arr = ['小米','小明','小徐','小麦','小天','小王','小胖']
let random = Math.floor(Math.random()*arr.length)
document.write(arr[random])

案例：从数组中随机抽取一个人名,但是不允许重复显示

let arr = ['小米','小明','小徐','小麦','小天','小王','小胖']
let random = Math.floor(Math.random()*arr.length)
document.write(arr[random])
arr.splice(random,1)

案例：程序随机生成1~10之间的一个数字，用户输入一个数字。如果大于（小于）该数=数字，就提示，数字猜大（小）了。如果猜对了，就提示猜对了，结束程序

function getRandom (N,M){
    return Math.floor(Math.random()*(M - N + 1)) + N
}
let random = getRandom(1,10)
//确定次数用for，不确定次数用while
while(true){
    let num = +prompt('请输入你要猜的数字')
    if(num > random){
        console.log('猜大了')
    }else if (num < random){
        console.log('猜小了')
    }else{
        console.log('猜对了')
        break
    }
}

设置猜测次数

function getRandom (N,M){
    return Math.floor(Math.random()*(M - N + 1)) + N
}
let random = getRandom(1,10)
//确定次数用for，不确定次数用while
let flag = true //开关变量
for(let i = 1 ; i <= 3; i++){
    let num = +prompt('请输入你要猜的数字')
    if(num > random){
        console.log('猜大了')
    }else if (num < random){
        console.log('猜小了')
    }else{
        flag = false
        console.log('猜对了')
        break
    }
}
if(flag){
    alert('次数用完了')
}

案例：生成随机颜色

function getRandomColor(flag = true){
    if(flag){
    let str = '#'
    let arr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']
//循环六次，抽取不同的字符
    for(let i = 1; i <= 6; i ++){
        let random = Math.floor(Math.random()*arr.length)
        str += arr[random]
    }
    return str
    }else{
        let r = Math.floor(Math.random()*256)
        let g = Math.floor(Math.random()*256)
        let b = Math.floor(Math.random()*256)
        return `rgb(${r},${g},${b})`
    }
}
console.log(getRandomColor(false))
console.log(getRandomColor(true))
console.log(getRandomColor())

二，APIs

 1.声明变量const

const优先，尽量使用const，原因是：

• const语义化更好
• 很多变量我们声明的时候就知道它不会被更改了，那为什么不使用const呢
• 实际开发中也是，比如react框架，基本const
• 有了变量先给const，如果发现它之后是要被修改的，再改为let

以下情况可以把let改为const：（因为它们的值没有变过）

let num1 = +prompt('请输入第一个数')
let num2 = +prompt('请输入第二个数')
alert(`两个数相加的和是：${num1+num2}`)


console.log('我是'+'小明') //我是小明
let uname = '忘情水'
let song = '刘德华' 
document.write(uname + song) //忘情水刘德华

 以下情况不可以把let改为const：（因为变量进行了重新赋值）

let num = 1
num = num + 1
console.log(num)

for(let i = ; i < nums.length; i++){
    document.write(nums[i])
}

以下情况可以把let改为const：

let arr = ['red','green']
arr.push('pink')
console.log(arr)

let person = {
    unmae:'pink老师',
    age: 18,
    gender:'女 '
}
person.address = '武汉黑马'
console.log(person)

  以下情况不可以把let改为const：

const names = []
names = [1,2,3]


const obj = {}
obj = {
    uname:'pink老师 '
}

 

 2.DOM树和DOM对象

作用：就是使用JS取去操作HTML和浏览器

分类：DOM(文档对象模型),BOM(浏览器对象模型)

2.1DOM是什么

DOM（Document object model - 文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来操作网页的功能

作用：开发网页内容特效和实现用户交互

 DOM对象：

<body>
    // 在HTML中叫标签 
    <div>123</div> 
    <script>
        const div = document.querySelector('div')
        //console.dir( )用来打印对象
        //在JS中叫对象
        console.dir(div)
    </script>
</body>

 2.2获取DOM元素

目标：能 查找/获取DOM对象

提问：我们想要操作某个标签首先做什么？

• 肯定首先选中这个标签，跟css选择器类似，选中标签才能操作
• 查找DOM元素就是利用JS选择页面中的标签元素

学习路径：

• 根据css选择器来获取DOM元素（重点）
• 其他获取DOM元素方法 

根据css选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

语法：

document.querySelector('css选择器')

返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象 

例如：

<body>
    <div class="box">123</div> 
    <div class="box">abc</div>
    <div id="nav">哈哈</div>
    <script>
    //获取的是<div class="box">123</div> 
        const box = document.querySelector('div')
        const box = document.querySelector('.box')
    //获取的是<div id="nav">哈哈</div>
        const nav = document.querySelector('#nav')
    </script>
</body>

<body>
<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
    <li>357</li>
    <li>159</li>
</ul>
    <script>
    //获取第一个小li
    const li = document.querySelector('ul li:first-child')
    console.log(li)
    </script>
</body>

2.匹配选择的多个元素

语法：

document.querySelectorAll('CSS选择器')

返回值：CSS选择器匹配的NodeList对象集合

<body>
<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
    <li>357</li>
    <li>159</li>
</ul>
    <script>
    const lis = document.querySelectorAll('ul li')
    console.log(lis)
    </script>
</body>

得到的是一个伪数组 ：

• 有长度有索引号的数组
• 但是没有pop（），push（）等数组方法
• 想要得到里面的每一个对象，则需要遍历（for）的方式获得

<body>
<ul class="nav">
    <li>123</li>
    <li>456</li>
    <li>789</li>
    <li>357</li>
    <li>159</li>
</ul>
    <script>
    const lis = document.querySelectorAll('.nav li')
    for (let i = 0; i <lis.length ; i ++){
        console.log(lis[i])
    }
    </script>
</body>

 3.其他获取DOM元素方法

//根据 id获取一个元素
document.getElementById('nav')

//根据 标签获取一类元素 获取页面内 所有div
document.getElementsByTagName('nav')

//根据 类名获取元素 获取页面 所有类名为w的
document.getElementsByClassName('nav')

2.3修改元素内容

元素innerText属性

• 将文本内容添加/更新到任意标签位置
• 显示纯文本，不解析标签

    <div class="box">我是文字的内容</div>
    <script>
        //修改文字内容 对象.innerText属性
        const box = document.querySelector('.box')
        console.log(box.innerText) //获取文字内容
        box.innerText = '这是更改完的内容' //修改文字内容
        box.innerText = '<strong>这是更改完的内容</strong>' //不解析标签
    </script>

元素innerHTML属性

• 将文本内容添加/更新到任意标签位置
• 会解析标签，多标签建议 使用模板字符

    <div class="box">我是文字的内容</div>
    <script>
        //修改文字内容 对象.innerHTML属性
        const box = document.querySelector('.box')
        console.log(box.innerHTML) //获取文字内容
        box.innerHTML = '这是更改完的内容' //修改文字内容
        box.innerHTML = '<strong>这是更改完的内容</strong>' //解析标签，文字加粗
    </script>

案例：年会抽奖案例

<!DOCTYPE html>
<html lang="en">

<head>
  <title>年会抽奖</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="one"></span></h1>
    <h3>二等奖：<span id="two"></span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
    //一等奖
    const personArr = ['周杰伦','刘德华','小米','小明','小徐','小麦','小天','小王','小胖']
    const random = Math.floor(Math.random()*personArr.length)
    const one = document.querySelector('#one')
    one.innerHTML = personArr[random]
    personArr.splice(random,1)
    //二等奖
    const random2 = Math.floor(Math.random()*personArr.length)
    const two = document.querySelector('#two')
    two.innerHTML = personArr[random2]
    personArr.splice(random2,1)
    //三等奖
    const random3 = Math.floor(Math.random()*personArr.length)
    const three = document.querySelector('#three')
    three.innerHTML = personArr[random3]
    personArr.splice(random3,1)
  </script>
</body>

</html>

2.4操作元素属性

还可以通过js设置/修改标签元素属性，比如通过src更换图片

最常见的属性比如：herf，title，src等

语法：

对象.属性 = 值

cosnt pic = document.querySelector('img')
pic.src = './images/b02.jpg'
pic.title = '解释图片的文字'

案例：刷新页面，图片随机更换

  <img src="./images/1.jpg" alt="">
  <script>
    function getRandom(N, M) {
     return Math.floor(Math.randon() * (M - N + 1)) + N
    }
    const img = document.querySelector('img')
    const random = getRandom(1,6)
    img.src = `./images/${random}.jpg`

  </script>

2.5操作元素样式属性

通过style属性操作css

语法：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .box {
      width: 840px;
      height: 420px;
      background-color: palegreen;
    }
  </style>
</head>

<body>
<div class="box"></div>
  <script>
    //获取元素
    const box = document.querySelector('.box')
    //修改样式属性 对象.style.样式属性 =  '值' 别忘了跟单位 
    box.style.width = '300px'
    //多组单词采取 小驼峰命名法
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
  </script>
</body>

</html>

案例：更换背景图片

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    body {
      background: url(./images/1.jpg) no-repeat top center/cover ;
    }
  </style>
</head>

<body>
<div class="box"></div>
  <script>
    function getRandom(N, M) {
     return Math.floor(Math.randon() * (M - N + 1)) + N
    }
    const random = getRandom(1,10)
    document.body.style.backgroundImage = `url(./images/${random}.jpg)`

  </script>
</body>

</html>

通过类名（className）修改样式

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式

注意：

• 由于class是关键字，所以使用className去代替
• className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

语法：

元素.className = 'cative'

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .nav{
      color:red;
    }
    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
    }
  </style>
</head>

<body>
  <div class="nav">123</div>
  <script>
    const div = document.querySelector('div')
    div.className = 'nav box'
  </script>
</body>

</html>

 通过classList操作类控制css

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .box {
      width: 300px;
      height: 300px;
      color: #000;
    }
    .active{
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">123</div>
  <script>
    const box = document.querySelector('.box')
    //追加类 add() 类名不加点，并且是字符串
    box.classList.add ('active')
    //删除类 remove() 类名不加点，并且是字符串
     box.classList.remove ('box')
    //切换类 toggle() 有就删掉，没有就加上
     box.classList.toggle ('active')
  </script>
</body>

案例：轮播图随机版

准备一个数组对象，里面包含详细信息

随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色，以及文字内容

利用这个随机数字，让小圆点添加高亮的类（addClass）利用css结构伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    //1.获取随机数
    const random = Math.floor(Math.random()*sliderData.length)

    //2.获取图片路径
    const img = document.querySelector('.slider-wrapper img')
    //修改图片 路径
    //操作元素属性:对象.属性 = 值
    img.src = sliderData[random].url

    //3.获取标题路径
    const p = document.querySelector('.slider-footer p')
    //修改p标签的内容
    //将文本内容添加/更新到任意标签位置 使用innerHTML
    p.innerHTML = sliderData[random].title

    //4.获取背景颜色
    const footer = document.querySelector('.slider-footer')
    //修改背景颜色 
    footer.style.backgroundColor = sliderData[random].color

    //5.获取小圆点 因为数组random是0-7 小圆点是1-8 所以random应用到这里需要+1
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    //让当前这个li 添加active这个类
    li.classList.add ('active')
  </script>
</body>

</html>

2.6操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的，跟其他的标签属性没有任何区别

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

<!DOCTYPE html>
<html lang="en">

<head>
  <style>

  </style>
</head>

<body>
  <input type="text" value="电脑">
  <script>
    //获取元素
    const uname = document.querySelector('input')
    //获取值 获取表单里的值 用的 表单.value
    console.log(uname.value) //电脑
    console.log(uname.innerHTML) //innerHTML 得不到表单的内容
    //设置表单的值
    uname.value = '我要买电脑'
    console.log(uname.type) //text
    uname.type = 'password' //修改成password不可见的属性
  </script>
</body>

</html>

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果是false代表移除了该属性

比如：disabled，checked，selected

<!DOCTYPE html>
<html lang="en">

<head>
  <style>

  </style>
</head>

<body>
  //checked默认勾选
  <input type="checkbox" >
  //disable属性 禁用按钮 
  <button>点击</button>
  <script>
    const inp = document.querySelector('input')
    console.log(inp.cjecked) //false
    // 用于一键全选功能 只需要遍历把每一个input.checked变为true即可
    inp.checked = true

    //获取按钮
    const button = document.querySelector('button')
    console.log(button.disabled) //默认false 不禁用
    button.disabled = true //启动true 禁用
  </script>
</body>

</html>

2.7自定义属性

标准属性：标签天生自带的属性，比如class id title等，可以直接使用点语法操作 比如：disabled，checked，selected等

自定义属性：

• 在html中推出来了专门的data-自定义属性
• 在标签上一律以data-开头
• 在DOM对象上一律以dataset对象方式获取

<body>
<div class="box" data-id="10">盒子</div>
<script>
  const box = document.querySelector('.box')
  console.log(box.dataset.id)
</script>
</body>

例子：