第五天
一、js初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>点击我变成粉色</button>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', () => {
btn.style.backgroundColor = 'pink'
})
</script>
</body>
</html>
二、js引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 内部
// prompt('请输入您的年龄:')
</script>
<!-- 外部 -->
<script src="./03-外部js.js">
</script>
</body>
</html>
外部js
prompt('年龄:')
三、输入输出语言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 输入语句
// prompt('请输入您的密码:')
// 打印到页面
document.write('你们真是小天才')
// 可以识别标签
document.write('<strong>你们真是小天才</strong>')
// 控制台输出语句
console.log('我现在要在控制台输出')
</script>
</body>
</html>
四、变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量:盒子----存储数据的容器 数据本身不是变量
// 变量的声明:
// let 变量名 var 变量名
// let age
// // 变量赋值
// age = prompt('请输入您的年龄:')
// age = 33
// console.log(age)
// 变量的初始化
// let uname = prompt('请输入您的用户名:')
// console.log(uname)
// 同时定义多个变量
// let uname = 'zs', age = 21
// console.log(uname, age)
let age = prompt('请输入年龄:')
document.write(age)
</script>
</body>
</html>
五、变量命名规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量命名规范:1、有效符号(大小写字母、数字、下划线、$)
// 2、关键字、保留字不能用于变量命名
// 3、不以数字开头
// 4、尽量用有意义的变量名
// 5、驼峰命名法 userName
</script>
</body>
</html>
六、let和var的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 可以多次声明同一变量
console.log(age)
// var age
let age
</script>
</body>
</html>
七、const常量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 常量名大写 常量无法更改
const PI = 3.14
// PI = 4.456
console.log(PI)
</script>
</body>
</html>
八、数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
let uname = 21
uname = 'gouxin'
console.log(typeof (uname))
</script>
</body>
</html>
九、基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 21.21312
let b = 33
console.log(a)
console.log(a + 2)
console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)
console.log(a % 2)
</script>
</body>
</html>
十、字符串类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let uname1 = 'nnnsns'
// console.log(typeof (uname1))
// let uname2 = "nnnsns"
// console.log(typeof (uname2))
// let uname3 = "nnn'gouxin'sns"
// console.log(typeof (uname3))
// let uname4 = 'nnn"gouxin"sns'
// console.log(typeof (uname4))
// 字符串拼接用+
let a = +prompt("请输入num1")
let b = +prompt("请输入num2")
// alert 警示框
alert(a + b)
// 模板字符串
// let uname = prompt("请输入名字:")
// let age = prompt("请输入年龄:")
// document.write('你叫' + uname + ',今年' + age + '岁了')
// document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
</script>
</body>
</html>
十一、布尔类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(typeof (3 < 5))
// undefinded 声明,未赋值
// null NaN not a number
console.log(undefined + 1)
console.log(null + 1)
</script>
</body>
</html>
十二、显示转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('num1')
let b = +prompt('num2')
console.log(Number(a) + Number(b))
console.log(typeof (+a))
let c = '200.9875px'
console.log(parseInt(c))
console.log(parseFloat(c))
</script>
</body>
</html>
十三、运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// = 赋值运算符
// let a = 21
// a = 33
// a += 4 // a = a + 4
// a *= 2 //a = a * 2 74
//a -= 3 //a = a - 3
// a /= 2 //a = a / 2 35.5
// alert(a)
// let b = a++ //先赋值,再自增
// alert(b)
// alert(a) //36.5
// b = ++a //先自增,再赋值
// alert(b)
// 比较运算符
// > < >= <= == ===
let num1 = 2
let num2 = '2'
alert(num1 == num2)
alert(num1 === num2)
// == (隐式转换)只比较数值,将字符串转换为数字类型后进行比较 === 即比较数值,也比较类型
</script>
</body>
</html>
十四、逻辑运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// && || !
// alert(4 > 3 && 3 < 5) //两真为真,一假则假
// alert(4 < 3 || 3 < 5) //一真则真 全假则假
// alert(!true)
alert(!(4 < 3))
</script>
</body>
</html>
十五、单分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = 11
// if(条件){
// 执行的代码
// }
if (age < 18) {
document.write('你是小弟弟,不要乱跑')
}
</script>
</body>
</html>
十六、双分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入您的年龄:')
if (age <= 18) {
alert('你不要乱跑')
} else {
alert('恭喜你,成年了')
}
</script>
</body>
</html>
十七、闰年案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// year % 4 === 0 && year % 100 !== 0 || year % 400 === 0
let year = +prompt('请输入年份:')
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
alert('闰年')
} else {
alert('平年')
}
</script>
</body>
</html>
十八、多分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('age:')
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
</script>
</body>
</html>
十九、三元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入您的年龄:')
// if (age <= 18) {
// alert('你不要乱跑')
// } else {
// alert('恭喜你,成年了')
// }
// 判断条件?条件成立时执行的语句:条件不成立时执行的语句
age <= 18 ? alert('你不要乱跑') : alert('恭喜你,成年了')
</script>
</body>
</html>
二十、求最大值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('请输入num1:')
let b = +prompt('请输入num2:')
a > b ? alert(`最大值是:${a}`) : alert(`最大值是:${b}`)
</script>
</body>
</html>
二十一、数字补零
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// alert(2 < '3')
let a = prompt('num')
a >= 10 ? alert(a) : alert(0 + a)
</script>
</body>
</html>
二十二、switch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = +prompt('请输入今天星期几了:')
switch (num) {
case 1:
alert('星期一')
break
case 2:
alert('星期二了')
break
case 3:
alert('星期三了')
break
case 4:
alert('星期四了')
break
case 5:
alert('星期五了')
break
case 6:
alert('周末了')
break
case 7:
alert('周末了')
break
default:
alert('你是外星人吗')
}
</script>
</body>
</html>
二十三、while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// while 一定要有终止条件
let i = 10
// while (i > 11) {
// console.log('你是大聪明')
// i--
// }
do {
console.log('你是大聪明')
i--
} while (i > 11)
</script>
</body>
</html>
二十四、for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (let i = 1; i <= 10; i++) {
document.write(`你真是个大聪明<br>`)
}
//
</script>
</body>
</html>
二十五、循环嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
margin: 15px;
}
</style>
</head>
<body>
<script>
for (let i = 1; i < 8; i++) {
console.log(`今天是第${i}天`)
for (let j = 1; j < 11; j++) {
console.log(`这是今天第${j}朵玫瑰花`)
}
}
for (let i = 1; i < 10; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j}*${i}=${i * j}</span>`);
}
document.write(`<br/>`)
}
for (let i = 1; i < 6; i++) {
for (let j = 1; j <= i; j++) {
document.write(`*`)
}
document.write(`<br/>`)
}
</script>
</body>
</html>
二十六、continue、break
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (let i = 1; i < 100; i++) {
if (i === 50) {
// break
continue
}
console.log(i)
}
// break:跳出循环
// continue:跳出本次循环
</script>
</body>
</html>
二十七、循环加强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 66, 4, 5]
// for in
// for (let i in arr) {
// console.log(arr[i])
// }
// for of
for (let k of arr) {
console.log(k)
}
</script>
</body>
</html>
二十八、数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let name1 = '俊杰'
// 有序的数据序列
// 0 1 2 3 4 5
let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
// 数组的声明方式
// arr[索引下标]
alert(arr[5])
// let arr2 = new Array()
// 数组遍历
// for (let i in arr) {
// console.log(arr[i])
// }
// 数组的操作
// 通过索引下标给对应元素重新赋值
arr[1] = 'guanyu'
console.log(arr instanceof Array)
let arr2 = [1, 2, 3, 4]
// concat合并数组
arr3 = arr.concat(arr2)
console.log(arr3)
// 增 push 在数组末尾添加
arr.push('姜加')
// unshift 在数组首部添加元素
arr.unshift('jiangjia')
arr.shift()
arr.pop()
// splice(删除的起始位置,删除的个数)
arr.splice(3, 1)
// splice(删除的起始位置,0,要添加的元素)
arr.splice(3, 0, 'jiangjia')
console.log(arr)
console.log(arr.join(' **'))
console.log(arr.reverse())
console.log(arr.slice(3))
</script>
</body>
</html>
二十九、二维数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
// console.log(student[1][0])
for (let i in student) {
for (let j in student[i]) {
console.log(student[i][j])
}
}
// student.length 获取数组长度的
</script>
</body>
</html>
第六天
一、函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// parseInt('200px')
// getSum(20, 30)
function sayHi() {
console.log('hello,function!')
}
// 函数必须进行调用,才会执行
sayHi()
let age = 21
// 函数要有返回值,一定要添加return关键字,否则返回值为undefined
function getSum() {
// console.log(a + b)
// return a + b
// arguments 接收所有实参,并保存到arguements数组里
console.log(arguments)
let sum = 0
console.log(age)
for (let i in arguments) {
sum += arguments[i]
}
return sum
}
let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)
console.log(e)
</script>
</body>
</html>
二、匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// function sayHi(fn) {
// fn()
// console.log('nihao')
// }
// function () {
// console.log('jiangjia')
// }
// sayHi(sayHello)
// function sayHi()
setInterval(function () {
console.log('你真傻')
}, 1000)
</script>
</body>
</html>
三、函数表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let a = function getSum() {
// console.log('jiangjia')
// }
// a()
// 立即执行函数
(function () { console.log('liqingyu') })()
// (function () { console.log('jiangjia') }())
</script>
</body>
</html>
四、值传递、引用传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 值传递
let a = 10
let b = 20
function change(x, y) {
x = 30;
y = 50;
}
change(a, b);
alert(a + "--" + b)
let arr = [1, 3, 4, 5]
// 引用传递 传地址,发生改变
function change2(a) {
a.push(1000)
}
change2(arr)
alert(arr)
</script>
</body>
</html>
五、默认值参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getCir(r, PI = 3.14) {
return PI * r * r
}
let a = getCir(3)
console.log(a)
</script>
</body>
</html>
六、箭头函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// setInterval(function () {
// console.log('i love you')
// }, 1000)
setInterval(() => {
console.log('i hate you')
}, 1000)
</script>
</body>
</html>
七、递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 9!
// 9*8!
function jiecheng(n) {
if (n === 1) {
return 1
} else {
return n * jiecheng(n - 1)
}
}
let a = jiecheng(10086)
alert(a)
// 练习:递归求1~n的和
// 100+1~99的和
function he(n) {
if (n == 1) {
return 1
} else {
return n + he(n - 1)
}
}
alert(he(5))
</script>
</body>
</html>
八、数组遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['a', 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
</script>
</body>
</html>
九、字符串的常见方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = new String()
// let str = '你是who'
console.log(str.split('w'))
console.log(str.substring(2, 4))
console.log(str.startsWith('你'))
console.log(str.endsWith('你'))
console.log(str.includes('w'))
</script>
</body>
</html>
十、对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// let arr = [160, 160]
// 对象:无序的数据集合
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
// console.log(obj)
// 查找对象元素
console.log(obj.uname)
console.log(obj['age'])
// let obj2 = new Object()
let obj2 = {
uname: '刘德华',
age: 60,
sing: function () {
console.log('我要唱歌了')
}
}
obj2.sing()
</script>
</body>
</html>
十一、对象的增删查改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
// obj.uname
// obj['age']
// 改:对象.属性名
obj.uname = 'GGBond'
// 增加 对象.新属性名
obj.sing = function () {
console.log('sing~')
}
// delete 对象.属性名
delete obj.gender
console.log(obj)
</script>
</body>
</html>
十二、对象的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
for (let k in obj) {
console.log(k)
console.log(obj[k])
}
</script>
</body>
</html>
十三、数组的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arrObj =
[
{
uname: 'zs',
age: 21
},
{
uname: 'jiangjia',
age: 33
},
{
uname: 'lisi',
age: 12
}
]
console.log(arrObj)
// arrObj[1]['uname']
for (let i = 0; i < arrObj.length; i++) {
for (let k in arrObj[i]) {
console.log(arrObj[i][k])
}
}
</script>
</body>
</html>
十四、Math内置对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(Math.E)
console.log(Math.PI)
// Math.ceil向上取整
console.log(Math.ceil(3.1415))
// Math.floor向下取整
console.log(Math.floor(3.1415))
// Math.abs 绝对值
console.log(Math.abs(-3.12))
// pow
console.log(Math.pow(3.12, 10))
// 开平方根
console.log(Math.sqrt(9))
// 随机数
// console.log(Math.floor(Math.random() * 11) + 2)
let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
console.log(random)
</script>
</body>
</html>
十五、日期内置对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let date = new Date()
// alert(date)
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hh = date.getHours()
let mm = date.getMinutes()
let ss = date.getSeconds()
let gg = date.getDay()
alert(gg)
document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)
let a = 3.234364
alert(a.toFixed(4))
</script>
</body>
</html>
十六、dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>提交</button>
<script>
const btn = document.querySelector('button')
// console.dir(btn)
console.log(typeof (btn))
</script>
</body>
</html>
十七、获取元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>盒子</div>
<ul>
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li id="four">4</li>
</ul>
<script>
// 1、通过css选择器获取 ('字符串') :狂(嘎嘎)推荐
const li2 = document.querySelector('.two')
console.log(li2)
const li = document.querySelector('li')
console.log(li)
// document.querySelectorAll将所有匹配的元素全部获取到,并存放到伪数组
const lis = document.querySelectorAll('li')
console.log(lis)
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
const li3 = document.querySelector('ul li:nth-child(3)')
console.log(li3)
// 其他
console.log(document.getElementsByTagName('div'))
console.log(document.getElementById('four'))
console.log(document.getElementsByClassName('two'))
</script>
</body>
</html>
十八、修改元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one">我是一个即将被更改的盒子</div>
<div class="two">我是一个即将被更改的盒子</div>
<script>
// 1、获取元素
const box1 = document.querySelector('.one')
const box2 = document.querySelector('.two')
console.log(box1)
console.log(box2)
// 2、操作
box1.innerText = `<h1>jiangjia</h1>`
box2.innerHTML = `<h1>chensongjie</h1>`
</script>
</body>
</html>
十九、随机点名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>jiangjia</div>
<script>
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
// 1、获取元素
const box = document.querySelector('div')
// 2、获取随机数 n-0 m---arr.length-1
let random = Math.floor(Math.random() * arr.length)
// 3、改内容
box.innerHTML = `${arr[random]}`
</script>
</body>
</html>
二十、修改元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="../images/1.webp" alt="刘德华" title="刘德华">
<input type="text" placeholder="wedjed" readonly>
<button disabled>同意该协议</button>
<script>
// 1、获取元素
const img = document.querySelector('img')
const ipt = document.querySelector('input')
const btn = document.querySelector('button')
// 改元素属性 对象.属性=值
img.src = "../images/2.webp"
img.title = "我是个大帅哥"
ipt.type = "password"
ipt.placeholder = "请输入用户名"
ipt.readOnly = false
btn.disabled = false
</script>
</body>
</html>
二十一、修改元素样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: rgb(207, 39, 67);
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1">1111</div>
<div class="box2 box1"></div>
<script>
// 1、获取元素
const box2 = document.querySelector('.box2')
const div = document.querySelector('.box1')
// 2、通过style修改样式
div.style.width = '500px'
div.style.fontSize = '16px'
div.style.backgroundColor = 'pink'
// 3、通过添加类名 calssName会将原来的类名删除掉,不建议使用
// box2.className = 'box1'
// classlist.add('类名')追加
box2.classList.add('box1')
// box2.classList.remove('box1') 移除
box2.classList.toggle('box1') //切换:有则删除,没有则添加
</script>
</body>
</html>
二十二、定时器(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// setTimeout\setInterval 定时器
// setTimeout :某段代码或者函数在多久后执行
// setTimeout(code||function,time(ms))
// 返回值是一个整数,代表定时器编码
// let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
// console.log(timer)
// let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)
// console.log(timer2)
// 传的是函数名
// let timer3 = setTimeout(
// fn, 3000)
// function fn() {
// console.log('6666666')
// }
// setTimeout(函数或一段代码,延迟时间,实参……)
// let timer4 = setTimeout(function (a, b) {
// console.log(a + b)
// }, 2000, 1, 4)
let obj = {
uname: 'gouxin',
a: 3,
b: 4,
sum: function () {
console.log(this)
console.log(this.a)
}
}
obj.sum()
// setTimeout(obj.sum, 1000)
// 定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境
// setTimeout(function () { obj.sum() }, 1000)
let a = setTimeout(obj.sum.bind(obj), 1000)
clearTimeout(a)
// setInterval 间隔一段时间,将代码或者函数执行一次
let timer = setInterval(' console.log(\'6666666\')', 1000)
clearInterval(timer)
let timer2 = setInterval(function (a, b) {
console.log(a + b)
}, 1000, 2, 3)
clearInterval(timer2)
</script>
</body>
</html>