目录
语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
0183 JS的历史知识
借鉴了 C 语言的基本语法
借鉴了 Java 语言的数据类型和内存管理
借鉴了 Scheme 语言,将函数提升到 第一等公民 的地位
借鉴了 Self 语言,使用基于原型的继承机制
0184 JS的组成部分
HTML 骨架
CSS 样式
JS 行为
JS由三个部分组成，分别为：BOM DOM ECMAScript
BOM- Browser Object Model
JS 操作浏览器发生变化的属性和方法
DOM - Document Object Model
JS 操作文档流发生变化的属性和方法
ECMAScript
JS的书写语法和书写规则
0185 JS的书写位置
行内式 内嵌式 外链式
行内式 - 直接把代码书写在标签身上
a标签：书写在href属性上
eg:<a href="javascript: JS代码;">点我一下</a>
非 a 标签：书写在行为属性上
eg:<div οnclick="alert('hello world')">点我一下</div>
内嵌式 - 把代码书写在一个script 标签对内
内嵌式 JS 代码，不需要依赖任何行为，打开页面就会执行
Eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
alert('hello world!')
</script>
</body>
</html>外链式 - 把代码书写在一个 .js 文件内
外链式 JS 代码，不需要依赖任何行为，打开页面就会执行
使用 script 标签的 src 属性引入指定 JS 文件
Eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script src="js.js"></script>
</body>
</html>
alert('hello world!')0186 JS的变量
变量 - 在程序运行过程中,保存一个中间值使用
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var num=100;
alert(num);
num=200;
alert(num);
</script>
</body>
</html>总结：
在程序运行过程中,保存一个中间值使用变量的书写 var num = 100
一个变量只能保存一个值
变量只能由 数字 字母 下划线 美元符 组成
变量不能由数字开头
严格区分大小写
不能使用关键字
尽可能使用一些有意义的单词或者拼音
示例代码2：
// 单行注释
*/
多行注释
可以换行书写
*/
//定义了一个叫做 num 的变量，保存的值是 100 这个数字
var num = 100
// 以 alert()的形式在页面输出这个内容
alert(num)示例代码3：
// 定义一个变量 num，赋值为 100
var num = 100
// 在浏览器弹窗显示 num 变量的值
alert(num)
// 在控制台打印 num 的值
console.log(num)
// 直接在页面输出 num 的值
document.write(num)0187 JS的数据类型
基本数据类型
数值类型
字符串类型
布尔类型
空类型
Undefined
Null
引用数据类型
数值类型
var n1 = 100
var n2 = -100
var n3 = 100.234
var n4 = -100.234
var n5 = 2e5==2 * 10**5
十六进制：var n6 = 0x100
八进制：var n7 = 00100
二进制：var n8 = 0b100
字符串类型
var s1 ='hello world
var s2 =“学 IT，来干锋”
JS不区分单双引号
布尔类型
var b1 = true真
var b2 = false假
空类型
null: 表示有值，有一个空值
var k1 = null
undefined: 表示没有值
var k2
使用 typeof 关键字来进行数据类型检测
语法: typeof 要检测的变量
结果: 该变量存储的数据的数据类型
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var n1=100
var result=typeof n1
console.log(result)
</script>
</body>
</html>
示例代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
var n1=100;
var result=typeof n1
console.log(result)
var s1='holle world'
var result2=typeof s1
console.log(result2)
var b1=true;
var result3=typeof b1
console.log(result3)
var k1;
var result4=typeof k1
console.log(result4)
var k1=null;
var result5=typeof k1
console.log(result5)
</script>
</body>
</html>总结：
数值类型 Number十进制、数字科学计数法 、其他进制表示方式的数字
字符串类型 string单引号或者双引号包裹的一切内容
布尔类型 Boolean true 和 false
空类型 Undefined undefined
空类型 Null null
使用 typeof 关键字进行基本数据类型的检测
0188 JS的数据类型转换
转数值 把其他数据类型转换成 数值类型
转字符串 把其他数据类型转换成 字符串类型
转布尔 把其他数据类型转换成 布尔类型
转数值
1.Number();
语法: Number(要转换的内容)
结果: 转换好数值类型的结果
示例代码：
var s1='100'
console.log(s1)
console.log(typeof s1)
var n1=number(s1)
console.log(n1)
console.log(typeof n1)2. parseInt();
语法: parseInt(要转换的内容)
结果: 转换好数值类型的结果
示例代码1：
var s1='100'
console.log(s1)
console.log(typeof s1)
var n1=parseInt(s1)
console.log(n1)
console.log(typeof n1)示例代码2：
var s1='abc'
console.log(s1)
console.log(typeof s1)
var n1=parseInt(s1)
console.log(n1)
console.log(typeof n1)示例代码3：
var s1='100abc'
console.log(s1)
console.log(typeof s1)
var n1=parseInt(s1)
console.log(n1)
console.log(typeof n1)3.parseFloat();
语法: parseFloat(要转换的内容)
结果: 转换好数值类型的结果
示例代码：
var s1='100.234'
console.log(s1)
console.log(typeof s1)
var n1=parseInt(s1)
console.log(n1)
console.log(typeof n1)
var n2=parseFloat(s1)
console.log(n2)
console.log(typeof n2)转字符串
1.string();
语法: string(要转换的内容)
结果: 转换好字符串类型的结果
示例代码：
// 准备一个变量，赋值为布尔类型内容
var b1 = true
console.log(b1)
console.log(typeof b1)
// 使用 String()方法进行一下转换
var s1 = String(b1)
console.log(s1)
console.log(typeof s1)
2.toString();
语法: 要转换的内容.toString()
结果: 转换好字符串类型的结果
示例代码：
// 准备一个变量，赋值为布尔类型内容
var b1 = true
console.log(b1)
console.log(typeof b1)
// 使用 toString()方法进行一下转换
var s1 = b1.toString()
console.log(s1)
console.log(typeof s1)转布尔
1. Boolean();
语法: 要转换的内容.Boolean()
结果: 转换好布尔类型的结果
false : 0 NaN undefined null ‘ ’
True:除此之外所有
示例代码1：
// 准备一个变量，赋值为布尔类型内容
var s1 = 'abc'
console.log(s1)
console.log(typeof s1)
// 使用 toString()方法进行一下转换
var b1 = Boolean(s1)
console.log(b1)
console.log(typeof b1)示例代码2：
// 依次转换一下五个为 false 的内容
console.log(Boolean(0))
console.log(Boolean(NaN))
console.log(Boolean(''))
console.log(Boolean(undefined))
console.log(Boolean(null))
总结：
转数值
1.Number();
2. parseInt();
3. parseFloat();
转字符串
1.String();
2. toString();
转布尔
1. Boolean();
0189 JS的运算符
算数运算符 进行 数学运算 的符号
赋值运算符 进行 赋值操作 的符号
比较运算符 进行 比较运算 的符号
逻辑运算符 进行 逻辑运算 的符号
自增自减运算符 单独对一个变量进行 +1 或者 -1 操作的符号
算数运算符
+: 进行加法运算
当符号两边都是数字或者布尔的时候,会进行数学运算
只要符号任意一边是字符串的时候,就会进行字符串拼接
示例代码：
var n1=10
var n2 = 20
//计算n1+n2的结果，赋值给 n3
var n3 = n1 + n2
console.log(n3)-：进行减法运算
*：进行乘法运算
/：进行除法运算
%：进行取余运算
以上只能进行数学运算
示例代码：
console.log(20 - 10)
console.log(20*10)
console.log(20 / 10)
console.log(10 % 3)赋值运算符
=：进行赋值操作
代码示例：
// 10 这个值赋给 num 这个变量
var num = 10+= : 加等于运算符
-= : 减等于运算符
*= :乘等于运算符
/= : 除等于运算符
%= : 取余等于运算符
代码示例1：
var n1=10
//执行加等于运算
n1+=10
console.log(n1)代码示例2：
var n1 = 10
// 执行加等于运算
n1=n1 + 10
console.log(n1)比较运算符
>:大于比较
<:小于比较
>=:大于等于
<=:小于等于
代码示例：
console.log(200>100)
console.log(100<200)
console.log(100>=100)
console.log(100<=100)== :等于比较
=== :全等于比较
示例代码：
// == : 只比较 值 是不是相等，不考数据类型
console.log(10 == 10)
console.log(10 == '10')
// === :必须要值和 数据类型都相等，才是 true
console.log(10 === 10)
console.log(10 ==='10')!= :不等于比较
!== :不全等于比较
示例代码：
// == : 只比较 值 是不是不相等，不考数据类型
console.log(10 != 10)
console.log(10 != '10')
// === 必须要值和 数据类型任何一个不相等，才是 true
console.log(10 !== 10)
console.log(10 !=='10')逻辑运算符
&& :与 运算
||:或 运算
!:非 运算
代码示例1：
// &&:必须两边都为 true 最终结果才是 true
console.log(true && true)
console.log(true && false)
console.log(false && true )
console.log(false && false)代码示例2：
// ||:只要任意一边为 true 最终结果才是 true
console.log(true || true)
console.log(true || false)
console.log(false || true )
console.log(false || false)代码示例3：
// !:本身是 true 结果就是 false，本身是 false，结果就是 true
console.log( !true)
console.log( !false)自增自减运算符
同C语言用法
0190 条件分支语句-if
If (){...}
If (){...}else{...}
if (){...}else if(){...}
if (){...}else if(){...} else{...}
()里面书写的是条件
{}里面书写的是条件满足时执行的代码
示例代码1：
var money=10000
//满足条件就执行，不满足就不执行
if (money>=5000){
console.log('吃米其林三星')
}else{
console.log('只能选择回家，听我妈问我为什么还不找女朋友')
}示例代码2：
var money=800
//满足条件就执行，不满足就不执行
if (money>=5000){
console.log('吃米其林三星')
}else if(money>=500){
console.log('我可以选择吃快餐')
}代码示例3：
var money=0
//满足条件就执行，不满足就不执行
if (money>=5000){
console.log('吃米其林三星')
}else if(money>=500){
console.log('我可以选择吃快餐')
}else{
console.log('只能选择回家，听我妈问我为什么还不找女朋友')
}总结：
If (){...} 条件满足就执行，不满足就不执行
If (){...}else{...} 条件满足就执行if的{}，不满足就执行else的{}
if (){...}else if(){...} 满足哪一个if就执行哪一个if的{}，前面有条件满足了，就不考虑后面的
if (){...}else if(){...} else{...} 所有条件都不满足时，就会执行else后面的{}
0191 案例-平闰年
示例代码：
//定义一个变量表示年份信息
var year=2078
//书写if语句进行判断
if (year%4===0&&year%100!==0||year%400===0){
console.log(year+'是闰年')
}else{
console.log(year+'不是闰年')
}
0192 条件分支语句-switch
Switch(已知条件){
Case 选项1：
...
Case 选项2：
...
}
根据已知条件找到一个完全匹配的选项，执行对应的代码
代码示例：
//准备一个变量
var foot=37
//使用switch语句进行选择
switch(foot){
case 37:
console.log('买一双37号的鞋')
break
case 40:
console.log('买一双40号的鞋')
break
}
Switch(已知条件){
Case 选项1：
...
Case 选项2：
...
Default：
...
}
当所有选项和已知条件不符合的时候，会执行默认代码
代码示例：
//准备一个变量
var foot=42
//使用switch语句进行选择
switch(foot){
case 37:
console.log('买一双37号的鞋')
break
case 40:
console.log('买一双40号的鞋')
break
default:
console.log('我去别家店里看一看')
}后面的选项不管是不是成立都会执行其中的代码
代码示例：
//准备一个变量，当做已知条件
var foot=37
//使用switch语句进行选择
switch(foot){
case 37:
console.log('买一双37号的鞋')
case 40:
console.log('买一双40号的鞋')
case 42:
console.log('买一双40号的鞋')
case 45:
console.log('买一双40号的鞋')
default:
console.log('我去别家店里看一看')
}会一直向下穿透，直到遇到一个break为止
总结：
- 找到和已知条件 完全匹配 的选项执行
- 执行完毕代码需要写 break，不然会 向下穿透
- 可以书写一个 default，会在所有选项都不匹配 的时候执行
- 当发生穿透效果的时候，会从 第一个满足条件 的选项开始向下穿透
0193 案例-一年中的第几天
代码示例：
//准备三个变量，分别表示 年 月 日
var year=2008
var month=8
var date= 8
//在准备一个变量接受统计结果
var total=0年 暂时忽略，都按照平年计算
日 不需要计算
月 按照月份累加之前月份的整月天数
1 月，不需要累加
2 月，需要累加 1 月的整月天数
3 月，需要累加 1 月和 2 月的整月天数
4 月，需要累加 1 月和 2 月和 3 月的整月天数
12 月，需要累加 1 - 11 月的整月天数
代码示例：
//准备三个变量，分别表示 年 月 日
var year=2008
var month=8
var date=8
//在准备一个变量接受统计结果
var total=0
//使用switch叠加月份信息
switch(month){
case 12: total+=30;
case 11: total+=31;
case 10: total+=30;
case 9: total+=31;
case 8: total+=31;
case 7: total+=30;
case 6: total+=31;
case 5: total+=30;
case 4: total+=31;
case 3:
if (year%4===0&&year%100!==0||year%400===0){
total+=29;
}else{
total+=28;
}
case 2: total+=31;
}
//直接叠加当月天数
total+=date
//此时total就是当年的第几天了
console.log(total)0194 循环结构语句-while
While(条件){
会被重复执行的代码
...
}
代码示例：
//定义初始变量n
var n=0 //开始
//条件判断n<总数
while(n<3){ //结束
//一段重复的代码
console.log('走一个石板')
//改变初始值
n++ //步长
}
//后续代码
console.log('继续走后面的路')总结：
定义初始变量n
While(条件){
会被重复执行的代码
...改变初始值
}
- While会一直重复的执行一段代码，直到重复结束才会继续执行后续的代码
- 千万要书写改变初始值的代码，不然会出现死循环
- 在循环内，初始值、条件判断和改变初始值都能控制循环的次数
- 在循环内，循环控制变量是一组有规律的数字
示例代码：
//准备变量接受阶乘结果
var total=1
//开始：10
var n=10
//结果：>=1
while(n>=1){
//输出看一下数字
// console.log(n)
//把每一个数字阶乘到total变量上
total*=n
//步长：1
n--
}0195 循环结构语句-dowhile
do{
会被重复执行的代码
...
}While(条件)
代码示例1：
//定义初始变量n
var n=0 //开始
//条件判断n<总数
do{ //结束
//一段重复的代码
console.log('走一个石板')
//改变初始值
n++ //步长
}while(n<3)
//后续代码
console.log('继续走后面的路')代码示例2：
//定义初始变量n
var n=10 //开始
//条件判断n<总数
do{ //结束
//一段重复的代码
console.log('走一个石板')
//改变初始值
n++ //步长
}while(n<3)
//后续代码
console.log('继续走后面的路')当初始变量在条件以内的时候，while和dowhile循环是一样的
当初始变量在条件以内的时候，
while循环一次都不执行
dowhile循环会执行一次
在浏览器回答问题
打开浏览器时提示一个问题让用户回答只有答对，才可以继续浏览网页，如果错误，那么再次弹出同样的问题
逻辑
打开浏览器直接弹出问题
开始进行判断，如果答案一致，继续执行后续代码，如果答案不一致，重复弹出
示例代码：
//do while 循环先执行代码 后判断
do{
var result = prompt('你爱不爱我')
}while(result!=='yes')
//如果输入了yes就会执行到这里
alert('我也爱你')0196 循环结构语句-for
for(定义初始变量; 条件判断; 改变初始值){
重复执行的代码
...
}
示例代码1：
//for循环结构语句
for(var i=0;i<3;i++){
console.log('走了一个石板路')
}
//循环结束之后执行的代码
console.log('继续走后面的路')示例代码2：
//for循环结构语句
for(var i=0;i<3;i++){
console.log(i)
}
//循环结束之后执行的代码
console.log('继续走后面的路')示例代码3：
//利用for循环拿到1~100的数字
for(var i=1;i<=100;i++){
//判断是3的倍数
if(i%3===0){
console.log(i)
}
}0197 案例-循环的练习1
页面打印正方形
分析：
如何在页面输出一个*：document.write(‘*’)
如何在页面输出一行*：输出一个代码重复执行九次
如何在页面输出九行*：输出一行代码重复执行九次
代码示例1：
// 尝试在页面输出一个*
document.write('*')代码示例2：
// 尝试在页面输出一行9个*
// 开始:1
// 结束:<=9
// 步长:1
for (var i=1;i<=9;i++){
document.write('* ')
}代码示例3：
// 尝试在页面输出一行9个*
// 开始:1
// 结束:<=9
// 步长:1
for (var i=1;i<=9;i++){
document.write('* ')
}
// 每输出一行*以后需要一个换行
document.write('</br>')
// 尝试输出第二行9个*
for (var i=1;i<=9;i++){
document.write('* ')
}代码示例4：
// 把输出一行的代码重复执行九次
for (var j=1;j<=9;j++){
// 尝试在页面输出一行9个*
// 开始:1
// 结束:<=9
// 步长:1
for (var i=1;i<=9;i++){
document.write('* ')
}
// 每输出一行*以后需要一个换行
document.write('</br>')
}页面输出三角形
代码示例：
for (var j=1;j<=9;j++){
for (var i=1;i<=j;i++){
document.write('* ')
}
document.write('</br>')
}页面打印九九乘法表
代码示例：
for (var j=1;j<=9;j++){
for (var i=1;i<=j;i++){
document.write(i+'*'+j+'='+i*j+' ')
}
document.write('</br>')
}0198 案例-循环的练习2
寻找最大公约数
公约数：能同时被两个数字整除的数字
最大公约数：若干个公约数中最大的那一个
例如：12和24的最大公约数
12和24的公约数：12 6 4 3 2 1 ...
12和24的最大公约数：12
分析：
- <=相对小的那个数字
- >=1
- 能同时被两个数字整除
循环：
开始 12
结束 1
步长 1
数字 12 11 10 9...1
代码示例：
// 准备两个变量，保存两个数字
var max = 24
var min = 12
// 从相对小的数字向 1 进行循环
for (var i = min; i >= 1; i--){
// 判断能被 max 和 min 整除
if (max % i === 0 && min % i === 0){
// 输出这个数字
console.log(i)
// 这里可以直接结束循环了
break;
}
} 寻找最小公倍数
公倍数：能同时整除两个数字
最小公倍数：若干个公倍数中最小的那一个
例如：10和15的最小公倍数
10和15的公倍数：30 60 90 120...
10和15的最小公倍数：30
分析：
- >=相对大的那个数字
- <=两数乘积
- 能同时整除两个数字
循环：
开始 15
结束 10*15
步长 相对大的那个数字
数字 15 30 45 60... 150
代码示例：
// 准备两个变量，保存两个数字
var max = 15
var min = 10
// 从相对大的数字向 两数乘积 进行循环，步长为相对大的数字
for (var i = min; i <= min*max; i+=max){
// 只要能整除相对小的数字就可以
if (i%min===0){
console.log(i)
// 可以直接结束循环了
break
}
} 0199 JS的函数
函数定义阶段
把代码装进“盒子”里面
语法：
function fn() {
装在盒子里的代码
...
}
代码示例：
// 书写一个函数
function fn(){
console.log('我是一个叫做fn的函数')
}函数调用阶段
把“盒子”里面的代码执行
语法：
函数名（）
形参：
形参：一个特殊的变量
特殊：只能在函数内部使用
值：函数调用的时候，由实参确定
实参：
实参：给形参赋值
规则：按照从左到右的顺序依次赋值
示例代码：
// 定义一个函数，添加两个形参
function fn(a,b){
console.log('我是一个叫做fn的函数')
console.log(a)
console.log(b)
}
// 调用一个函数,添加两个实参
fn(10,20)
// 每次调用每次赋值
fn(100,200)形参：定义在函数内部的变量
实参：在调用函数时给形参赋值
利用函数求10的阶乘
代码示例1：
// 定义一个函数
function fn() {
var total = 1
// 开始:10
var n = 10
// 结束 :1
while (n >= 1) {
// 将每一个数字阶乘到 total 变量
total *= n
// 修改初始值
n--
}// 输出阶乘结果
console.log(total)
}
// 调用这个函数
fn( )代码示例2：
// 定义一个函数
function fn(n) {
var total = 1
// 结束 :1
while (n >= 1) {
// 将每一个数字阶乘到 total 变量
total *= n
// 修改初始值
n--
}// 输出阶乘结果
console.log(total)
}
// 调用这个函数
fn(12)函数的返回值
给函数调用添加一个结果
语法：
function fn() {
装在盒子里的代码
...
return 结果
}
代码示例3：
// 定义一个函数
function fn(n) {
var total = 1
// 结束 :1
while (n >= 1) {
// 将每一个数字阶乘到 total 变量
total *= n
// 修改初始值
n--
}
// 把计算结果作为函数的返回值
return total
}
// 调用这个函数，求12的阶乘，把结果赋值给r1
var r1=fn(12)
// 调用这个函数，求10的阶乘，把结果赋值给r2
var r2=fn(10)
console.log(r1,r2)总结：
1.函数就是 JS 中的一个数据类型而已
2.函数定义阶段，函数体内代码不执行调用一次执行一次
3. 形参：就是定义在函数内部使用的变量
实参：就是函数调用时给形参赋值的内容
4.在函数内使用return给函数添加一个结果作为函数的返回值
0200 递归函数
计算100的阶乘
当n为1的时候，到达折返点，该归回来了
一个函数调用了自身，并设置了结束条件，这个函数才是一个正确的递归函数。
案例：
斐波那契数列
数列：1 1 2 3 5 8 13 21 34 55 ...
规则：
1.第一位 和 第二位 必然是1
2.第三位开始每一位是前两位的 和
需求：求数列的第n位是多少
代码示例：
function fn(n){
if(n==1||n==2) return 1;
return fn(n-1)+fn(n-2);
}
0201 作用域
作用域：
一个变量可以在什么范围内使用
范围：
全局作用域：
一个页面就是一个全局作用域
私有作用域：
只有函数生成私有作用域
使用：
定义：
声明在什么位置上的变量就是哪一个作用域的变量
访问：
自己有用自己的，自己没有用父级的，以此类推，到全局都没有就报错
赋值：
自己给自己的赋值，自己没有给父级的赋值，以此类推，到全局都没有，定义为全局在赋值
0202 对象数据类型
创造一个对象（Object）
对象：键值对的集合
Var obj={hair:’没招’,eye:’没招’}
代码示例：
// 创建一个对象
var obj={
a:100,
b:true,
c:'hello world'
}
// 输出看一下
console.log(obj)对象的操作
对象内键值对的操作
增 向对象内添加一个键值对
删 删除对象内的一个键值对
改 修改对象内的一个键值对中的值
查 访问对象内的一个键值对中的值
代码示例1：
// 准备一个空对象
var obj={ }
// 输出看一下
console.log(obj)
// 增加一个键值对
// 语法一
obj.name='小灰狼'
// 语法二
obj['age']=18
// 再次输出看一下
console.log(obj)代码示例2：
// 准备一个空对象
var obj={ }
// 增加一些成员
obj.name='小灰狼'
obj['age']=18
obj.gender='男'
// 输出看一下
console.log(obj)
// 删除一个键值对
// 语法一
delete obj.name
// 语法二
delete obj['age']
// 再次输出看一下
console.log(obj)代码示例3：
// 准备一个空对象
var obj={ }
// 增加一些成员
obj.name='小灰狼'
obj['age']=18
obj.gender='男'
// 输出看一下
console.log(obj)
// 修改一个键值对的值
// 语法一
obj.name='公羊无衣'
// 语法二
obj['age']=30
// 再次输出看一下
console.log(obj)代码示例4：
// 准备一个空对象
var obj={ }
// 增加一些成员
obj.name='小灰狼'
obj['age']=18
obj.gender='男'
// 输出看一下
console.log(obj)
// 访问一个键值对的值
// 语法一
console.log(obj.name)
// 语法二
console.log(obj['age'])
总结：
创建 Var obj={hair:’没招’,eye:’没招’}
操作
增 对象名.键=值 or 对象名[‘键’]=值
删 delete 对象名.键 or delete 对象名[‘键’]
改 对象名.键=值 or 对象名[‘键’]=值
查 对象名.键 or 对象名[‘键’]
0203 数组数据类型
数组（Array）
数组：有序的数据的集合
Var arr=[100,true,’hello world’]
索引（下标）：从0开始，依次+1
代码示例：
// 创建一个数组
var arr=[100,true,'hello world']
// 输出一下
console.log(arr)数组的操作
长度的操作
获取长度 语法：数组名.length
设置长度 语法：数组名.length=数字
数据的长度
获取数据 语法：数组名[索引]
设置数据 语法：数组名[索引]=值
代码示例1：
// 准备一个数组
var arr=[100,200,300,400]
// 输出一下
console.log(arr)
// 获取数组的长度
console.log(arr.length)代码示例2：
// 准备一个数组
var arr=[100,200,300,400]
// 输出一下
console.log(arr)
// 获取数组的长度
console.log(arr.length)
// 修改一下数组的长度
arr.length=3
// 输出数组
console.log(arr)
// 输出数组的长度
console.log(arr.length)代码示例3：
// 准备一个数组
var arr=[100,200,300,400]
// 输出一下
console.log(arr)
// 输出数组中索引为2的数据
console.log(arr[2])代码示例4：
// 准备一个数组
var arr=[100,200,300,400]
// 输出一下
console.log(arr)
// 输出数组中索引为2的数据
console.log(arr[2])
// 修改数组中索引为2的数据
arr[2]=5678
// 再次输出一下
console.log(arr)
// 再次输出数组中索引为2的数据
console.log(arr[2])数组的遍历
代码示例：
// 准备一个数组
var arr=[100,200,300,400,500]
// 输出一下
console.log(arr)
// 书写循环
for (vari=0;i<arr.length;i++){
// 输出循环控制变量
console.log(arr[i])
}总结：
创建 var arr = [ 100，200，300，400，500 ]
排列 索引 :从0开始，依次 + 1
长度操作
访问 : 数组.Length
设置 : 数组.Length = 数字
数据操作
访问 : 数组[索引]
设置 :数组[索引] = 值
遍历 利用循环进行遍历，开始为 0，结束为 小于长度，步长为 1使用循环控制变量当做索引来访问数组里面的每一个数据
0204 冒泡排序
冒泡排序（Bubble Sort）
问题：让数组里面两个数据进行交换
借助一个变量来进行交换
代码示例1：
// 准备一个乱序的数组
var arr=[9,3,6,2,4,1,8,5,7]
// 输出一下
console.log(arr)
// 进行长度少1轮的比较
for (var j=0;j<arr.length-1;j++){
// 循环遍历数组
for (var i=0;i<arr.length-1-j;i++){
// 依次比较当前和下一数字
if (arr[i]>arr[i+1]){
// 条件为true的时候交换变量
var temp=arr[i]
arr[i]=arr[i+1]
arr[i+1]=temp
}
}
}
// 输出一下
console.log(arr)0205 选择排序
选择排序（Select Sort）
注意：不要过多的关注数据，需要关注索引
代码示例：
// 准备一个乱序的数组
var arr=[9,6,2,4,1,8,5,7]
// 输出一下
console.log(arr)
// 进行数组长度-1轮的比较
for (var j=0;j<arr.length-1;j++){
// 假设最小的数字索引是0
var minIndex=0
// 循环遍历数组,从索引1位置开始
for (var i=j+1;i<arr.length;i++){
// 判断是不是比我假设索引位置的数字小
if (arr[i]<arr[minIndex]){
// 如果条件为true,那么替换minIndex
minIndex=i
}
}
// 交换索引0位置和minIndex位置
var temp=arr[j]
arr[j]=arr[minIndex]
arr[minIndex]=temp
}
// 输出一次
console.log(arr)0206 数组常用方法
帮助我们对数组进行快速操作
push( )
语法：数组.push（数据）
作用：将数据追加到数组的末尾
返回值：追加数据后数组最新的长度
示例代码：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行push方法
var res=arr.push('追加的')
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)2.pop( )
语法：数组.pop( )
作用：删除数组最后一个数据
返回值：被删除的数据
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行pop方法
var res=arr.pop()
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)3.unshift( )
语法：数组.unshift（数据）
作用：将数据添加到数组的最前
返回值：添加数据后数组最新的长度
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行unshift方法
var res=arr.unshift('添加的')
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)shift( )
语法：数组.shift( )
作用：删除数组最前一个数据
返回值：被删除的数据
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行shift方法
var res=arr.shift()
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)5.reverse( )
语法：数组.reverse( )
作用：将数组反转
返回值：反转后的数组
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行reverse方法
var res=arr.reverse()
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)6.splice( )
语法 : 数组.splice( 开始索引，多少个，要插入的数据 )
开始索引 : 默认是0
多少个 : 默认是0
要插入的数据 : 默认是没有
作用 : 删除数组中若干数据，并选择是否插入新的数据
返回值 : 以新数组的形式返回被删除的数据
代码示例1：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行splice方法
var res=arr.splice(1,1)
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)代码示例2：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行splice方法
var res=arr.splice(1,1,'新来的')
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)
-
sort( )
语法：数组.sort( )
数组.sort(function (a,b){return a - b})
数组.sort(function (a,b){return b - a})
作用：将数组进行排序
返回值：排序好的新数组
代码示例：
// 准备一个原始数组
var arr=[11,1,22,13,45,32,2]
// 输出一次
console.log(arr)
// 执行sort方法
var res=arr.sort(function (a,b){return a - b})
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)8.join( )
语法：数组.join(连接符)
作用：将数组用连接符连接成为一个字符串
返回值：连接好的字符串
示例代码：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行join方法
var res=arr.join('-')
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)9.concat( )
语法 : 数组.concat( 其他数组 )
作用 :将其他数组和数组 拼接 在一起
返回值 : 拼接好的 新数组
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行concat方法
var res=arr.concat([500.600])
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)slice( )
语法 : 数组.slice( 开始索引，结束索引 )
开始索引 : 默认是0
结束索引 : 默认是数组长度
要插入的数据 : 默认是没有
作用 : 截取数组中的某些数据
返回值 : 以新数组的形式返回截取出来的数据
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行slice方法
var res=arr.slice(1,3)
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)indexOf( )
语法：数组.indexOf( 数据 )
作用：查找数据在数组中的索引位置
返回值：
有该数据，返回第一次出现的索引位置
没有该数据，返回-1
代码示例1：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行indexOf方法
var res=arr.indexOf(200)
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)代码示例2：
// 准备一个原始数组
var arr=[100,200,300,200]
// 输出一次
console.log(arr)
// 执行indexOf方法
var res=arr.indexOf(400)
// 输出一次数据
console.log(arr)
// 输出一次返回值
console.log(res)forEach( )
语法：数组.forEach( function(item,index,arr){})
作用：遍历数组
返回值：无
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行forEach方法
var res=arr.forEach(function(item,index,arr){
// item就是数组的每一项
console.log(item)
// index就是索引
console.log(index)
// arr就是原始数组
console.log(arr)
// 输出一个分割线
console.log('-----------------')
})map( )
语法：数组.map(function(item,index,arr){})
作用：映射函数
返回值：映射后的新数组
示例代码：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行map方法
var res=arr.map(function(item,index,arr){
// 以return的方式书写映射条件
return item*10
})
// 输出返回值
console.log(res)14.filter( )
语法：数组.filter(function(item,index,arr){})
作用：过滤数组
返回值：过滤后的新数组
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行filter方法
var res=arr.filter(function(item,index,arr){
// 以return的方式书写过滤条件
return item>150
})
// 输出返回值
console.log(res)
15.every( )
语法：数组.every(function(item,index,arr){})
作用：判断数组是不是每一项都满足条件
返回值：一个布尔值
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行every方法
var res=arr.every(function(item,index,arr){
// 以return的方式书写过滤条件
return item>50
})
// 输出返回值
console.log(res)16.some( )
语法：数组.some(function(item,index,arr){})
作用：判断数组是不是某一项满足条件
返回值：一个布尔值
代码示例：
// 准备一个原始数组
var arr=[100,200,300,400]
// 输出一次
console.log(arr)
// 执行some方法
var res=arr.some(function(item,index,arr){
// 以return的方式书写过滤条件
return item>150
})
// 输出返回值
console.log(res)总结：
0207 字符串常用方法
帮助我们对字符串进行快速操作
索引：从0开始，依次+1
字符串常用方法
charAt( )
语法：字符串.charAt(索引)
作用：获取对应索引位置的字符
返回值：对应索引位置的字符
代码示例：
// 准备一个原始数组
var str='你好，前端小灰狼'
// 输出一次
console.log(str)
// 执行every方法
var res=str.charAt(3)
// 输出返回值
console.log(res)toLowerCase( )
语法：字符串.toLowerCase( )
作用：将字符串内的字母全部转换成小写
返回值：转换好的字符串
代码示例：
// 准备一个原始数组
var str='Hello,Little Grey Wolf'
// 输出一次
console.log(str)
// 执行toLowerCase方法
var res=str.toLowerCase()
// 输出返回值
console.log(res)toUpperCase( )
语法：字符串.toUpperCase( )
作用：将字符串内的字母全部转换成大写
返回值：转换好的字符串
代码示例：
// 准备一个原始数组
var str='Hello,Little Grey Wolf'
// 输出一次
console.log(str)
// 执行toUpperCase方法
var res=str.toUpperCase()
// 输出返回值
console.log(res)replace( )
语法：字符串.replace(换下内容，换上内容)
作用：将字符串内第一个满足换下内容的片段替换成换上内容
返回值：替换好的字符串
代码示例：
// 准备一个原始数组
var str='你好，前端小灰狼，前端小灰狼'
// 输出一次
console.log(str)
// 执行replace方法
var res=str.replace('前端','帅气')
// 输出返回值
console.log(res)trim( )
语法：字符串.trim( )
作用：去除字符串首尾的空格
返回值：去除空格后的字符串
代码示例：
// 准备一个原始数组
var str=' 你好，世界 '
// 输出一次
console.log(str)
// 执行trim方法
var res=str.trim()
// 输出返回值
console.log(res)split( )
语法：字符串.split(分隔符)
作用 : 按照分隔符将字符串切割成为一个数组
返回值 : 切割后的数组
代码示例：
// 准备一个原始数组
var str='2070-3-22'
// 输出一次
console.log(str)
// 执行split方法
var res=str.split('-')
// 输出返回值
console.log(res)7.substr()
语法 : 字符串.substr( 开始索引，多少个 )
8.substring()
语法 : 字符串.substring( 开始索引，结束索引 )
9.slice()
语法 : 字符串.slice( 开始索引，结束索引 )
7、8、9的作用都是截取字符串，返回值都为截取出来的字符串
代码示例：
// 准备一个原始数组
var str='你好，前端小灰狼'
// 输出一次
console.log(str)
// 执行substr方法
var res1=str.substr(1,6)
// 输出返回值
console.log(res1)
// 执行substring方法
var res2=str.substring(1,6)
// 输出返回值
console.log(res2)
// 执行slice方法
var res3=str.slice(1,6)
// 输出返回值
console.log(res3)总结：
0208 数字常用方法
帮助我们对数字进行快速操作
数字的常用方法
1.random( )
语法 : Math.random()
作用 : 获取 0 ~1 之间的随机小数，包含 0，但是不包含 1
返回值 : 0~ 1 之间的随机小数
代码示例：
// 直接使用random方法获取随机小数
var res=Math.random()
// 输出获取结果
console.log(res)2.round( )
语法 : Math.round()
作用 : 对数字进行四舍五入取整
返回值 : 四舍五入后的整数
代码示例：
// 直接使用round方法取整一个数字
var res1=Math.round(10.4)
// 输出获取结果
console.log(res1)
// 直接使用round方法取整一个数字
var res2=Math.round(10.5)
// 输出获取结果
console.log(res2)3.ceil( )
语法 : Math.ceil()
作用 : 对数字进行向上取整
返回值 : 向上取整后的整数
4.floor( )
语法 : Math.floor()
作用 : 对数字进行向下取整
返回值 : 向下取整后的整数
代码示例：
// 直接使用ceil方法取整一个数字
var res1=Math.ceil(10.5)
// 输出获取结果
console.log(res1)
// 直接使用floor方法取整一个数字
var res2=Math.floor(10.5)
// 输出获取结果
console.log(res2)5.pow( )
语法 : Math.pow(底数，指数)
作用 : 对数字进行取幂运算
返回值 : 取幂后的结果
代码示例：
// 直接使用pow方法对一个数字进行取幂运算
var res=Math.pow(2,5)
// 输出获取结果
console.log(res)6.sqrt( )
语法 : Math.sqrt(数字)
作用 : 对数字进行二次方根运算
返回值 : 二次方根后的结果
代码示例：
// 直接使用sqrt方法获取一个数字的二次方根
var res=Math.sqrt(4)
// 输出获取结果
console.log(res)7.abs( )
语法 : Math.abs(数字)
作用 : 对数字进行绝对值运算运算
返回值 : 绝对值运算后的结果
代码示例：
// 直接使用abs方法获取一个数字的绝对值
var res=Math.abs(-10)
// 输出获取结果
console.log(res)8.max( )
语法 : Math.max(数字1，数字2，数字3，...)
作用 : 获取若干个数的最大值
返回值 : 若干个数的最大值
代码示例：
// 直接使用max方法获取若干个数的最大值
var res=Math.max(-10,20,-19,35,22,31)
// 输出获取结果
console.log(res)9.min( )
语法 : Math.min(数字1，数字2，数字3，...)
作用 : 获取若干个数的最小值
返回值 : 若干个数的最小值
代码示例：
// 直接使用min方法获取若干个数的最小值
var res=Math.min(-10,20,-19,35,22,31)
// 输出获取结果
console.log(res)PI
语法：Math.PI
作用：得到一个近似π的值
代码示例：
// 直接获取一个近似π的数字
var res=Math.PI
// 输出获取结果
console.log(res)案例
代码示例1：
// 1.获取一个随机小数
var r1 = Math.random( )
// 2.使用这个随机小数乘以 10
var r2 = r1 * 10
// 3，对这个数字进行四舍五入取整
var res = Math .round( r2 )
// 输出最后结果
console.log (res)代码示例2：
// 1.获取一个随机小数
var r1 = Math.random( )
// 2.使用这个随机小数乘以 11
var r2 = r1 * 11
// 3，对这个数字进行四舍五入取整
var res = Math .floor( r2 )
// 输出最后结果
console.log (res)封装函数，获取一个范围内的随机整数
获取 0 ~ 20 之间的随机整数
分析 :
- Math.random() 可以获取到一个 0~ 0.999...之间的随机小数
- 把这个数字乘以 21，就能得到一个 0 ~ 20.999... 之间的随机小数
- 把得到的结果使用 Math.floor() 进行取整，就能得到一个 0 ~ 20 之间的整数
代码示例：
// 1.获取一个随机小数
var r1 = Math.random( )
// 2.使用这个随机小数乘以 21
var r2 = r1 * 21
// 3，对这个数字进行四舍五入取整
var res = Math .floor( r2 )
// 输出最后结果
console.log (res)封装函数，获取一个范围内的随机整数
获取 x ~y 之间的随机整数
0~两数差 之间的随机整数，然后 + 小一点的数字
代码示例：
// 准备一个函数，接受两个参数
function randomNum(min, max){
// 2，求 0 ~两数差 的随机整数
var res = Math.floor( Math.random() * ( max - min + 1 ) )
// 3，使用随机整数 + 相对小的数手
var res2 = res + min
// 把计算结果当做返回值
return res2
}
//需要获取10-20的随机整数
var res = randomNum(10,20)总结：
0209 时间常用方法
时间（Date）
var time=new Date()
var time=new Date(年，月，日，时，分，秒)
代码示例：
// 创建一个时间对象
var time = new Date(2002,1,23,11,22,18)
// 输出一次
console.log(time)获取：
时间对象.getFullYear( ) 获取到时间对象中的年份信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的年份信息
var year=time.getFullYear()
// 输出年份信息
console.log(year)时间对象.getMonth( ) 获取到时间对象中的月份信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的月份信息
var month=time.getMonth()
// 输出月份信息
console.log(month)时间对象.getDate( ) 获取到时间对象中的日期信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的日期信息
var date=time.getDate()
// 输出日期信息
console.log(date)时间对象.getHours( ) 获取到时间对象中的小时信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的小时信息
var hours=time.getHours()
// 输出小时信息
console.log(hours)时间对象.getMinutes( ) 获取到时间对象中的分钟信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的分钟信息
var minutes=time.getMinutes()
// 输出分钟信息
console.log(minutes)时间对象.getSeconds( ) 获取到时间对象中的秒钟信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的秒钟信息
var seconds=time.getSeconds()
// 输出秒钟信息
console.log(seconds)时间对象.getDay( ) 获取到时间对象中的星期信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的星期信息
var week=time.getDay()
// 输出星期信息
console.log(week)
时间对象.getTime( ) 获取到时间对象中的时间戳信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 获取事件对象的时间戳信息
var ms=time.getTime()
// 输出时间戳信息
console.log(ms)
设置：
- 时间对象.setFullYear( ) 设置时间对象中的年份信息
- 时间对象.setMonth( ) 设置时间对象中的月份信息
- 时间对象.setDate( ) 设置时间对象中的日期信息
- 时间对象.setHours( ) 设置时间对象中的小时信息
- 时间对象.setMinutes( ) 设置时间对象中的分钟信息
6. 时间对象.setSeconds( ) 设置时间对象中的秒钟信息
7. 时间对象.setTime( ) 设置时间对象中的时间戳信息
代码示例：
// 创建一个时间对象
var time = new Date()
// 输出一次
console.log(time)
// 设置年份信息
time.setFullYear(2002)
// 设置月份信息
time.setMonth(2)
// 设置日期信息
time.setDate(23)
// 设置小时信息
time.setHours(11)
// 设置分钟信息
time.setMinutes(22)
// 设置秒钟信息
time.setSeconds(18)
// 再次输出事件对象
console.log(time)0210 JS的BOM操作
BOM - Browser object Model
整套操作浏览器相关内容的属性和方法
操作浏览器历史记录
操作浏览器滚动条
操作浏览器页面跳转
操作浏览器标签页的开启和关闭
...
获取浏览器窗口尺寸
获取可视窗口宽度 : window.innerWidth
获取可视窗口高度 : window.innerHeight
代码示例：
// 获取浏览器可视窗口宽度
var w = window.innerWidth
// 获取浏览器可视窗口高度
var h = window.innerHeight
// 输出一下
console.log(w)
console.log(h)浏览器的弹出层
提示框：window.alert(‘提示信息’)
询问框：window.confirm(‘提示信息’)
输入框：window.prompt(‘提示信息’)
代码示例1：
// 警告框
window.alert('欢迎光临')代码示例2：
// 询问框
var res=window.confirm('你爱我吗？')
// 输出返回值
console.log(res)代码示例3：
// 输入框
var res=window.prompt('请输入您的银行卡密码')
// 输出返回值
console.log(res)开启和关闭标签页
开启：window.open(‘地址’)
关闭：window.close( )
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button id="on">开启</button>
<button id="off">关闭</button>
<script>
// 开启按钮的点击事件
on.onclick=function(){
// 开启标签页
window.open('http://www.mobiletrain.org/')
}
// 关闭按钮的点击事件
off.onclick=function(){
// 关闭标签页
window.close()
}
</script>
</body>
</html>浏览器常见事件
资源加载完毕：window.οnlοad=function(){}
可视尺寸改变：window.οnresize=function(){}
滚动条位置改变：window.οnscrοll=function(){}
示例代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<img src="图片路径" alt="" />
<script>
// 资源加载完毕
window.onload=function(){
console.log('资源已经加载完毕')
}
</script>
</body>
</html>示例代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 窗口尺寸改变
window.onresize=function(){
console.log('窗口尺寸发生改变了')
}
</script>
</body>
</html>示例代码3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
// 滚动条位置变化
window.onscroll=function(){
console.log('滚动条位置改变了')
}
</script>
</body>
</html>浏览器的历史记录操作
回退页面：window.history.back( )
前进页面：window.history.forward( )
浏览器卷去的尺寸
卷去的高度：
document.documentElement.scrollTop
document.body.scrollTop
卷去的宽度：
document.documentElement.scrollLeft
document.body.scrollLeft
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
// 滚动条位置变化
window.onscroll=function(){
// 兼容的写法
var height=document.documentElement.scrollTop||document.body.scrollTop
console.log(height)
}
</script>
</body>
</html>浏览器滚动到
滚动到：window.scrollTo( )
参数方式1：window.scrollTo(left,top)
Left：浏览器卷去的宽度
top：浏览器卷去的高度
参数方式2：window.scrollTo({
left:xx,
top:yy,
Behavior:’smooth’
})
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body{
width: 3000px;
height: 3000px;
}
button{
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="go">走你</button>
<script>
// 按钮添加点击行为
go.onclick=function(){
// 浏览器滚动到指定位置
window.scrollTo(300.400)
}
</script>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
body{
width: 3000px;
height: 3000px;
}
button{
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="go">走你</button>
<script>
// 按钮添加点击行为
go.onclick=function(){
// 浏览器滚动到指定位置
window.scrollTo({
left:300,
top:400,
Behavior:'smooth'
})
}
</script>
</body>
</html>总结：
0211 JS的定时器
间隔定时器
按照指定周期（毫秒）去执行指定的代码
语法：setInerval(函数，时间)
函数：每次要执行的内容
时间：单位是毫秒
代码示例：
// 书写一个定时器
setInterval(function(){
console.log('执行一次')
},1000)延时定时器（炸弹定时器）
在固定的时间（毫秒）后指定一次代码
语法：setTimeout(函数，时间)
函数：时间到达执行的内容
时间：单位是毫秒
代码示例：
// 书写一个定时器
setTimeout(function(){
console.log('执行一次')
},1000)
定时器的返回值
不区分定时器种类
表示是当前页面的第几个定时器
代码示例：
// 书写第一个定时器
var timer1=setInterval(function(){},1000)
// 书写第二个定时器
var timer2=setTimeout(function(){},1000)
// 输出返回值
console.log('timer1:',timer1)
console.log('timer2:',timer2)关闭定时器
语法一：clearInterval(要关闭的定时器返回值)
语法二：clearTimeout(要关闭的定时器返回值)
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button id="close">关闭定时器</button>
<script>
// 开启定时器
// 书写第一个定时器
var timer1=setInterval(function(){console.log('间隔定时器')},1000)
// 书写第二个定时器
var timer2=setTimeout(function(){console.log('延时定时器')},3000)
// 给按钮绑定点击事件
close.onclick=function(){
// 关闭定时器
clearInterval(timer1)
clearInterval(timer2)
}
</script>
</body>
</html>
总结：
0212 JS的DOM基本操作（上）
DOM - Document object Model
一整套操作文档流相关内容的属性和方法
操作 元素 修改样式
操作 元素修改属性
操作 元素 改变位置
操作 元素 添加事件
...
获取元素的方式
确定要你要操作的是哪一个元素
根据id名称获取
语法 : document.getElementById(‘ id名称’)
作用 : 获取文档流中 id 名对应的 一个 元素
返回值 :
如果有 id 对应的元素，就是 这个元素
如果没有 id 对应的元素，就是 null
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 根据id获取页面元素
var ele=document.getElementById('container')
// 输出返回值
console.log(ele)
</script>
</body>
</html>根据元素类名获取
语法 : document.getElementsByClassName(‘元素类名’)
作用 : 获取文档流中 所有 类名对应的元素
返回值 : 必然是一个 伪数组
如果有类名对应的元素，有多少获取多少
如果没有类名对应的元素，空的伪数组
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 根据类名获取页面元素
var eles=document.getElementsByClassName('box')
// 输出返回值
console.log(eles)
</script>
</body>
</html>根据元素标签名获取
语法 : document.getElementsByTagName(‘标签名’)
作用 : 获取文档流中 所有 标签名对应的元素
返回值 : 必然是一个 伪数组
如果有标签名对应的元素，有多少获取多少
如果没有标签名对应的元素，空的伪数组
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 根据标签名获取页面元素
var eles=document.getElementsByTagName('div')
// 输出返回值
console.log(eles)
</script>
</body>
</html>根据选择器获取一个
语法 : document.querySelector(‘选择器’)
作用 : 获取文档流中满足选择器规则的 第一个 元素
返回值 :
如果有选择器对应的元素，获取到 第一个
如果没有选择器对应的元素，null
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 根据选择器获取页面元素
var ele=document.querySelector('.box')
// 输出返回值
console.log(ele)
</script>
</body>
</html>根据选择器获取一组
语法 : document.querySelectorAll(‘选择器’)
作用 : 获取文档流中 所有 满足选择器规则的元素
返回值 : 必然是一个 伪数组
如果有选择器对应的元素，有多少获取多少
如果没有选择器对应的元素，空的伪数组
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>一号</div>
<div class="box">二号</div>
<div class="box content">三号</div>
<div class="box" id="container">四号</div>
<script>
// 根据选择器获取页面元素
var eles=document.querySelectorAll('div')
// 输出返回值
console.log(eles)
</script>
</body>
</html>
操作元素内容
操作元素文本内容
获取：元素.innerText
设置：元素.innerText=’新内容’
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作内容</button>
<div>
<p>文本内容</p>
</div>
<script>
// 获取元素
var ele=document.querySelector('div')
var btn=document.querySelector('button')
// 获取元素的文本内容
console.log(ele.innerText)
// 给按钮绑定点击事件
btn.onclick=function(){
// 设置div内的文本内容
ele.innerText='新内容'
}
</script>
</body>
</html>操作元素超文本内容
获取：元素.innerHTML
设置：元素.innerHTML=’新内容’
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作内容</button>
<div>
<p>文本内容</p>
</div>
<script>
// 获取元素
var ele=document.querySelector('div')
var btn=document.querySelector('button')
// 获取元素的文本内容
console.log(ele.innerHTML)
// 给按钮绑定点击事件
btn.onclick=function(){
// 设置div内的文本内容
ele.innerHTML='<span>新内容</span>'
}
</script>
</body>
</html>操作元素属性
原生属性：
获取：元素.属性名
设置：元素.属性名=’属性值’
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作内容</button>
<div id="box">div 标签</div>
<input type="password" />
<script>
// 获取元素
var box=document.querySelector('div')
var inp=document.querySelector('input')
var btn=document.querySelector('button')
// 获取元素属性
console.log(box.id)
console.log(inp.type)
</script>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作内容</button>
<div id="box">div 标签</div>
<input type="password" />
<script>
// 获取元素
var box=document.querySelector('div')
var inp=document.querySelector('input')
var btn=document.querySelector('button')
// 给元素绑定点击事件
btn.onclick=function(){
// 修改元素属性
box.id='content'
inp.type='checkbox'
}
</script>
</body>
</html>自定义属性
获取：元素.getAttribute(‘属性名’)
设置：元素.setAttribute(‘属性名’,’属性值’)
删除：元素.removeAttribute( ‘属性名’ )
注意：以上方法一般不用做操作元素类名和样式
代码示例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<script>
// 获取元素
var box=document.querySelector('div')
var btn=document.querySelector('button')
// 获取自定义属性
var res=box.getAttribute('hello')
console.log(res)
</script>
</body>
</html>代码示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作属性</button>
<div id="box" hello="world">div 标签</div>
<script>
// 获取元素
var box=document.querySelector('div')
var btn=document.querySelector('button')
// 给按钮绑定点击事件
btn.onclick=function(){
// 修改自定义属性
box.setAttribute('hello','新来的')
}
</script>
</body>
</html>操作元素类名
获取：元素.className
设置：元素.className=’新类名’
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作类名</button>
<div class="content">div 标签</div>
<script>
// 获取元素
var box=document.querySelector('div')
var btn=document.querySelector('button')
// 获取类名
console.log(box.className)
// 给按钮绑定点击事件
btn.onclick=function(){
// 设置div的类名
ele.className='box'
}
</script>
</body>
</html>操作元素行内样式
获取：元素.style.样式名
设置：元素.style.样式名=’样式值’
注意：只能获取和设置元素的行内样式
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>操作类名</button>
<div style="width: 100px; height: 100px; background-color: pink">文本内容</div>
<script>
// 获取元素
var box=document.querySelector('div')
var btn=document.querySelector('button')
// 给按钮绑定点击事件
btn.onclick=function(){
// 设置div的样式
box.style.width='200px'
box.style.height='300px'
box.style.backgroundColor='skyblue'
}
</script>
</body>
</html>获取元素非行内样式
获取：window.getComputedstyle(元素).样式名
注意：可以获取行内样式，也可以获取非行内样式
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
font-size: 20px;
}
</style>
</head>
<body>
<button>操作类名</button>
<div style="width: 100px; height: 100px; background-color: pink">文本内容</div>
<script>
// 获取元素
var box=document.querySelector('div')
var btn=document.querySelector('button')
// 获取非行内样式
console.log(window.getComputedStyle(box).width)
console.log(window.getComputedStyle(box).height)
console.log(window.getComputedStyle(box).fontSize)
</script>
</body>
</html>总结：
获取元素
document .getElementById( )
document.getElementsByClassName( )
document .getElementsByTagName( )
document.querySelector()
document.querySelectorAll( )
操作元素内容
文本内容 : 元素.innerText
超文本内容 : 元素.innerHTML
操作元素原生属性
获取 :元素.属性名
设置 : 元素.属性名 = ‘属性值’
操作元素自定义属性
获取 : 元素.getAttribute()
设置 : 元素.setAttribute()
删除 : 元素.removeAttribute()
操作元素类名
获取 : 元素.className
设置 : 元素.className =’新类名’
操作元素行内样式
获取 : 元素.style.样式名
设置 : 元素.style.样式名 =’样式值’
获取元素非行内样式
Window.getComputedStyle(元素).样式名
0213 案例-回到顶部
确认需求 :
- 滚动条滚动超过临界点，顶部通栏显示，否则隐藏
- 滚动条滚动超过临界点，回到顶部按钮显示，否则隐藏
- 点击回到顶部按钮，滚动条滚动回到顶部
布局结构：
1.需要一个顶部通栏标签和一个回到顶部按钮标签
2.让页面超过浏览器可视窗口高度
3.设置顶部通栏样式，默认是在超出页面的
4.设置回到顶部按钮样式，默认是在隐藏的
代码逻辑：
1.给浏览器绑定滚动事件，实时获取浏览器卷去的高度
2.判断卷去的高度决定隐藏还是显示
3.给回到顶部按钮绑定点击事件
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.header{
width: 100%;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #fff;
background-color: skyblue;
transition: top .5s linear;
position: fixed;
top: -80px;
left: 0;
}
.goTop{
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
line-height: 25px;
color: #fff;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>
<script>
// 1.获取元素
var header=document.querySelector('.header')
var goTop=document.querySelector('.goTop')
// 2.绑定滚动事件
window.onscroll=function(){
// 2-1.获取浏览器卷去的高度
var height=document.documentElement.scrollTop||document.body.scrollTop
// 2-2.判断卷去的高度
if(height>=300){
header.style.top='0px'
goTop.style.display='block'
}else{
// 隐藏
header.style.top='-80px'
goTop.style.display='none'
}
}
// 确定点击事件
goTop.onclick=function(){
// 3-1,让页面滚动回到顶部
window.scrollTo({
top:0,
behavior:'smooth'
})
}
</script>
</body>
</html>0214 案例-全选
确认需求
1.全选按钮点击的时候，根据自身状态决定所有选项按钮状态
2.点击每一个选项按钮的时候，根据所有选项按钮状态决定全选按钮状态
布局结构：
1.需要一个全选按钮和若干个选项按钮标签
代码逻辑：
1.给全选按钮绑定点击事件
-拿到自己的选中状态
-给所有选项按钮设置选中状态
- 给每一个选项按钮绑定点击事件
-判断是不是所有选项按钮都是选中的
-根据判断结果给全选按钮设置选中状态
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.box{
width: 100px;
padding: 20px;
border: 1px solid pink;
margin: 30px auto;
border-radius: 5px;
}
br{
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
全选：<input type="checkbox" /><br />
<hr />
<input type="checkbox" />选项一<br />
<input type="checkbox" />选项二<br />
<input type="checkbox" />选项三<br />
<input type="checkbox" />选项四<br />
</div>
<script>
// 1.获取元素
var allBtn=document.querySelector('input')
var items=document.querySelectorAll('input:nth-child(n + 2)')
// 2.给全选按钮绑定事件
allBtn.onclick=function(){
// 2-1,拿到自己的选中状态
var type=allBtn.checked
// 2-2,把自己的选中状态设置给每一个选项按钮
for(var i=0;i<items.length;i++){
items[i].checked=type
}
}
//3.循环给每一个选项按钮绑定点击事件
for(var i=0;i<items.length;i++){
// 3-1给每一个选项按钮绑定点击事件
items[1].onclick=function(){
// 3-2,首先定义假设变量,假设所有按钮都是选中的
var flag=true
// 3-3,通过循环来验证我们的假设
for(var j=0;j<items.length;j++){
if(items[j].checked===false){
flag=false
break
}
}
// 3-4,把我们得到的结果设置给全选按钮
allBtn.checked=flag
}
}
</script>
</body>
</html>0215 案例-选项卡
布局结构：
- 三个表示按钮的盒子，横向排列，初始一个高亮
- 三个显示内容的盒子，在同一位置不同层级排列，出示一个显示
代码逻辑：
- 每一个按钮盒子绑定一个事件
- 点击任何一个按钮盒子时
-所有按钮盒子取消高亮状态
-所有内容盒子隐藏
- 点击任何一个按钮盒子时
-当前按钮盒子高亮
-当前索引对应的内容盒子显示
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
.box{
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box>ul{
height: 60px;
display: flex;
}
.box>ul>li{
flex: 1;
color: #fff;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box>ul>li.active{
background-color: orange;
}
.box>ol{
flex: 1;
position: relative;
}
.box>ol>li{
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box>ul>li.active{
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
var btns=document.querySelectorAll("ul>li")
var tabs=document.querySelectorAll("ol>li")
btns.onclick=function(){
btns.forEach(function(t,i){
t.className=''
tabs[i].className=''
})
item.className='active'
tabs[index].className='active'
}
</script>
</body>
</html>0216 JS的DOM基本操作（下）
节点操作
创建节点
语法 : document.createElement( ‘标签名称’ )
作用 : 创建一个指定标签元素
返回值 :一个创建好的元素节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<script>
// 创建一个div标签
var div=document.createElement('div')
// 控制台输出
console.log(div)
</script>
</body>
</html>插入节点
语法1：父节点.appendChild(子节点)
作用：把子节点放在父节点内部，并且放在最后的位置
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
</div>
<script>
// 创建一个span标签
var span=document.createElement('span')
// 向span内添加一些文本内容
span.innerText='我是创建出来的span标签'
// 输出一下
console.log(span)
// 获取到页面上的div元素
var div=document.querySelector('div')
// 把创建的span标签插入到div内部
div.appendChild(span)
</script>
</body>
</html>语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
作用：把子节点放在父节点内部，并且放在指定某一个子节点的前面
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
</div>
<script>
// 创建一个span标签
var span=document.createElement('span')
// 向span内添加一些文本内容
span.innerText='我是创建出来的span标签'
// 输出一下
console.log(span)
// 获取到页面上的div元素
var div=document.querySelector('div')
// 获取到div内部的p标签
var p=document.querySelector('p')
// 把获取的span标签插入到div内部,并且放在p标签的前面
div.insertBefore(span,p)
</script>
</body>
</html>删除节点
语法1：父节点.removeChild(子节点)
作用：从父节点内删除某一个子节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
<span>我是div内部本身的span标签</span>
</div>
<script>
// 获取到页面上的div元素
var div=document.querySelector('div')
// 获取到div内部的p标签
var p=document.querySelector('p')
// 从div内部删除p元素
div.removeChild(p)
</script>
</body>
</html>语法2：节点.remove()
作用：把自己直接删除
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
<span>我是div内部本身的span标签</span>
</div>
<script>
// 获取到页面上的div元素
var div=document.querySelector('div')
// 把div删除
div.remove()
</script>
</body>
</html>替换节点
语法：父节点.replaceChild(换上节点，换下节点)
作用：再父节点内，使用换上节点替换掉换下节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
<span>我是div内部本身的span标签</span>
<p>我是div内部本身的p标签</p>
</div>
<script>
// 创建一个i标签
var i=document.createElement('i')
// 向i标签内添加一些文本
i.innerText='我是创建出来的i标签'
// 获取到div元素
var div=document.querySelector('div')
// 获取到span元素
var span=document.querySelector('span')
// 使用创建的i标签去替换div内本身的span标签
div.replaceChild(i,span)
</script>
</body>
</html>
克隆节点
语法：节点.cloneNode(是否克隆后代节点)
作用：把该节点复制一份一模一样的内容
返回值：克隆好的节点
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div>
<p>我是div内部本身的p标签</p>
</div>
<script>
// 获取到div元素
var div=document.querySelector('div')
// 克隆一个div元素，不克隆后代元素
var clone1=div.cloneNode(false)
// 克隆一个div元素，克隆后代元素
var clone2=div.cloneNode(true)
// 输出
console.log('不克隆后代节点：',clone1)
console.log('克隆后代节点：',clone2)
</script>
</body>
</html>总结：
获取元素尺寸
语法1：
元素.offsetHeight
元素.offsetWidth
获取：元素内容+padding+border 区域的尺寸
语法2：
元素.clientHeight
元素.clientWidth
获取：元素内容+padding区域的尺寸
0217 案例-动态渲染数据
0218 事件（上）
前端：通过代码的方式和页面中的某些内容做好一个约定
用户：触发指定行为时，就会执行代码
事件绑定
事件绑定三要素
- 事件源：和谁做好约定
- 事件类型：约定一个什么行为
- 事件处理函数：当用户触发该行为时，执行什么代码
语法：
事件源.on事件类型=事件处理函数
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取到div元素
var div=document.querySelector('div')
// 绑定点击事件
div.onclick=function(){
// 书写点击时候执行的代码
console.log('啊！救命啊！')
}
</script>
</body>
</html>事件类型
事件对象
当事件触发的时候，一个描述该事件信息的对象数据类型
//直接在事件处理函数接受形参
div.οnclick=function(e){
console.log(e)
}
事件对象内的信息-鼠标信息
坐标信息
- offsetX和offsetY 相对于触发事件的元素
- clientX和clientY 相对于浏览器可视窗口
- pageX和pageY 相对于页面文档流
事件对象内的信息-键盘信息
键盘编码 事件对象.keyCode
0219 案例-鼠标跟随
0220 事件（下）
事件传播
浏览器响应事件的机制
浏览器窗口最先知道事件的发生
捕获阶段：从window按照结构子级的顺序传递到目标
目标阶段：准确触发事件的元素接收到行为
冒泡阶段：从目标按照结构父级的顺序传递到window
本次事件传播结束
阻止事件传播
语法：事件对象.stopPropagation()
扫一扫
2260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
