循序渐进学 JavaScript ＜二＞
续 <一>
九、JavaScript常见内置类
9.1 原始类型的包装类
- 基本数据类型也可以调用属性
- 在理论上来说它们是没有办法获取属性或者调用方法的
- 原始类型是简单的值，默认并不能调用属性和方法
- js 为了可以使其获取属性和调用方法，对其封装了对应的包装类型
- 普通字符串==》包装类型
- 常见的包装类型
- String、Number、Boolean、Symbol、BigInt
9.2 包装类型的使用过程
- 根据初始值，创建一个原始类型对应的包装类型对象
- 调用对应的属性或者方法，返回一个新的值
- 创建的包装类对象被销毁
- 但是通常 js 引擎会进行优化，跳过包装类的过程在内部直接完成属性的获取或者方法的调用
9.3 Number 类补充
- 具有自己的属性
- 类属性
- 具有实例方法
- 实例方法：通过对象来调用
- toFixed()
- toString()
<script>
var num = 19//new Number(num)
// integer:整数
// 类属性
console.log(Number.MAX_SAFE_INTEGER);
// 对象方法
var num1 = 3.333454
// 转化成字符串类型
console.log(num1.toString());
// 转换为二进制
console.log(num1.toString(2));
console.log(123..toString());
// 保留三位小数
console.log(num1.toFixed(2));
// 类方法
// 字符串转数字类型
var str = "123.24"
Number(str)//不做区分浮点数和整数
Number.parseInt(str)
Number.parseFloat(str)
// window对象上面
console.log(parseInt(str));
script>
9.4 Math 对象
- 是一个对象类型，不是构造函数
<body>
<script>
console.log(typeof Math);
// Math对象的属性
console.log(Math.PI);
var num = 3.13
console.log(Math.floor(num));
console.log(Math.ceil(num));
console.log(Math.round(num));
// random：[0,1)
console.log(Math.random());
// 需求5~50的随机数
// [5,20）
var randomNum = Math.floor(Math.random()*45)+5
script>
body>
9.5 Number、Math 的常见操作
9.5.1 Number 类的操作
- 类属性
- Number.MAX_SAFE_INTEGER 最大安全整数
- Number.MIN_SAFE_INTEGER 最小安全整数
- 实例方法
- toString(base)，将数字转成字符串，并且按照base进制进行转化
- toFixed(digits)，格式化一个数字，保留digits位的小数,会四舍五入
- 类方法
- Number.parseInt(string[, radix])，将字符串解析成整数，也有对应的全局方法parseInt；
- Number. parseFloat(string)，将字符串解析成浮点数，也有对应的全局方法parseFloat；
9.5.2 Math 的常见操作
-
属性
- Math.PI：圆周率
-
常见的方法
- Math.floor：向下舍入取整
- Math.ceil：向上舍入取整
- Math.round：四舍五入取整
- Math.random：生成0~1的随机数（包含0，不包含1）
- Math.pow(x, y)：返回x的y次幂
-
公式: [a,b)的随机数
- y=a,x=b-a, Math.floor(Math.random() * x) + y
9.6 String 类的补充
- 属性
- length:获取字符串长度
- 访问某一个位置对应的字符
- 遍历
<script>
// 属性
var message = "lili"
console.log(message.length);
// 访问某一个位置对应的字符
console.log(message[3]);//超出范围：undefined
console.log(message.charAt(3));//超出范围：空字符串
// 3. 字符串的遍历
// 3.1 for普通遍历
for(let i =0;i<message.length;i++){
console.log(message[i]);
}
// 3.2 for..of遍历 -> 迭代器:目前就字符串和数组
// 对象不支持for...of
// string对象内部将字符串变成了一个可迭代对象
for(var char of message){
console.log(char);
}
script>
- 字符串不能修改
// 4. 修改字符串
// 创建新的字符串，让变量指向了一个新的值
message = "加加加"
// 严格的修改字符串：修改之前的字符串内部
message[1] = "0"
// 所有字符变成大写:生成新的字符串
var message1 = message.toUpperCase()
console.log(message1);
// 变成小写
var message2 = message.toLowerCase()
- 查找字符串
- indexOf
- includes
- startWith
- endWith
- replace
// 判断一个字符串中是否有另外一个字符串
// 5.1 indexOf(searchString,fromIndex)
/*
index:搜索到，返回搜索字符串所在的索引位置
没有搜索到，返回-1
*/
var index = message2.indexOf(name)
console.log(index);
// 存在
if (message2.indexOf(name) !== -1) {
console.log("message2中包含name");
} else {
console.log("message2中不包含name");
}
// 5.2 includesES6新增语法，用来判断包含关系
if (message2.includes(name)) {
console.log("哈哈哈哈好好照顾自己~~");
}
// 5.3 startWith：是否以xxx开头
if (message2.startsWith("my")) {
console.log("messages以my开头");
}
// 5.4 endWith：是否以xxx开头
// 5.5 replace：替换字符串("替换谁",正则表达式、代替值、函数)
var newMessage = message2.replace("lili", "涵涵")
console.log(newMessage);
var newMessage2 = message2.replace("lili", function () {
// 使用函数返回的值去替代字符串
return "kobe"
})
console.log(newMessage2);
// 6. 获取子字符串：slice、substring、substr
// slice
var clothes = "衣服包包鞋子"
console.log(clothes.slice(3));//截到最后
console.log(clothes.slice(1, 3));
// substr:浏览器是否支持
- 获取子字符串：slice
// 6. 获取子字符串：slice、substring、substr
// slice
var clothes = "衣服包包鞋子"
console.log(clothes.slice(3));//截到最后
console.log(clothes.slice(1, 3));
// substr:浏览器是否支持
- 字符串拼接
// 7. 字符串的拼接
// 7.1 +
var str1 = "lili"
var str2 = "哈啰"
var newStr = str1 + str2
// 7.2 concat:支持链式调用,参数是可变参数...
var newStr2 = str1.concat(str2, newStr)
- 删除首尾的空格
// 8. 删除首尾空格
console.log(" lili ".trim());
- 字符串的切割
// 9. 字符串的切割split：返回值是一个string类型的数组
var infos = "aaa-bbb-ccc-ddd"
// 传入一个分隔符
var items = infos.split("-")
console.log(items);
// join:把数组转为字符串,参数为以什么连接
var str3 = items.join("*")
console.log(str3);
- 补齐字符串：str.padStart(4, “0”)
9.7 数组 Array
- 一系列的商品，使用键值对访问并不方便，需要一个有序的集合，里面的元素是按照某一个顺序来排列的，可以通过索引来获取到它----编程语言提供了一种数据结构：数组[]
<body>
<script>
// 1. 创建数组的方式一：字面量的方式
var names = ["aaa", "bbb", "ccc"]//字符串类型
var products = [
{ name: "iphone", price: 99, desc: "九块九" },
{ name: "鼠标", price: 199, desc: "哈哈" },
{ name: "键盘", price: 989, desc: "六点多" },
]//对象类型
// 2. 创建数组方式二：类Array
var arr1 = new Array()
console.log(arr1);
var arr2 = new Array("abc", "cba", "nba")//["abc","cba","nba"]
console.log(arr2);
// 传入一个数字，会默认当成常见一个对应长度的数组
var arr3 = new Array(5)//[empty * 5]
script>
body>
- 数组的基本操作
<script>
var names = ["aaa", "bbbb", "ccccc"]
// 1. 访问数组中的元素
console.log(names[0]);
console.log(names.at(-1));
// 2. 修改数组中的元素
names[0] = "why"
// 3. 新增数组中的元素
names[3] = "kobe"//没有人这么做
// 4. 删除数组中的元素
delete names[1]//empty,没有人这么做
</script>
<script>
var names = ["lili", "dameinb", "jiao"]
// 在数组的尾部添加和删除元素
// push方法
names.push("aaaa", "dddd")
// pop方法
names.pop()
// 在数组的头部添加和删除元素:效率非常低
// unshift方法
names.unshift("sss", "hhh")
// shift方法
names.shift()
// splice方法：处理数组的利器，修改的是原数组
// 能够在任意位置添加/删除/替换元素
// 参数一：start，从什么位置开始操作函数
// 参数二：deleteCount，删除元素的个数
// 1. 删除元素
names.splice(1,2)
// 2. 新增元素:deleteCount=0,后面可以添加新的元素
names.splice(1,0,"why","kebe")
// 3. 替换元素:先移除，再新增
names.splice(1,2,"lisssss","yejie")
script>
- length 属性
- length属性是可写的，可以扩容，但是一般不需要扩容
- 清空数组：arr.length = 0
<script>
var names = ["lilio", "xiaoming", "xiaohong"]
// 获取数组的长度
console.log(names.length);
// length属性可写的
names.length=10
// 会自动对数组进行扩容
// 设置的length小于原来的元素个数
names.length = 2//会将后面的内容截取掉
script>
- 数组的遍历
// 数组的遍历
// 1. 普通的for循环
for (var i = 0; i < names.length; i++) {
console.log(names[i]);
}
// 2. for in:适用于需要获取对应的索引
for (var index in names) {
console.log(index, names[index]);
}
// 3. for of
for (var item of names) {
console.log(item);
}
- 数组方法
- slice：对数组进行截取
var names = ["abc","ddd","ggg","ytyt"]
// 1. slice 方法：不会修改原数组
// 与splice 区别：splice修改原有的数组
var newNames = names.slice(1)
console.log(newNames);
- concat:将多个数组拼接在一起
// 2. concat :将多个数组拼接在一起
var name1 = "lili"
var name2 = "jiao"
var name3 = "dandan"
// 使用展开运算符
const newNames = []
newNames.push(...name1,...name2,...name3)
const newNamess=name1.concat(name2,name3)
console.log(newNamess);
- join：将数组转成字符串，split：将字符串转化成数组
// 3. join:将数组变成字符串
console.log(names.join("-"));
- 查找元素
- indexOf：针对原始类型
// 1. 数组中存放的是原始类型
var names=["abc","cba","dddd"]
// 1.1 indexOf
// 找到返回索引
// 没找到返回-1
console.log(names.indexOf('abc'));
// 2. 数组中存放的是对象类型
var student = [
{id:1002,name:"hey2",age:14},
{id:1004,name:"hey3",age:15},
{id:1005,name:"hey5",age:64},
{id:1006,name:"hey4",age:34},
]
// 查找id为1004的学生信息
// 2.1 自己写一个for循环
// var stu = {}
// 因此初始化为null
var stu =null
// 赋值为空的缺点：1. 转为布尔值都是真值 2. 空对象会占用内存
for(var i =0;i<student.length;i++){
if(student[i].id === 1004){
console.log(student[i]);
stu = student[i]
break
}
}
// 判断有没有找到对应的学生
if(stu){
console.log("找到了");
}
- find 方法
// 2.2 find方法:高阶函数:数组中有几个元素就会调用多少次传入的函数
var stu = student.find(function (item) {
// console.log(item);
if (item.id === 1004) return true
})
// 简写：
var stu = student.find(item => item.id === 1004)
</script>
//手动实现高阶函数forEach
var names = ["dd", "ddd", "gggg"]
// forEach 函数：可以帮助遍历数组
// names.forEach(function (item, index, err) {
// console.log(item, index, err);
// })
// //版本一：回调函数
// // 自己实现上述函数
// function liliForEach(fn) {
// for (var i = 0; i < names.length; i++) {
// fn(names[i], i, names)
// }
// }
// liliForEach(function (item, index, names) {
// console.log(item, index, names);
// })
// //版本二
// function liliForEach(fn, arr) {
// for (var i = 0; i < arr.length; i++) {
// fn(names[i], i, arr)
// }
// }
// liliForEach(function (item, index, names) {
// console.log(item, index, names);
// }, names)
// // 版本三:往对象里面加属性
// names.liliForEach = function liliForEach(fn) {
// for (var i = 0; i < this.length; i++) {
// fn(this[i], i, this)
// }
// }
// names.liliForEach(function (item, index, names) {
// console.log(item, index, names);
// })
// 版本四:放在原型链上
Array.prototype.liliForEach = function liliForEach(fn) {
for (var i = 0; i < this.length; i++) {
fn(this[i], i, this)
}
}
names.liliForEach(function (item, index, names) {
console.log(item, index, names);
})
//手动实现高阶函数forEach
// 原始类型
var names = ["abc", "vvv", "ooo1"]
// 内部函数返回true，意味着找到了，后边就不需要遍历了，后面的不会继续执行
// 没有返回值意味着返回undefined，布尔值为false
names.find(function (item, index, arr) {
console.log(item, index, arr);
// return true//返回了第一个元素而不是true
})
// 数组中对象类型
var students = [
{ id: 1002, name: "hey2", age: 14 },
{ id: 1004, name: "hey3", age: 15 },
{ id: 1005, name: "hey5", age: 64 },
{ id: 1006, name: "hey4", age: 34 },
]
students.find(function (item) {
console.log(item);
return item.id === 1002
})
// 自己实现
Array.prototype.liliFind = function (fn) {
var item //可以不设定，默认为undefined
for (var i = 0; i < this.length; i++) {
var isFlag = fn(this[i], i, this)
if (isFlag) {
// item = this[i]
// break
return this[i]
}
}
// return item
}
students.liliFind(function (item, index, arr) {
return item.id === 101
})
- includes：返回 true / false
- findIndex：查找元素的索引，找不到返回 -1
// 查找元素
// indexOf/lastIndexOf
// includes
console.log(names.includes('abc'));
// findIndex：查找元素索引
var findIndex = names.findIndex(function(item,index,arr){
return item === 'nba'
})
console.log(findIndex);
-
数组的排序：sort修改原数组
-
数组的反转：reserve生成一个新的数组
-
其他高阶函数
-
reduce
-
filter
-
map
-
// 1.forEach函数
var names = ["abc", "cba", "nba", "mba"]
// 三种方式, 新增一种方式
names.forEach(function (item) {
console.log(item)
})
names.forEach(item => console.log(item))
// 2.filter函数: 过滤
var nums = [11, 20, 55, 100, 88, 32]
// 2.1. for循环实现
var newNums = []
// for of方法
for (var item of nums) {
if (item % 2 === 0) {
newNums.push(item)
}
}
// 2.2. filter实现：形成新数组
// 只筛选出满足条件的
// var newNums = nums.filter(function(item) {
// return item % 2 === 0
// })
// console.log(newNums)
// 3.map函数: 映射：对原来的数组元素进行变化，映射形成新数组
var nums = [11, 20, 55, 100, 88, 32]
var newNums = nums.map(function (item) {
return item * item
})
console.log(newNums)
// 4.reduce
var numbers = [11, 20, 55, 100, 88, 32]
var result = 0
for (var item of numbers) {
result += item
}
console.log(result)
// initialValue: 初始化值, 第一次执行的时候, 对应的preValue
// 如果initialValue没有传呢?
var result = nums.reduce(function(preValue, item) {
console.log(`preValue:${preValue} item:${item}`)
return preValue + item
}, 0)
console.log(result)
// reduce练习
var products = [
{ name: "鼠标", price: 88, count: 3 },
{ name: "键盘", price: 200, count: 2 },
{ name: "耳机", price: 9.9, count: 10 },
]
var totalPrice = products.reduce(function(preValue, item) {
return preValue + item.price * item.count
}, 0)
console.log(totalPrice)
// 综合练习:
var nums = [11, 20, 55, 100, 88, 32]
// 过滤所有的偶数, 映射所有偶数的平方, 并且计算他们的和
var total = nums.filter(function (item) {
return item % 2 === 0
}).map(function (item) {
return item * item
}).reduce(function (preValue, item) {
return preValue + item
}, 0)
console.log(total)
var total = nums.filter(item => item % 2 === 0)
.map(item => item * item)
.reduce((preValue, item) => preValue + item, 0)
console.log(total)
9.8 String 和 Array 常见操作
9.8.1 String 的常见操作
- 创建方式 new String()
- 属性
- length —获取字符串的长度
- 访问其中元素
- [0]
- charAt(0)
- 遍历
- 普通的for循环
- for…of方式
- 可迭代对象
- 字符串/数组
- 字符串不可变性
- 实例方法:
- toUpperCase() 将所有的字符转成大写；
- toLowerCase() 将所有的字符转成小写；
- indexOf 查找字符串位置
- includes 是否包含字符串
- startsWith 判断是否以xxx开头
- endsWith 判断是否以xxx结尾
- repace 替换字符串
- slice/substring/substr 获取子字符串
- concat 字符串拼接
- trim 去除首尾空格
- split 字符串分割,字符串—>数组
- join 数组–>字符串
9.8.2 Array 的常见操作
-
创建数组
- [] 数组字面量
- new Array()
- 传1个数组,表示数组的长度
-
数组基本操作
- 获取元素
- [0]
- at(0)
- 修改元素
arr[1] = "fff"
- 新增
arr[5]="123"
- 删除
delete arr[0]
- 获取元素
-
在数组的尾部:
- push 尾部添加
- pop 删除尾部的最后一个元素,返回被删除的元素
-
在数组首部
- unshift 首部添加
- shift 删除首部的第一个元素,返回被删除的元素
-
利器
- splice 在任何位置添加/删除/替换元素
- start 从什么位置开始操作元素
- deleteCount 删除元素的个数
- 2 删除2个
- 0 添加元素
- item1/item2 添加或者替换的元素
- splice 在任何位置添加/删除/替换元素
9.9 时间的表示
-
UTC :标准的时间
-
创建 Date对象
//创建Date对象的方式
// 1. 没有传入任何的参数，获取到当前时间
var date1 = new Date()
console.log(date1);
// 2. 传入参数：时间字符串
var date2 = new Date("2022-09-09")
console.log(date2);
// 3. 传入具体的年月日时分秒
var date3 = new Date(2023, 10, 10, 9, 8, 7, 333)
console.log(date3);
// 4. 传入一个 Unix 时间戳==》需要转成对应的时间
// 1s ==> 1000ms
var date4 = new Date(100000000000233)
console.log(date4);
- Date 对象的字符串形式：
new Date().toISOSTring()---- 但其实也不经常用 - 获取时间信息
// 获取想要的时间信息
var date = new Date()
console.log(date.toISOString());
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
// 一周中的第几天
var weekday = data.getDay()
- Date转变为时间戳：
// Date对象如何转成时间戳
var date = new Date()
console.log(date);
// 方法一：当前时间的时间戳
var timestamp = Date.now()
console.log(timestamp);
var timestamp1 = date.getTime()//获取时间戳一
var timestamp2 = date.valueOf()//获取时间戳二
//计算操作花费的时间
var startTime = Date.now()
for (var i = 0; i < 10000; i++) {
console.log(i);
}
var endTime = Date.now()
console.log("花费的时间：", endTime - startTime);
十、JavaScript 的 DOM 操作
10.1 DOM 、BOM
-
利用浏览器提供给开发者的DOM、BOM相关的API才能对页面、浏览器进行操作
-
API：application programming interface
-
DOM：文档对象模型
- 浏览器将其抽取为一个个文档对象模型
- 将网页里面的所有内容表示为可以修改的对象
- 通过 api 去获取
- 整个的文档为 document
- js 语法和浏览器之间的桥梁
- 这些对象都可以通过JavaScript来对其进行访问
-
BOM：浏览器对象模型
- 浏览器提供的用于处理文档之外的所有内容的其他对象
- navigator、location、history
10.2 DOM
-
DOM tree:抽象成DOM对象的时候，会形成一个树结构
-
学习顺序
- DOM元素之间的关系
- 获取DOM元素
- DOM节点的 type、tag、content
- DOM 节点的attributes、properies
- DOM 节点的创建、插入、克隆、删除
- DOM 节点的样式、类
- DOM 元素/window的大小、滚动、坐标
-
继承关系图
10.3 document 对象
- document 节点表示的是整个载入的网页，它的实例是全局的 document 对象
- 是DOM的入口点，可以从document开始去访问任何节点元素
- 对于最顶层的 html、head、body 元素可以直接在 document 对象中获取到：
- html元素： = document.documentElement
- body元素： = document.body
- head元素： = document.head
- 文档声明： = document.doctype
10.4 DOM 和 document 对象
- DOM:
文档对象模型(Document Object Model)将页面所有的内容表示为可以修改的对象- 浏览器将编写在HTML中的每一个元素(Element)都抽象成了一个个对象
- 所有这些对象都可以通过JavaScript来对其进行访问，可以通过 JavaScript来操作页面;
- 将这个抽象过程称之为 文档对象模型(Document Object Model)
- Document节点表示的整个载入的网页，它的实例是全局的document对象:
对DOM的所有操作都是从 document 对象开始的- 它是DOM的入口点，可以从document开始去访问任何节点元素;
10.5 节点之间的导航
- 父节点：parentNode
- 前兄弟节点：previousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：firstChild
- 第二个子节点：lastChild
10.6 元素之间的导航
- 获取到一个元素后，根据这个元素去获取其他的元素
- 父元素：parentElement
- 前兄弟节点：previousElementSibling
- 后兄弟节点：nextElementSibling
- 子节点：children
- 第一个子节点：firstElementChild
- 第二个子节点：lastElementChild
10.7 表格元素的导航
- 元素独特属性：
- table.rows —
- table.caption/tHead/tFoot — 引用元素
- ，
- table.tBodies —
- 元素的集合；
， -
，， 元素提供了 rows 属性：
- tbody.rows — 表格内部 元素的集合
-
- tr.cells — 在给定 中的 和 单元格的集合；
- tr.sectionRowIndex — 给定的 在封闭的 // 中的位置（索引）；
- tr.rowIndex — 在整个表格中 的编号（包括表格的所有行）
-
和
- td.cellIndex — 在封闭的 中单元格的编号
10.8 表单元素的导航
- 通过document来获取：document.forms
- 获取form元素中的内容：form.elements
- 设置表单子元素的name来获取他们
- elements.accounts.value
10.9 获取元素
- 通过导航获取：一层一层拿某个单独的元素非常不方便，当元素彼此靠近豁这相邻时候，导航属性非常有用
- 直接获取：
- document.getElementsByClassName(“keyword”)
- document.getElementById(‘title’)
- querySelector 和 querySelectAll
// 1. 元素之间的导航
// 1. 拿到 body
var bodyEl = document.body
// 2. 拿到 box
var boxEl = bodyEl.firstElementChild
// 3. 拿到 container
var containerEl = boxEl.children[1]
// 4. 拿到 p
var pEl = containerEl.children[0]
// 5. 拿到 keyword
var spanEl = pEl.children[0]
spanEl.style.color = 'red'
// 2 通过getElementBy直接获取
// 2.1 通过classname获取火速
var keyword = document.getElementsByClassName("keyword")
// 2.2 通过id获取元素
var titleEl = document.getElementById('title')
// 3 通过选择器查询
var keyWordEL = document.querySelector('.keyword')
var keywordEls = document.querySelectorAll('.keyword')
// 是类数组对象但是是可迭代的,支持for of，有一个索引属性，不是数组
//可迭代对象：String，数组，节点列表
10.10 节点的属性-nodeType
-
nodeType：节点的类型
- 数值类型：
- 10：DocumentType 节
- 9：Document
- 8：注释
- 3：文字
- 1：元素
-
nodeName：针对于节点，节点的名称
-
tagName：针对于元素，元素的标签名称
-
data/nodeValue：针对非元素的节点获取数据
-
innerHTML：对应的html元素也会获取，会直接进行替换，能够识别标签
-
textContent：只会获取文本内容，不能够识别标签
-
outerHTML
-
hidden属性：也是一个全局属性，可以用于设置元素隐藏,display
-
总结
- nodeName:获取node节点的名字
- tagName:获取元素的标签名词
- innerHTML:将元素中的 HTML 获取为字符串形式;设置元素中的内容
- outerHTML:包含了元素的完整 HTML;innerHTML 加上元素本身
- textContent:仅仅获取元素中的文本内容
- nodeValue:用于获取非元素节点的文本内容
- hidden:可以用于设置元素隐藏
10.11 元素的特性 attribute
- 分类
- 标准：html标准中原有的
- 非标准：自定义的
- 操作
- elem**.hasAttribute(name) — 检查特性是否存在**。
- elem.getAttribute(name) — 获取这个特性值，拿到字符串。
- elem.setAttribute(name, value) — 设置这个特性值。
- elem.removeAttribute(name) — 移除这个特性。
- attributes：attr 对象的集合，具有name、value属性；
10.12 元素的属性 property
- 对于标准的 attribute，会在DOM对象上创建与其对应的 property 属性：标准的attribute都有对应的 property
- 在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变；
- 通过attribute操作修改，property的值会随着改变；
- 如果不支持就使用 setAttribute （比较标准）
10.13 动态修改样式
- 选择一：在 CSS 中 编写好对应的样式，动态的添加 class
- 比较固定的值
boxEl.className = 'active'
- 选择二：动态的修改style属性；
- 精准的修改
boxEl.style.color = 'red'
boxEl.style.fontSize = '24px'
10.14 元素的 className 和 classList
- 在 attribute 中对应为 class，对应的 property 为 className
- className 会进行覆盖
- 添加或者移除单个的class，那么可以使用classList属性，不会覆盖掉其他的
- elem.classList 是一个特殊的对象
- elem.classList.add (class) ：添加一个类
- elem.classList.remove(class)：添加/移除类
- elem.classList.toggle(class) ：如果类不存在就添加类，存在就移除
- elem.classList.contains(class)：检查给定类，返回 true/false。
- classList是可迭代对象，可以通过for of进行遍历
- elem.classList 是一个特殊的对象
## 10.15 元素的 style 属性
- 单独修改某一个 CSS 属性，那么可以通过 style 来操作：
- 对于多词（multi-word）属性，使用驼峰式 camelCase
- 将值设置为空字符串，那么会使用 CSS 的默认样式
- 多个样式需要使用 cssText 属性
10.16 元素 style 的读取 - getComputedStyle
- 对于内联样式，是可以通过style.*的方式读取到的
- 对于 style、css 文件中的样式，是读取不到的
- getComputedStyle 的全局函数来实现：getComputedStyle(boxEl).fontSize
10.17 data-自定义属性
- HTML5 新增
- 如果直接写的话就是 attributes 添加了一个 age 属性，不推荐这种写法
- 推荐使用 data-*自定义属性
- 标签中自定义：
data-age = '19' - 在 script 中获取：
boxEl.dataset.age
10.18 创建元素
-
插入一个元素
-
早期使用 document.write 方法写入
-
后期
- 步骤一：创建一个元素：document.createElement(tag)
// 真实地创建一个 DOM 对象 var h2El = document.createElement("h2") h2El.textContent = '我是标题'- 步骤二：插入元素到DOM的某一个位置；
// 将元素加入boxboxEl boxEl.append(h2El)
-
10.19 插入元素
- node.append(…nodes or strings) —— 在 node 末尾 插入节点或字符串
- node.prepend(…nodes or strings) —— 在 node 开头 插入节点或字符串
- node.before(…nodes or strings) —— 在 node 前面 插入节点或字符串
- node.after(…nodes or strings) —— 在 node 后面 插入节点或字符串
- node.replaceWith(…nodes or strings) —— 将 node 替换为给定的节点或字符串
10.20 移除和克隆元素
- 调用元素本身的 remove 方法
- 复制一个现有的元素，可以通过 cloneNode 方法
- 可以传入一个Boolean类型的值，来决定是否是深度克隆
- 深度克隆会克隆对应元素的子元素，否则不会
10.21 元素的大小、滚动
-
clientWidth：contentWith+padding（不包含滚动条）内容的宽度加上 padding
-
clientHeight：contentHeight+padding
-
clientTop：border-top的宽度
-
clientLeft：border-left的宽度
-
offsetWidth：元素完整的宽度
-
offsetHeight：元素完整的高度
-
offsetLeft：距离父元素的x
-
offsetHeight：距离父元素的y
-
scrollHeight：整个可滚动的区域高度
-
scrollTop：滚动部分的高度
10.22 window 的大小、滚动
- **window 的 width 和 height **
- innerWidth、innerHeight：获取window窗口的宽度和高度（包含滚动条）
- outerWidth、outerHeight：获取window窗口的整个宽度和高度（包括调试工具、工具栏）
- documentElement.clientHeight、documentElement.clientWidth：获取html的宽度和高度（不包含滚动条）
- window 的滚动位置：
- scrollX：X轴滚动的位置（别名pageXOffset）
- scrollY：Y轴滚动的位置（别名pageYOffset）
- 也有提供对应的滚动方法：
- scrollBy(x,y) ：将页面滚动至 相对于当前位置的 (x, y) 位置：
scrollBy(0,100) - 方法 scrollTo ( pageX,pageY ) 将页面滚动至 绝对坐标；
- scrollBy(x,y) ：将页面滚动至 相对于当前位置的 (x, y) 位置：
10.23 动态创建列表
<body>
<ul class="list">
</ul>
<script>
var ulEl = document.querySelector('.list')
var isFlag = true
while (isFlag) {
var message = prompt('请输入待处理事件')
if (!message) {
isFlag = false
} else {
var liEl = document.createElement('li')
liEl.textContent = message
ulEl.append(liEl)
}
}
</script>
</body>
10.24 倒计时
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.countdown {
color: red;
font-size: 40px;
}
.countdown .time {
background-color: rgb(187, 119, 31);
color: azure;
display: inline-block;
padding: 50px;
border-radius: 3px;
}
style>
head>
<body>
<div class="countdown">
<span class="time hour">03span>
<span class="split">：span>
<span class="time minute">03span>
<span class="split">：span>
<span class="time second">03span>
div>
<script>
// 1. 获取元素
var hourElement = document.querySelector('.hour')
var minuteElement = document.querySelector('.minute')
var secondElement = document.querySelector('.second')
setInterval(function(){
// 2. 获取倒计时的时间
var nowDate = new Date()
var endDate = new Date()
endDate.setHours(24)
endDate.setMinutes(24)
endDate.setSeconds(24)
endDate.setMilliseconds(24)
// 间隔时间
var interValTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)
// 秒 ==》 小时 分钟 秒钟 按照六十进制
var hour = Math.floor(interValTime / 3600)
var minute = Math.floor((interValTime / 60) % 60)
var second = interValTime % 60
// 3. 设置内容
hourElement.textContent = padLeft(hour)
minuteElement.textContent = padLeft(minute)
secondElement.textContent = padLeft(second)
},1000)
function padLeft(content, count, padStr) {
count = count | 2
padStr = padStr | '0'
content = String(content)
return content.padStart(count, padStr)
}
script>
body>
html>
十一、JavaScript的事件处理
11.1 事件（Event）
- Web页面需要经常和用户之间进行交互，而交互的过程中可能想要捕捉这个交互的过程
- 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置
- 浏览器需要搭建一条JavaScript代码和事件之间的桥梁，浏览器进行调用
- 当某个事件发生时，让JavaScript可以相应（执行某个函数），所以需要针对事件编写处理程序（handler）
- 事件监听
- 事件监听方式一：在script中直接监听（很少使用）
- js 代码和 html 代码混合
- 事件监听方式二：DOM 属性，通过元素的on来监听事件
- 获取元素对象，onclick属性
- 不能调用多个函数，只有最后的函数会生效
- 事件监听方式三：通过 EventTarget 中的 addEventListener 来监听
- 获取元素对象
- btnEl.addEventListener (“click”,fn1)
- 事件监听方式一：在script中直接监听（很少使用）
11.2 事件冒泡和事件捕获
- 事件冒泡：默认情况下事件是从最内层的span向外依次传递的顺序
- 事件捕获：从外层到内层（body -> span）
- 如果都监听，那么会按照如下顺序来执行：
- 捕获阶段（Capturing phase）：事件（从 Window）向下走近元素
- 目标阶段（Target phase）：事件到达目标元素
- 冒泡阶段（Bubbling phase）：事件从元素上开始冒泡
- 事实上，可以通过event对象来获取当前的阶段：
- eventPhase
- 开发中通常会使用事件冒泡
## 11.3 事件对象
- 当一个事件发生时，就会有和这个事件相关的很多信息
- 比如事件的类型是什么，点击的是哪一个元素，点击的位置是哪里等等相关的信息
- 那么这些信息会被封装到一个Event对象中，这个对象由浏览器创建，称之为event对象
- 该对象提供了想要的一些属性，以及可以通过该对象进行某些操作
- 获取这个 event 对象
- event 对象会在传入的事件处理（event handler）函数回调时，被系统传入
- 可以在回调函数中拿到这个event对象
## 11.4 event 常见的属性和方法
-
常见的属性
- type：事件的类型
- target：当前事件发生的元素
- currentTarget：当前处理事件的元素（父元素）
- 事件冒泡会有区别
- eventPhase：事件所处的阶段
- 捕获：1
- 目标：2
- 冒泡：3
- offsetX、offsetY：事件发生在元素内的位置
- clientX、clientY：事件发生在客户端内的位置（可见的视口）
- pageX、pageY：事件发生在客户端相对于document的位置（文档）
- screenX、screenY：事件发生相对于屏幕的位置
-
常见的方法
- preventDefault：取消事件的默认行为
var aEl = document.querySelector("a") aEl.onclick = function(event){ event.preventDefault() }- stopPropagation：阻止事件的进一步传递（冒泡或者捕获都可以阻止）
11.5 事件处理中的this
- this指向谁跟浏览器怎么调用有关
- 绑定到谁身上就是指向谁
- 绑定到处理的元素
currentTarget
11.6 EventTarget类
- 所有的节点、元素都继承自EventTarget
- Window也继承自EventTarget
- EventTarget
- EventTarget是一个DOM接口，主要用于添加、删除、派发Event事件
- 可以实现类似于事件总线的效果
- EventTarget常见的方法
- addEventListener：注册某个事件类型以及事件处理函数
- removeEventListener：移除某个事件类型以及事件处理函数
- 移除要移除之前对应加进去的函数
- dispatchEvent：派发某个事件类型到 EventTarget 上
11.7 事件委托
- 利用事件的冒泡机制，以及事件对象中可以准确获知触发事件的元素机制(e.target)，将子元素事件委托给父元素处理的现象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.active {
color: red;
font-size: 20px;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
<li>9li>
<li>0li>
ul>
<script>
// 1.每一个li都监听自己的点击，并且有自己的处理函数
var liEls = document.querySelectorAll("li")
for (const liEl of liEls) {
liEl.onclick = function (event) {
event.currentTarget.classList.add('active')
console.log("点击li");
}
}
// 2. 统一在ul中进行监听
var ulEl = document.querySelector("ul")
ulEl.onclick = function (event) {
event.target.classList.add('active')
console.log("点击li");
}
// 3. 点击li变成active，其他取消active
var ulEl = document.querySelector("ul")
// 3.1 变量记录的方式
var activeLiEl = null
ulEl.onclick = function (event) {
// 边界判断
if (activeLiEl && event.target !== ulEl) {
activeLiEl.classList.remove("active")
}
// 3.2 给点击的元素添加active
if (event.target !== ulEl) {
event.target.classList.add('active')
}
console.log("点击li");
// 3.3 记录最新的active对应的li
activeLiEl = event.target
}
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>Documenttitle>
head>
<body>
<div class="box">
<button data-action="remove">移除button>
<button data-action="new">新建button>
<button data-action="search">搜索button>
div>
<script>
var boxEl = document.querySelector(".box")
boxEl.onclick = function (event) {
var btnEl = event.target
var action = btnEl.dataset.action
switch (action) {
case "remove":
console.log("click remove");
break
case "new":
console.log("click new");
break
case "search":
console.log("click search");
break
}
}
script>
body>
html>
11.8 常见的鼠标事件
- click：当用户点击某个对象时调用的事件
- contextmenu：在用户点击鼠标右键打开上下文菜单时触发
- dblclick：当用户双击某个对象时调用的事件
- mousedown ：鼠标按钮被按下
- mouseup：鼠标按键被松开
- mousemove ：鼠标被移动
- mouseover ：鼠标移到某元素之上（支持冒泡）
- mouseout ：鼠标从某元素移开（支持冒泡）
- mouseenter ：当鼠标指针移动到元素上时触发（不支持冒泡）
- mouseleave ：当鼠标指针移出元素时触发（不支持冒泡）
11.9 mouseover 和 mouseenter 的区别
- mouseenter 和 mouseleave
- 不支持冒泡
- 进入子元素依然属于在该元素内，没有任何反应
- mouseover和mouseout
- 支持冒泡
- 进入元素的子元素时
- 先调用父元素的mouseout
- 再调用子元素的mouseover
- 因为支持冒泡，所以会将mouseover传递到父元素中
- 应用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
display: flex;
width: 300px;
height: 300px;
background-color: aquamarine;
}
button {
flex: 1;
height: 40px;
}
style>
head>
<body>
<div class="box">
<button>删除button>
<button>新增button>
<button>搜索button>
div>
<script>
// 方案一：监听的本身就是button元素
// var btnEls = document.querySelectorAll('button')
// for (var i = 0; i < btnEls.length; i++) {
// btnEls[i].onmouseenter = function (event) {
// console.log(event.target.textContent);
// }
// }
// 方案二：事件委托(只给父元素绑定一个元素)
var boxEl = document.querySelector(".box")
boxEl.onmouseover = function (event) {
if (event.target.tagName === 'BUTTON')
console.log(event.target.textContent);
}
script>
body>
html>
11.10 常见的键盘事件
-
onkeydown ：某个键盘按键被按下，down事件先发生
-
onkeypress ：某个键盘按键被按下，press 发生在文本被输入
-
onkeyup ：某个键盘按键被松开，up发生在文本输入完成
-
可以通过 key 和 code 来区分按下的键
- event.code：“按键代码”（
“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置，不区分大小写
- event.key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值
- keyCode 已经遗弃
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<input type="text">
<button>buttonbutton>
body>
<script>
const btnEl = document.querySelector('button')
const inputEl = document.querySelector('input')
btnEl.onclick = function () {
console.log("sousuo");
}
btnEl.onkeyup = function (event) {
if (event.code == 'Enter') {
console.log("search");
}
}
// 按下s，搜索自动获取焦点
document.onkeyup = function (event) {
console.log("document键盘事件", event.key, event.code);
if (event.code === 'KeyS') {
inputEl.focus()
}
}
script>
html>
11.11 常见的表单事件
-
onchange 该事件在表单元素的内容改变时触发( , , , 和 )
-
oninput ：元素获取用户输入时触发
-
onfocus ：元素获取焦点时触发
-
onblur ：元素失去焦点时触发
-
onreset ：表单重置时触发
-
onsubmit ：表单提交时触发
11.12 文档加载事件
- DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 和样式表之类的外部资源可能尚未加载完成
- load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等
十二、DOM 相关
12.1 window 定时器方法
- 计划调用：并不想立即执行一个函数，而是等待特定一段时间之后再执行
- setTimeout 允许将函数推迟到一段时间间隔之后再执行
- setInterval 允许重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数
- clearTimeout：取消setTimeout的定时器
- clearInterval：取消setInterval的定时器
12.2 setTimeout 的使用
- setTimeout的语法如下
- func|code：想要执行的函数或代码字符串。
- 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做
- delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0
- arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表
- func|code：想要执行的函数或代码字符串。
- clearTimeout方法
- setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，可以使用它来取消执行
12.3 setInterval的使用
- setInterval 方法和 setTimeout 的语法相同
- 所有参数的意义也是相同的
- 不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行
- clearInterval方法
- etInterval也会返回一个“定时器标识符（timer identifier）”，可以通过clearInterval来取消这个定时器
十三、BOM
13.1 认识 BOM
- BOM：浏览器对象模型
- 由浏览器提供的用于处理文档之外的所有内容的其他对象
- navigator、location、history
- js 有一个非常重要的运行环境就是浏览器
- BOM是链接js脚本与浏览器窗口的桥梁
- BOM 主要包括以下对象模型
- window
- location
- history
- navigator
- screen
13.2 window 对象
- 全局对象
- Node ：global
- 浏览器：window 对象
- 浏览器窗口对象
- 放在 window 对象上的所有属性都可以被访问
- 使用 var 定义的变量会被添加到window对象中
- 默认提供了全局的函数和类：setTimeout、Math、Date、Object
- 作用
- 包含大量的属性：console、location、history、localStorage（60+）
- 包含大量的方法：alert、close、scrollTo、open（40+）
- 包含大量的事件：focus、blur、load、hashchange（30+）
- 包含大量从EventTarget继承过来的方法
13.3 location 对象
- 用于表示 window 上当前链接到的 URL 信息
- 常见的属性
// 完整的URL
console.log(location.href);
// 获取URL信息
console.log(location.hostname);
console.log(location.host);
console.log(location.protocol);
console.log(location.pathname);
console.log(location.search);
console.log(location.hash);
- 常见的方法
- assign：赋值一个新的URL，并且跳转到新的URL 上
- replace：替换，新的网页替换原来的网页
- reload：重新加载这个网页
13.4 URLSearchParams
- get方法:获取参数的值
- set方法：设置一个搜索参数和值
- append：追加一个搜索参数和值
- has：判断是否有某个搜索参数
- 中文会进行编码
13.5 history
- 前端路由的核心：修改 url ，但是页面不刷新
- 修改 hash 值
- 修改 history
- 属性
- history.length
- history.state
- 方法
- 添加新的历史：pushState(state,“,”/lili")
- 返回历史：back()
- 前进历史：forward（）
- 跳转层级：go（number）
- 替换历史：replaceState()
13.6 navigator
- 表示用户代理的状态和标识等信息
- 属性
- userAgent
- vendor
13.7 screen
- 获取屏幕对应的像素
十四、JSON
14.1 认识 Json
-
是一种非常重要的数据格式，并不是编程语言，可以在服务器和客户端之间传递
- 服务器基本上是以 json 格式给你数据
- 基本上传递都是 json
-
全称是 JavaScript Object Notation（ js 对象符号）
-
一种轻量级资料交换格式，算是 js 的一个子集
-
目前已经独立于编程呢个语言，可以在各个编程语言中使用
-
在 js 中可以直接使用
-
其他数据交换格式，使用什么数据格式是一种架构
- XML：在解析、传输等方面弱于 JSON
- Protobuf：有可能替换 json
- 即时通信
-
应用场景
- 网络数据的传输JSON 数据
- 项目的某些配置文件
- 非关系型数据库 NoSQL 将 json 作为存储格式
14.2 JSON 基本语法
- 不能在 json 文件中写注释
- 数据格式（双引号，不支持单引号）
- 简单值
- 数组
- 对象
14.3 JSON 的序列化和反序列化
-
希望将一个对象保存在 localStorage 中，如果直接将对象塞到里面去只能看到 object
-
需要进行序列化JSON.stringify()：将 obj 对象转成字符串再塞进来
- 在转换的过程当中改值:replacer
JSON.stringify(obj,function(key,value){if(key==="lili" return "miao")})- space:转换输出格式，前面留几个空格
- 自定义toJSON方法
-
需要进行反序列化JSON.parse()：将字符串转成 obj 对象拿到结果
- 在解析的过程中进行修改
JSON.parse(item，function(key,value){if(key==="age")return value+2})
var obj = { name: "lili", age: 99 } // 1. 将 obj 对象进行序列化 var objJSONString = JSON.stringify(obj) // 2. 将对象存储到LocalStorage localStorage.setItem("info", objJSONString) console.log(localStorage.getItem("info")); var item = localStorage.getItem("info") // 3. 将字符串转回对象（反序列化） var newObj = JSON.parse(item) -