目录
（1）for(初始化变量；条件表达式；操作表达式){循环体}
（2）需求:遍历【1,2,3,4,5,6,7,8,9,10】数据
（6）需求：将数组("一"、"二"、"三"、"四"、"五")反转
（6）findIndex(findindex 后面一个 i要大写)
（2）setInterval(()=>{},interval);
（2）document.getElementsByTagName
（6）console.log(this.value.length)；
（7）element.oninput(输入事件)=事件处理函数
第1章-初识JavaScript
（1） 在！+Enter键后的body中的script输出语句
1.用于游览器弹出警告框：window.alert('') window可以省略
2.用于在网页中输出内容：document.write('')
3.用于在控制台中输出信息：console.log('')； 控制台：代码---右键----open with live***---检查---所打开网页的第三行中的Console
（2）在！+Enter键后的body中的script输入语句
1.在游览器中弹出输入框，用户可以输入内容：prompt("")
2.在游览器中弹出确认框：confirm('')
（3）JS代码引入方式
1.行内式：
<body>
<button οnclick="alert('别点了')">点我呀</button>
</body>
2.嵌入式：
<body>
<script>
document.write('就要点你')
</script>
</body>
3.外链式：
<body>
<script src="./03-外链式.js"></script>
</body>
第2章-JS基本语法
1---变量
（1）变量声明与赋值
列：<script>
var tom //声明了一个叫tom的变量
var jack,jackson //同时声明了2个变量
//为变量赋值
tom='boy';
//输出变量的值
console.log(tom);
2.在声明的同时直接赋值
var height=188;
console.log(height);
<script>
（2）let声明变量
//let用于声明变量，是ES6新语法。
//ES6语法是指2015年推出的ECMAScript新规范。
1. 列：let boyFriend="魏大勋"; //let在声明变量时，在一个代码块内，不允许有变量取一样 的名字。
boyFriend="蔡徐坤";
//变量值可以被更改，以最后一次值为准。
console.log(boyFriend);//“蔡徐坤”
2.//以一个花括号{}括起来的，为一个代码块。
{let boyFriend="徐良"
console.log(boyFriend);
（3）const声明变量
//const和let一样，也是Es6新语法
//const一般声明的是不能改变的常量，也就是定量。
1.列 ：const pi=3.14;
pi = 3.15
console.log(pi);
2. //const既不允许将一个变量名反复声明。
//也不允许在运行过程中的改变变量的值
列： r=5;
C=2*pi*r
S=pi*r*r
console.log(C);
console.log(S);
（4）变量声明区别
<!--
(1)初始化要求不同，
使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。
(2)重复声明不同，
使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致，
而使用const声明的变量，在整个运行过程中不能修改初值
(3)对块级作用域的支持不同。
(使用一对花括号括起来的代码称为一个代码块所谓块级作用域。
就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。
使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。)
-->
2---数据类型
（1）数据类型分类
简单数据类型存储在栈内存中。
复杂数据类型的内容存储在堆内存中，
地址存储在栈内存中。
（2）基本数据类型
1.[boolean-布尔型]
//true-成功或成立；false-失败或者不成立。
2. [number-数字型]
var time=1704;
//最大值
列： console.log(Number.MAX_VALUE);
//Infinity表示无穷大，也属于数字型
列：console.log(Number.MAX_VALUE*2);//Infinity
//NaN表示not a number,不是一个数
//但是NaN属于数字类型
列：
console.log(3-1);//1
console.log("a"-2);//NaN
//用isNaN()做判断，会得到true/false结果。
//当判断的数据是正常的数字或者数字型时，isNaN的结果为false。
//当判断的数据不是正常的数字，isNaN的结果为true。
列：
console.log(isNaN(空格));//true
console.log(isNaN(123));//false
console.log(isNaN(Infinity));//false
console.log(isNaN("aaa"));//true
3. 【string-字符串类型】
列：
let a ="111";
let b='true';
let c='今天天气不是很好'
console.log(a,b,c);
列：
let d="辅导员说'昨天晚上不上晚自习'";
console.log(d);
let e="辅导员说\'昨天晚上不上晚自习\'";
console.log(e);
// " 辅导员说 ‘ 昨天不上晚自习 ’ "
// \'是单引号的转义符 \"是双引号的转义符
4. //【undefined-未定义类型】
指： 表明变量还未被赋值
列：
let baby
console.log(baby);//undefined
列：
baby = "angelbaby"
console.log(baby);//angelababy
5.//[null-空型]
//空型只有一个一个特殊的null值，表示变量没有指向任何对象。
列：
let person=null;
console.log(person);
（3）数据类型检测
//当不确定一个变量或值是什么类型的数据时。
//就用typeof操作符进行数据类型检测
//typeof 数据
//typeof (数据)
列：
let a=typeof(111)
console.log(a);//number
console.log(typeof"111");//string
console.log(typeof NaN);//number
console.log(typeof -Infinity);//number
console.log(typeof true);//boolean
console.log(typeof "false");//string
console.log(typeof undefined);//undefined
console.log(typeof null);//object
（4）数据类型转换
1.将数据转换为布尔型数据
//转换时，代表空或者否定的值（空字符串、数字0、NaN、null和unfined）会转换成false
//其他的值就会转换为true。
列：
let a=Boolean("")括号中只有引号
console.log(a);//false
console.log(Boolean(" "));//引号里有空格的是true
console.log(Boolean("false"));//true
console.log(Boolean(0));//false
console.log(Boolean(undefined));//false
console.log(Boolean(null));//false
console.log(Boolean("null"));//null加了引号就会变为true
console.log(Boolean(Infinity));//true
console.log(Boolean(2));//true
2.将数据转换为数字型类型
Number()
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
console.log(Number("123"));//123
console.log(Number("123.a"));//NaN
console.log(Number(""));//0
console.log(Number(" "));//引号里有空格也是0
console.log(Number("true"));//NaN
3.将数据转换为字符串类型
// 利用String()和toString()进行转换。
列：
let b=false;
console.log(typeof b);//boolean
var c=toString(b)
console.log(typeof c);//String
3---运算符
（1）算数运算符
1. 加号运算符
let a=10;
let b=20;
let c=a+b;
console.log(c);//30
2.减法运算符
console.log(c-a);//20
3.乘法运算符
console.log(a*b);//200
4.除法运算
console.log(b/a);//2
5.取余运算
console.log(c%b);//10
6.幂运算
console.log(2**10);//2*2*2*2*2*2*2*2*2*2=1024
7.自增运算（前自增）
let m=10;
let n=20;
m=++n;
console.log(m);//21
console.log(n);//21（结果在最后两行）
8.自增运算（后自增）m=21;n=21
m=n++;
console.log(m);//21
console.log(n);//22（结果在最后两行）
9.自减运算（前自减）m=21;n=22
m=--n;
console.log(m);//21
console.log(n);//21（结果在最后两行）
10.自减运算(后自减)m=21;n=21
m=n--;
console.log(m);//21
console.log(n);//20（结果在最后两行）
综合：
1. 列：
var x=3;
console.log(x);//3
console.log(++x);//4
console.log(x++);//x在前，所以代码先运行了所以输出4
console.log(x);//虽然上面代码输出4但是x++还是运行了所以x是5
2.列
console.log(--x);//4
console.log(x);//4
console.log(x--);//4
console.log(x);//3
（2）字符串运算符
<!--
隐式转换：
当两个数据类型不同时，JS会按照既定的规则进行转换
字符串运算符：
当加号遇见字符串，加号做拼接使用
-->
1.列：
console.log(1+1);//2
console.log(1+null);//1
console.log(1+true);//2
console.log(1+false);//0
console.log("12"-0);//12
console.log(Infinity ++);//infinity
console.log(null*999);//0
console.log(null*undefined);//NaN
console.log(12+"0");//120
console.log(1+"1");//11
console.log(null+"999");//null999
2.列：
var name ="tom"
var age=18;
console.log(name+"的年龄是"+age);
（3）赋值运算符
var a=10;
var b=20;
1.加并赋值
a+=b;
释 ： (a=a+b)
console.log(a);//30
console.log(b);//20
2.减并赋值
a-=b;
释 ： a=a-b
console.log(a);//10
console.log(b);//20
3.乘并赋值
a*=b
释 ：a=a*b
console.log(a);//200
console.log(b);//20
4.除并赋值
a/=b
释 ：a=a/b
console.log(a);//10
console.log(b);//20
5.取模并赋值
b%=a
释 ：b=b%a
console.log(a);//10
console.log(b);//0
（4）比较运算符
1.==相等运算符
console.log(5=="5");//true
2.===全等运算符
console.log(5==="5");//false
3.！=不相等
console.log(5!="5");//false
4.!==不全等
console.log(5!=="5");//true
(==在比较不同数据类型时，会将比较的数据转换为同一类型。
===则不会转换。全等运算符就是要全部方面都相等。)
（5）逻辑运算符
<!--
&& 逻辑与运算符 一假则假
|| 逻辑或运算符 一真则真
！逻辑非运算符/取反运算符 真做假来假亦真
-->
1.列：
console.log(true&&true);//true
console.log(false&&true);//false
console.log(true&&false);//false
console.log(false&&false);//false
2.列：
console.log(true||true);//true
console.log(true||false);//true
console.log(false||true);//true
console.log(false||false);//false
3.列：
console.log(3>2 && 2>1);//true
console.log(3>2 && 2<1);//false
console.log(3>2|| 2<1);//true
console.log(!true);//false
console.log(!(100<0));//true
4.列：
var year
var res= year%400==0 || year%4==0 && year%100!=0
console.log(res);
res ?document.write('闰年'):document.write('不为闰年')
闰年：
可以被400或4整除 但是不能被100整除的年份
当满足39行判断，res的值为true,也就是year为闰年；
当不满足39行判断；res的值为false,也就是year不为闰年；
三元表达式
如果res的值是true,就会执行冒号前面的语句
如果res的值是false,就会执行冒号后面的语句
（6）三元运算符
公式：条件表达式?表达式1:表达式2
释：如果条件表达式的值为true,则返回表达式1的执行结果
如果条件表达式的值为false,则返回表达式2的执行结果
1.列：
用户输入年龄，判断用户是成年人还是未成年人
var age =prompt('请输入你的年龄')
age>=18?console.log('成年'):console.log('未成年');
2.列：
1、让用户输入两个数字
2、比较两个数字大小，并在页面显示最大的那个数字
var num1=prompt('输入第一个数字');
var num2=prompt('输入第二个');
num1>num2?console.log(num1):console.log(num2);
3.列：
1、 如果用户输入的是两位数，则直接输出
2、如果用户输入的是个位数，则在十位数上补8
var num=prompt('请输入数字')
num>10? console.log(num):console.log(num+"0");
（7）运算符优先级
//一元运算符>比较运算符 >逻辑运算符 >数字运算符
列：
let a = 3 > 5 && 2 < 7 && 3==4
console.log(a);//false
let b =2 =="2"
console.log(b);//true
let c=!b || a && b
console.log(c);//false
let d=a&&(c||b);
console.log(d)//false
4---流程控制
（1）选择结构
1.if语句
if(条件表达式){代码段}
// 需求：根据用户输入的年龄（age）,
// 判断用户成绩是否成年。
let age = prompt('请输入你的年龄');
console.log(age);
if (age>=18){
document.write("恭喜你成年了")
}
2.if...else语句(双分支语句)
if(条件表达式){代码段1}else{代码段2}
// 需求：根据用户输入的分数（score）,
// 判断用户成绩是否及格。
let score=prompt("请输入你的分数")
if(score>=60){
document.write('你及格了')
}else{
document.write('准备补考吧')
}
// 需求：根据用户输入的年份，判断并显示结果（平/闰）。
let year=prompt("请输入你要判断的年份")
if(year%400==0||year%4==0&&year%100!=0){
document.write('你输入的年份是闰年')
}else{
document.write('你输入的年份是平年')
}
3.if...else if...else语句
if (条件表达式1) {
代码段1
}else if(条件表达式2){
代码段2
}else if(条件表达式3){
代码段3
}else if(条件表达式4){
代码段4
}else{
代码段n
}
//需求：根据辅导员不同的存款，喝不同的饮料
let ck=prompt('请输入辅导员的存款')
if(ck<5000){
document.write('喝蜜雪')
}else if(ck<6000){
document.write('喝古茗')
}else if(ck<7000){
document.write('喝瑞幸')
}else{
document.write('喝辛巴克')
}
4.switch语句
let subject= +prompt("请输入你想要的专业。1-区块链专业,2-UI专业,3-土木专业,4-农林专业")
switch(subject){
case 1:
document.write("恭喜你选择了本世纪最伟大的专业");
break;
case2:
document.write("恭喜你要和人工智能抢饭碗");
break;
case3:
document.write("恭喜你要工地打灰三十年");
break;
case4:
document.write("恭喜你要回家养猪了");
break;
default:
document.write("请重新选择专业")
}
（2）循环结构
1.for语句
for(初始化变量;条件表达式;操作表达式){循环体}
//需求：打印从0-100的数
for(let i =0;i<=100;i++){
console.log(i);
}
//需求：打印从0-100的偶数
for(let b=0;b<=100;b++){
if(b%2==0){
document.write(b)
}
}
//需求：计算0-100所有偶数和
var sum =0;
for(let b=0;b<=100;b++){
if(b%2==0){
sum+=b;
}
}
console.log("0-100所有的偶数和为:"+sum);//2550
2.while 语句
while(条件表达式)（循环体）
//需求：打印0-100的值
var i=0;
while(i<=100){
console.log(i);
i++;
}
//需求:
//弹出一个确认框:"我喜欢你,我们在一起好吗？"
// 如果对方点击确认,弹出"那我们什么时候结婚?"
// 如果点击否认,弹出"真的不和我在一起吗？"
let res=confirm("我喜欢你,我们在一起好吗?")
console.log(res);//确定健为true,取消健为false.
while(!res){
confirm("我喜欢你,我们在一起好吗?")
}
confirm("那我们什么时候结婚？")
// 需求:
// (1)让用户输入 用户名 和密码(password)
// (2)如果 用户为admin 并且 密码123456,则跳出循环弹窗提示登录成功,
// (3)否则让用户继续登录
let username=prompt("请输入用户名")
let password=prompt("请输入密码")
//用户用户名、密码输出错误，那就不停循环，直到正确
while(username !="admin"||password !="123456"){
let username=prompt("请输入用户名")
let password=prompt("请输入密码")
}
//当用户用户名、密码输入正确
alert("登录成功")
3.do...while语句
do{循环体}while{条件表达式}
//需求：打印0-100的值
var i=0;
do{
console.log(i);
i++
}while(
i<=100
)
// 需求：通过do...while...循环语句求出2+4+6+...+100的值。
var i=0,sum=0;
do{
sum+=i;
i=i+2;
}while(i<=100)
console.log(sum);
（3）跳转语句
1.break
break语句用于跳出整个循环
列：
for(var i=1;i<=5;i++){
if(i==3){
console.log("白雪公主吃到了毒苹果");
break;
}
console.log("白雪公主吃了第"+i+"个苹果");
}
2.continue
continue结束当前循环
列：
for(var i=1;i<=5;i++){
if (i==3){
console.log("白雪公主吃到了虫苹果");
console;
}
console.log("白雪公主吃了第"+i+"个苹果");
}
（4）循环嵌套
//需求：🌟🌟🌟🌟 🌟🌟🌟🌟 🌟🌟🌟🌟 🌟🌟🌟🌟
var str ="";
for (let i =1; i<=4; i++){//4指总行数
for (let j=1; j<=4;j++){
str+="🌟"
}
//"\n"换行转义符
str +='\n'
}
console.log(str);
//需求：打印直角三角形🌟
方法(1) var str =""
for(let i=1;i<=5;i++){
for(let a=1;a<=i;a++){
str+="🌟"
}
str+='\n'
}
console.log(str);
方法(2)for(var i=0;i<=4;i++){
for(var j=0; j<=1;j++){
document.write("🌟")
}
document.write("<br/>")
}
//需求:打印金字塔爱心❤️
// 判断n是否为一个纯数字，如果不是数字，那继续执行prompt语句
var n=prompt('请输入你要建造的金字塔行数')
//使用Number()以及parseInt()方法可以确保n是一个纯数字
n=Number(n) && parseInt(n)
// console.log(Number(null));//0
// console.log(Number("123.a"));//NaN
// console.log(parseInt(null));//NaN
// console.log(parseInt("123.a"));//123
if(isNaN(n)){
prompt('请输入你要建造的金字塔行数')
}
var str =""
//循环了列数
for(var i=1;i<=n;i++){
//循环每一行爱心前的空空格数
var black=n-i
for(var k=0;k<black; k++)
str+=''
//循环每一行的爱心数
var h=2*i-1;
for(var j=1;j<=h;j++){
str+="🖤"
}
str+="\n"
}
console.log(str);
第3章-数组
1---数组的基本操作
（1）创建数组
// 以数组字面量创建数组
var array=[1,2,3,4,5]
console.log(array);//[1,2,3,4,5]
//以new Array()方式创建数组
var array1=new Array(1,2,3,4,5)
console.log(array1);//[1,2,3,4,5]（2）数组构成
//数组的值可以是任意类型的数据
var array2=['string',123,null,undefined,NaN,array]
console.log(array2)//['string',123,null,undefined,NaN,Array(5)]
（3）数组长度
//数组名.length获取数组长度
console.log(array2.length);//6
console.log(array.length);//5（4）访问数组
//"数组索引"也称为"数组下标"，以数字表示，默认是从0开始以此递增
console.log(array[3]);//4
console.log(array[4]);//5
console.log(array2[0]);
（5）更改数组
//通过下标更改
var array4=[1,2,3,4,5]
array4[0]=0
console.log(array4);//[0,2,3,4,5]
（6）新增数组
//通过下标新增
array4[7]=10
console.log(array4);//[0,2,3,4,5,empty,empty,10]
console.log(array4.length);//8
（7）删除数组值
//利用delete关键字+下标删除
delete array[7]
console.log(array4);//[0,2,3,4,5,empty,empty,empty]
console.log(array4.length);//8（8）修改元素长度
//通过.length修改
array4.length=5
console.log(array4);//[0,2,3,4,5]
array4.length=20
console.log(array4);//[0,2,3,4,5,empty*15]（9）数组方法
//在数组前新增元素unshift
var arr1=[4,5,6]
arr1.unshift(1,2,3)
console.log(arr1);//[1,2,3,4,5,6]
//在数组后新增元素push
arr1.push(7,8,9)
console.log(arr1);//[1,2,3,4,5,6,7,8,9]2---遍历数组
（1）for(初始化变量；条件表达式；操作表达式){循环体}
var array=["jack","lily","tom","tony"];
//使用变量i代替元素的下标
for (var i=0;i<array.length;i++){
console.log(array[i]);
//jack
//lily
//tom
//tony
}（2）需求:遍历【1,2,3,4,5,6,7,8,9,10】数据
var arr=[1,2,3,4,5,6,7,8,9,10]
for (var i=0;i<array.length;i++){
console.log(array[i]);
}
（3）需求：求出arr数组中各项的累加和
var sum=0
for(var i=0;i<arr.length;i++){
console.log(arr[i]);//会遍历数组arr
sum+=arr[i]
//sum=0 arr[0]-1 0+1=1=sum
//sum=1 arr[1]-2 1+2=3=sum
//sum=3 arr[2]-3 3+3=6=sum
//sum=6 arr[3]-4 6+4=10=sum
}
console.log(sum);//55（4）需求：去除掉arr中小于0的值，形成一个新数组。
var arr1=[0,-5,10,-30,30,70,55,-35,90]
var arr2=[]
for(var i=0;i<arr1.length;i++){
console.log(arr1[i]);
if(arr1[i]>=0){
console.log(arr1[i]);//0 10 30 70 55 90
arr2.push(arr1[i])
}
}
console.log(arr2);//[0,10,30,70,55,90]
（5）需求：求出数组的最大值、最小值
let score = [60,78,86,55,32,97,40,10,99]
//假设一个最高分、最低分
var max=min=score[0]//假设最高最低分是60分
//遍历数组
for (var i=1; i<score.length; i++){
//console.log(score[i]);
//求最大值
if(score[i]>max){
max=score[i]
}
//求最小值
if(score[i]<min){
min=score[i]
}
}
console.log(max);
console.log(min);（6）需求：将数组("一"、"二"、"三"、"四"、"五")反转
var arr3=["一","二","三","四","五"]
//反转后的新数组('五'、'四'、'三'、'二'、'一')
var arr4=[]
for (var i=0;i<arr3.length;i++){
console.log(arr3[i]);
arr4[arr3.length-1-i]=arr3[i]
}
console.log(arr4);
、、方法二
for (var i=0;i<arr3.length;i++){
console.log(arr[i]);
//unshift在数组前添加元素
arr4.unshift(arr3[i])
}
console.log(arr4);
//方法三
for(var i=arr3.length-1;i>=0;i--){
console.log(i);//4 3 2 1 0
console.log(arr3[i]);
arr4.push(arr3[i])
}
console.log(arr4);
3---二维数组
（1）一维数组
var arr1=[1,2,3,4,5]（2）二维数组
//数组元素的值是一个一维数组
var arr2=[
[1,2,3],
[4,5,6],
[7,8,9],
]（3）访问二维数组
console.log(arr2[0]);//[1,2,3]
console.log(arr2[0][0]);//1
console.log(arr2[1][1]);//5
console.log(arr2[2][0]);//7（4）需求：将数组arr2中的每一个元素一一打印出来
for(var i=0; i<arr2.length;i++){
// console.log(arr2[1]);
for (var j=0;j<arr2[i].length;j++)
console.log(arr2[i][j]);
}（5）需求：二维数组倒置
var arr3=[
[1,2,3,4],
[6,7,8,9,10],
[11,12,13,14,15]
]
var res=[]
//渲染得到新数组，首先要知道新数组有多少行
//新数组的行数是有原数组的列属决定的
for(var i=0;i<arr3[0].length;i++){
//通过遍历原数组的行数 首先得到新数组的列数
res[i]=[]
//遍历原数组的列，得到新数组的行
for(var j=0;j<arr3.length;j++){
console.log(arr3[j][i]);
res[i][j]=arr3[j][i]
}
}
console.log(res);（6）二维数组求和
var score=[
[98,67,98,88],
[89,79,75,66],
[60,78,58,90],
[96,53,72,81],
]
var sum=0
for (var i=0;i<score.length; i++){
console.log(i);//0,1,2,3
sum=0
console.log(sum);//会得到四个sum=0
for(var j=0;j<score[0].length;j++){
console.log(score[i][j]);
sum+=score[i][j]
}
console.log('第'+(i+i)+'位的学生的总成绩是'+sum);
}4---数组迭代方法
（1）map数组遍历器
var arr=[12,13,14,15]
//需求：生成一个新数组arr1,将arr数组中每个元素+1。
var arr1=[];
for(let i=0;i<arr.length;i++){
// console.log(arr[i]);
arr1[i]=arr[i]+1
//i=0 arr[0]=12 13
//i=1 arr[1]=13 14
//i=2 arr[2]=14 15
//i=3 arr[3]=15 16
}
console.log(arr1);// arr1=[13,14,15,16]
//map:使用某种规则映射得到一个数组
//遍历数组中的每一个元素，并对每个元素进行相应的处理，并返回新的数组
//回调函数一定要有返回值
//语法：
//数组.map((元素，下标)=>{return 映射规则})
let arr2=arr.map(function(value,index){
return value+1
})
console.log(arr2);//[13,14,15,16]
//需求：将arr的数组每个*2,得到一个新数组arr3
// let arr3=arr.map(function(value,index){
// return value*2
// })
// console.log(arr3);
let arr3=arr.map(a=>a*2)
console.log(arr3);
（2）filter数组过滤器
let arr =[-10,0,10,-20,30,-40]
//需求：找出数组中大于10的所有元素，形成新数组arr1
// let arr1=[];
// for(let i=0;i<arr.length;i++){
// // console.log(arr[i]);
// if(arr[i]>10){
// arr1.push(arr[i])
// }
// }
// console.log(arr1);//[10,30]
let arr1=arr.filter(function(value,index){
return value>=10
})
console.log(arr1);//[10,30]
//let arr1=arr.filter(v => v>=10)
//console.log(arr1);
//filter:用于筛选数组中满足条件的新数组并返回
//形成的新数组长度 ！==原数组长度
//回调函数执行的次数==数组长度
let res =[-40,60,137,-33,107]
//需求：筛选res中的偶数，形成新数组
let res1=res.filter(value=>value%2==0)
console.log(res1);//[-40,60]（3）forEach数组遍历器
let arr =[1,2,3,4,5,6,7];
//需求：sum为arr数组各项和
let sum=0;
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
sum+=arr[i];
}
console.log(sum);//20
let sum1=0;
arr.forEach(function(value){
sum1+=value;
});
//arr.forEach(val =>sum1 +=val)
//forEach也是用于遍历数组
//forEach没有返回值，不用写return（4）some方法
//some:判断数组中是否有元素满足条件
//返回一个布尔类型的值
//一旦有元素符合条件，则返回true。
var arr=[0,4,-3,8,-1,9]
//需求:使用forEach遍历arr数组
//如果数组中有负数，则返回true。
// let flag=false
// arr.forEach(function(val){
// // console.log(val);
// if(val<0){
// flag=true;
// }
// })
// console.log(flag);
let res=arr.some(function(val){
return val<0
})
console.log(res);
// let res1=arr.some(val=>val<0)
// console.log(res1);
//需求：如果有一组年份[2001,2002,2003,2005]
//判断这个数组中是否有闰年，有则为true,无则为false。
var year=[2001,2002,2003,2005]
let res2=year.some(val=>val%400==0 || val%4==0 && val%100!=0)
console.log(res2);（5）every方法
//every:判断数组中是否所有元素满足条件
//返回一个布尔类型的值
//当所有元素符合条件，则返回true。
//需求：如果有一组年份[2001,2002,2003,2005]
//判断这个数组中是否有闰年，有则为true,无则为false。
var year=[2001,2002,2003,2005]
let res1=year.some(val=>val%400==0 || val%4==0 && val%100!=0)
console.log(res1);//true
//判断这个数组中是否有闰年，全部为闰年则为true,否则为false。
var year=[2001,2002,2003,2005]
let res2=year.every(val=>val%400==0 || val%4==0 && val%100!=0)
console.log(res2);//false
var arr=[20,50,36,74,90,10,0,-40,50]
//需求：判断arr中的数字能否都是偶数
let res3=arr.every(val=>val%2==0)
console.log(res3);//true（6）findIndex(findindex 后面一个 i要大写)
var arr=[-3,-2,-1,0,1,2,3,4]
//需求：找到数组中第一个正数的下标//4
// var index=0
// for(let i=0;i<arr.length;i++){
// if(arr[i]>0){
// index=i;
// break;
// }
// }
// console.log(index);
let index1=arr.findIndex(val=>val>0)
console.log(index1);//4（7）reduce方法
var arr=[10,20,30,40,50]
// //求数组平均数{for语句}
// var sum=0
// for(let i=0;i<arr.length;i++){
// // console.log(arr[i]);
// sum+=arr[i]
// }
// var avg=sum/arr.length
// console.log(avg);//30
//arr.reduce(function(sum,value)=>{sum+value})
let res=arr.reduce((sum,value)=>(sum+=value))
console.log(res);//15第4章-函数
1---初识函数
//[函数定义]
//函数用于封装完成一段特定功能的代码。
//相当于将一条或多条语句组成的代码块封装起来。
//用户在使用时只需要关心参数和返回值，就能完成特定的功能。
//[内置函数]
//isNaN是判断内容是否为非数字，非数字时取值为true，数字类型取值false。
console.log(isNaN("number"));//true
//NUmber()可以将字符串类型转化为数字类型
console.log(Number("15.99"));//15.99
console.log(Number("15.abc"));//NaN
//parseInt()将小数点前面的内容转化为数字类型
console.log(parseInt('15.99'));//15
console.log(parseInt('15.abc'));//15 //自定义函数
//提高代码的复用性，降低程序维护的难度。
//[函数格式]
// function name(params){
// }
// function指这是一个函数语句
//name是函数名
//params是函数参数
//{}内放函数的具体功能
//[无参函数]
//封装函数
function demo(){
console.log('我是一个函数');
}
//调用函数
demo()
demo()
//有参函数
function sum(a,b){
console.log(a+b);
}
sum(100,200)
sum(666,888)
//练习：定义一个函数total,调用函数时传入price价钱，num数量
//就可以计算，并在界面上打印函数的总价all。
//封装函数
function total(price,num){
console.log(price*num);
}
//调用函数
total(9999,12)
total(9999,6)
//【函数的返回值】
//函数的返回值是指在函数调用后获得的数据
//这个数据需要通过retrue关键字返回，让函数额外可以拿到
function total1(price,num){
return price*num
}
console.log(total(9999,12));
//函数total是在函数内部打印乘积
//每次调用total函数就会执行一次打印命令
//函数total1是在函数内部生成一个新的数值并通过return返回
//在函数外拿到return返回的数据并打印需求：定义一个函数，maxNum,求出任意两数的最大值
function maxNum(num1,num2){
if(num1>num2){
return num1;
}else{
return num2;
}
}
function maxNum(num1,num2){
return num1>num2?num1:num2;
}
console.log(maxNum(10,9));
console.log(maxNum(9,10));需求：定义一个函数getSum,可以求任意数组中每个项的和
function getSum(arr){
var sum=0;
for(var i=0;i<arr.length;i++){
// console.log(arr[i]);
sum+=arr[i]
}
return sum
}
console.log(getSum([1,2,3,4,5]));//15
console.log(getSum([1,2,3,4,5,6,7,8,9]));//45
需求：判断数据中是不是所有元素都是正确，是则返回True,不是则返回false
function isAllTrue(arr){
let res = true;
for(let i=0;i<arr.length;i++){
if(arr[i]<0){
res=false
break
}
}
return res
}
console.log(isAllTrue([1,2,3,4,5]));//true
console.log(isAllTrue([-1,0.1,2,3]));//false需求：找出数组中元素为10的下标，有则返回该下标，没有则返回-1.
function getIndex(arr){
let flag=-1;
for(let i=0;i<arr.length;i++){
// console.log(arr[i]);
if(arr[i]==10){
flag=i;
break
}
return flag
}
}
console.log(getIndex([2,4,6,8,10,12]));//4
console.log(getIndex([1,3,5,7,9,11]));//-1[获取函数调用时传递的所有实参]
function num(a,b){
console.log(a,b);
}
num(1,2)//1 2
num(1,2,3,4,5,6)//1 2
num(1)//1 undefined扩展运算符...
function num1(...nums){
console.log(nums);
}
num1(1)//[1]
num1(1,2,3,4,5,6)//[1,2,3,4,5,6,]argument对象
//在开发时，如果不确定行参的个数，可以不设置形参
//在函数体中直接通过argument对象获取函数调用时传递的形参
function num2(){
console.log(arguments);
console.log(arguments.length);//5/3
}
num2(1,2,3,4,5)//[1,2,3,4,5]
num2(1,2,3)//[1,2,3]//需求：
//1.通过arguments对象获取所有实参
//2.对所有实参进行求和
function sum1(){
console.log(arguments);//[1,2,3,4,5,6]
var he =0;
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
he +=arguments[i]
}
console.log(he);//21
}
sum1(1,2,3,4,5,6)2---函数进阶
[函数表达式]
函数表达式是指将函数值赋给变量的表达式
let num =1;
console.log(num);
let fun= function num(num1,num2){
console.log(num1+num2);//3
}
//定义了函数表达式之后，不能再通过函数名调用函数
//sum(1,2)
//需要通过变量名调用函数
fun(1,2)//3[匿名函数]
当使用函数表达式时，可以删除函数的名字
let fun1=function (num1,num2){
console.log(num1+num2);//3
}
fun1(1,2)
let fun2=function(num1,num2){
return num1+num2
}
console.log(fun2(1,2));
【箭头函数】
删除function关键字
在参数()和函数{}之间放上=>
let fun3 =(num1,num2)=>{
return num1+num2
}
console.log(fun3(1,2));
//当函数体只有一句话时，可以省略return返回值和大括号
let fun4 =(mun1,num2)=>num1+num2
console.log(fun4(1,2));
//当函数只有一个参数时，可以省略小括号
let demo =a =>a+a
console.log(demo(1));
function demo (a){
return a+a
}
//学会将51-53行的函数代码改造成48行的效果3---回调函数
function demo (a,b){
console.log(a+b);
}
demo(1,2)
demo(11,22)
demo(111,222)
//回调函数，就是在a中，传入一个函数b作为参数，参数函数b就是回调函数
function cal(num1,num2,fn){
return fn(num1,num2);
}
var num=cal(10,20,function(num1,num2){
return num1+num2;
});
console.log(num);//30
console.log(cal(30,40,function(num1,num2){return num1+num2;}));//70
var num1=cal(30,40,function(num1,num2){
return num1+num2;//1200
});
console.log(num1);
console.log(cal(30,40,function(num1,num2){return num1*num2;}));//1200
需求：调用cal函数，完成num1和num2的取模运算/除法运算/
console.log(cal(30,40,function(num1,num2){return num1%num2;}));//30
console.log(cal(30,40,function(num1,num2){return num1/num2;}));//0.754---函数作用域
//全局作用域：全局变量拥有全局作用域
//全局变量：在函数体外声明的变量或在函数体内省略var关键字声明的变量。
var name ="张三"
let age =18;
function fun(){
console.log(name);
console.log(age);
}
fun()
console.log(name);
console.log(age);
//局部作用域：局部变量/函数变量拥有局部作用域
//局部变量：在函数体内利用var关键字声明的变量
function fun1(){
var sex ="men"
console.log(sex);//"men"
sex1="women"//sex1是省略var声明的变量，属于全局变量
}
fun1()
// console.log(sex);//not defined
console.log(sex1);//women
//块级作用域：被块级变量所拥有，在分支语句或循环大括号中定义的变量。
// 一般一个花括号{}为一个代码块
//块级变量：let关键字声明的变量。
for(let i=0;i<5;i++){
console.log("循环内部"+i);
}
console.log("循环内部"+i);//not defined5---定时器函数
（1）setTimeout(()=>{},timeout)
用来设置某个函数在多少毫米之后执行
setTimeout(() => {
console.log("要抢票了");
}, 3000);（2）setInterval(()=>{},interval);
用来设置某个函数在多少时间间隔后反复执行
setInterval(() => {
console.log("要抢票了");
}, 3000);console.log(1);
console.log(2);
console.log(3);
setTimeout(() => {
console.log(4);
},0);
console.log(5);
//12354
//定时器函数是异步代码，需要等全部同步代码执行完执行。6---嵌套函数与作用域链
（1）变量访问规则
就近原则(处于同一作用域):
//当一个作用域中访问变量时，首先看当前作用域有没有声明
//如果有则访问当前作用域的变量，如果没有则向上层作用域查找
//直到达到顶层作用域没有变量声明时，则程序报错。 var i=10//i是全局变量，全局变量可以在函数内外被访问到。
var n=30//n是全局变量
function fn1(){
console.log(i);//函数内可以访问到全局变量i
let n=20;//n被声明在函数内部，属于函数变量
// console.log(n);//n是函数变量，在函数作用域里可以拿到n的值。
}
console.log(i);//函数外也可以访问到全局变量i
// console.log(n);//函数外部拿不到函数内部声明的变量
console.log(n);//函数外可以取得全局变量n的值
fn1()
function fn2(){
let n=40;
console.log(n);//当既有全局变量n,又有局部变量n,就近取值。
// console.log(n);//在函数内部可以拿到12行n的值
}
fn2()
//声明函数
function func(){
//let demo="222"
function fun1(){
//let demo="333"
console.log(demo);
}
console.log(demo);
fun1()
}
//使用函数
func()7---闭包函数
//闭包(close)函数：是一种代码形式，内部函数访问外部函数的局部变量。
//举例：js函数outer中有一个函数inner
//函数inner访问了函数outer定义的局部变量demo,此时就产生了闭包
//变量所在的函数就是闭包函数，在这里outer是闭包函数
function outer(){
let demo=123
function inner(){
console.log(demo);
}
}
//闭包函数的作用：将变量以函数形式保护起来，解决变量污染问题。
// let count=0
// setInterval(function(){
// console.log(count++);
// },1000)
function fn(){
let count=0
setInterval(function(){
console.log(count++);
},1000)
}8---网页计算器
（1）οnclick="function"
onclick表示按钮点击事件，当点击按钮时，就会执行function函数内容 -->
<!-- <input type="button" value="相加" onclick="func()">
<input type="button" value="相减" onclick="func1()"> -->（2）document.getElementById
在JS中通过id获取HTML中的元素
<body>
<p>整数1:<input type="text" id="num1"></p>
<p>整数2:<input type="text" id="num2"></p>
<p>
<!-- onclick="function"
onclick表示按钮点击事件，当点击按钮时，就会执行function函数内容 -->
<!-- <input type="button" value="相加" onclick="func()">
<input type="button" value="相减" onclick="func1()"> -->
<input type="button" value="相加" onclick="cal(add)">
<input type="button" value="相减" onclick="cal(sub)">
<input type="button" value="相乘" onclick="cal(mul)">
<input type="button" value="相除" onclick="cal(div)">
</p>
<p>结果:<input type="text" id="result"></p>
<script>
//在函数cal中，需要传入一个参数函数func
function cal(func){
//document.getElementById;在JS中通过id获取HTML中的元素
// var num1=document.getElementById("num1").value
var num1=parseInt(document.getElementById("num1").value)
// var num2=document.getElementById("num2").value
var num2=parseInt(document.getElementById("num2").value)
var result=document.getElementById("result")
result.value=func(num1,num2)
}
//JS部分
// function func(){
// console.log("111");
// }
// function func1(){
// console.log("222");
// }
function add(num1,num2) {
return num1+num2
}
function sub(num1,num2) {
return num1-num2
}
function mul(num1,num2) {
return num1*num2
}
function div(num1,num2) {
if(num2==0){
alert("被除数不能为0")
}
return num1/num2
}
</script>
</body>
9---递归函数
//需求：设置一个getSun
//调用getSun函数，传入进去一个参数n
//返回一个sum值，sum = n+(n-1)+(n-2)+(n-3)+...+1
//列：n=7 sum=7+6+5+4+3+2+1=28
// let n=7
// let sum=0
// for (let i=n;i>=1;i--) {
// sum+=i
// console.log(sum);
// }
//函数写法
function getSum(n) {
var sum=0
for(var n;n>=1;n--){
sum+=n
}
return sum
}
console.log(getSum(7));//这句话给n赋值了，n赋值为7
//函数写法二：
function getSum(n) {
var sum=0;
for(var i=0;i<=n;i++){
sum+=i
console.log(i);
}
return sum
}
console.log(getSum(7));//这句话给n赋值了，n赋值为7
//递归写法
function getSum2(n) {
//当n=1时
if(n==1){
return 1
}
return n+getSum2(n-1)
}
//递归过程
// getSum=5
// return 5+getSum2(4)
// return 5+4+getSum2(3)
// return 5+4+3+getSum2(2)
// return 5+4+3+2+getSum2(1)
// return 5+4+3+2+1=15
console.log(getSum2(7));
//[递归函数]
//一个函数间接或直接的调用自身
//function fun(){
// console.log(1);
// fun()
// }
第5章-对象
1---介绍对象
//对象：(object)是一种复杂数据类型。
//(简单数据类型存储在栈中，复杂数据类型的内容存储在堆中，地址存储在栈中。)
//对象形式：以键值对的形式存储多个数据
//1.使用简单数据类型存储数据
let name="张三";
let age =18;
let sex="man";
//弊端：冗余。好处：阅读性高。
//2.数组
let people =["张三","18","man"]
//弊端：阅读性不高
//3.对象
let obj ={
name :"张三",
sex :"man",
age :18,
gfs:["小美","小丽","小爱"],
func:function(){
console.log("见一个爱三个");
}
}
//3.1对象查询
console.log(obj);
console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
console.log(obj.gfs);
console.log(obj.func);//查询函数
console.log(obj.func());//执行函数
//3.2对象新增
obj.bf="李四"
console.log(obj);
//3.3对象修改
//如果对象原有属性名是修改，没有则是新增。
obj.bf="王五"
console.log(obj);
//3.4对象删除
delete obj.gfs
console.log(obj);
//3.5对象遍历
//for(let key in 对象名)(对象名[key])
for(let key in obj){
console.log(key);//打印属性名
console.log(obj[key]);//打印属性值
}2---Math对象
//1.内置对象：由JS作者提交编写好的对象，直接使用即可
//需求
//已知边长r=5,求圆的周长C
const pi=3.14;
const r=5;
const C=2*pi*r
console.log(C);
//a.圆周率：Math.PI
console.log(Math.PI);
const c=2*Math.PI*r
console.log(c);
//b.绝对值：Math.abs()
console.log(Math.abs(-3));//3
console.log(Math.abs(3));//3
//c.求最大/求最小：Math.max()/Math.min()
console.log(Math.max(5,7,2,9,0,3,-1));//9
console.log(Math.min(5,7,2,9,0,3,-1));//-1
//d.四舍五入：Math.round()
console.log(Math.round(3.3));//3
console.log(Math.round(-3.3));//-3
console.log(Math.round(-3.6));//-4
//f.向上取整：Math.ceil()
console.log(Math.ceil(1.4));//2
console.log(Math.ceil(-1.4));//-1
//g.向上取整：Math.floor()
console.log(Math.floor(1.4));//1
console.log(Math.floor(-1.4));//-2
//h.生成一个0-1之间的随机小数：Math.random()
console.log(Math.random());
console.log(Math.random());
//生成一个0-100之间的随机整数
console.log(Math.round(Math.random()*100));Math对象案例
<body>
<button id="btn">抽奖</button>
<script>
//案例：有100个编码的双色球。
//抽到的数字是1：是一等奖。
//抽到的数字是2,3:是二等奖。
//抽到的数字是4-7:是三等奖。
//抽到的数字是8-100：是谢谢参与。
//点击btn按钮，执行函数
btn.onclick =function(){
//设置抽奖等级
var level=0;//一，二，三，谢谢参与
//设置一个抽奖结果(1-100之间的整数)
var number=Math.ceil(Math.random()*100)
//抽奖过程
if(number==1)
level=1;
if(number==2 || number==3)
level=2;
if(number>3 && number<8)
level=3;
if(level){
alert("恭喜你获得了"+level+"等奖")
}alert("谢谢参与")
}
</script>
</body>3---Data对象
//时间值：1970年1月1日0点到现在的毫秒数
console.log(new Date().getTime());
//获取年份
console.log(new Date().getFullYear());//2024
//获取月份
console.log(new Date().getMonth());//范围是0-11
//获取日期
console.log(new Date().getDate());//22
//获取星期
console.log(new Date().getDay());//范围是0-6 0是星期天
//获取小数
console.log(new Date().getHours());//17
//获取分钟
console.log(new Date().getMinutes());//11
//练习：在页面中显示“今天是2024年5月22日，星期三“
console.log("今天是"+(new Date().getFullYear())+"年"+(new Date().getMonth()+1)+"月"+(new Date().getDate())+"日星期"+(new Date().getDay()));
//练习：在页面中显示“2005年8月1日，我出生了”
var date=new Date()
//设置年份
date.setFullYear(2005)
//设置月份
date.setMonth(8)
date.setDate(5)
//打印月份
console.log(date.getFullYear()+"年"+date.getMonth()+"月"+datData对象案例（1+~10000所需的执行时间）
var nowTime=new Date();
var sum=0;
for(var i=1;i<=10000;i++){
sum+=i
}
var overTime=new Date();
console.log((overTime-nowTime)+'秒');
// console.log('所需的执行时间为'+(overTime-nowTime)+'秒')；4---Array对象
（1）push
在数组末尾添加元素
course.push("JS")
console.log(course);//["web","java","JS"]（2）unshift
在数组前添加元素
course.unshift("计算机基础")
console.log(course);//["计算机基础"，"web","java","JS"]（3）pop
删除数组中最后一个元素
course.pop()
console.log(course);//["计算机基础","web","java"]（4）shift
删除数组中第一个元素
course.shift()
console.log(course);//["web","java"]（5）splice
var arr=[1,2,3,4,5,6,7]
//splice(startIndex,deleteCount) splice(起始下标，删除的数目)
arr.splice(3,3)//表示从下标3(数字4)开始，删除3个数字。
console.log(arr);//[1,2,3,7]
arr.splice(2,2)
console.log(arr);//[1,2]
//splice(startIndex,deleteCount,addItem1,addItem2,addIntem3)
arr.splice(2,0,3,4,5,6,7)
console.log(arr);//[1,2,3,4,5,6,7]
//删除课程java,添加课程"JS"、"Vne"、"Node"
course.splice(1,1,"JS","Vne","Node")
console.log(course);//["web","JS","Vne","node"]
（6）reverse
颠倒数组中元素的索引
arr.reverse()
console.log(arr);//[7,6,5,4,3,2,1]
（7）sort
var demo=[23,65,78,9,13,7,24,35]
//sort() 对数组进行排序
//升序排序
demo.sort(function(a,b){
return a-b
})
console.log(demo);//[7,9,13,23,24,35,65,78]
demo.sort(function (a,b){
return b-a
})
console.log(demo);//[78,65,35,24,23,13,9,7]（8）获取元素索引方法
var student=["张三","李四","王五","裘月峰","张三"]
//indexOf(element):返回指定第一个元素的下标，没有则返回-1
console.log(student.indexOf("李四"));//1
console.log(student.indexOf("懒洋洋"));//-1
//lastIndexOf(element):返回指定元素在数组中最后一次出现的下标，没有则返回-1
console.log(student.lastIndexOf("张三"));//4（9）将数组转化为字符串
//toString() 用逗号分隔数组中每一个元素，不会改变原数组
//join()将数组中所有元素连接成一个字符串，默认用逗号隔开,不会改变原数组。可以自定义分隔符。
console.log(student.toString());//张三，李四，王五，裘月峰，张三
console.log(student);//["张三"，"李四"，"王五"，"裘月峰"，"张三"]
console.log(student.join());//张三，李四，王五，裘月峰，张三
console.log(student.join(""));//张三李四王五裘月峰张三
console.log(student.join("-"));//张三-李四-王五-裘月峰-张三
console.log(student.join("/"));//张三/李四/王五/裘月峰/张三
console.log(student.join("A"));//张三A李四A王五A裘月峰A张三
（10）数组类型检测
console.log(Array.isArray(student));//true
var obj={
name:"张三"
}
console.log(Array.isArray(obj));//false
Array对象案例1（统计不及格学生的人数）
var score=[59,66,64,80,78,90,55,37,60,52]
var failScore =[]; //创建用于保存不及格成绩的数组
for (var i=0;i<score.length;i++){
if (score[i]<60) { //判断成绩是否及格
failScore.push(score[i]);//将不及格的成绩放到failScore中
}
}
console.log(failScore);
console.log('不及格的人数为：'+failScore.length);Array对象案例2（去除重复的比赛项目）
var arr=['短跑','接力','短跑','拔河','跳绳','接力','拔河','跳远'];
function unique(arr) {
var newArr=[];
for(var i=0;i<arr.length;i++){
if (newArr.indexOf(arr[i])===-1) {
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(arr));5---String对象
（1）访问字符串长度
var str ="helloworld"
console.log(str.length);//10（2）chatAt(number)
根据索引(下标)返回字符串
console.log(str.charAt(7));//"r"（3）slice
//字符串截取，不改变原字符串
//slice(startIndex)
console.log(str.slice(5));//world
console.log(str);
//slice(startIndex,EndIndex)//从第一参数(下标)，截取到end下标
console.log(str.slice(4,7));//owo（4）concat
var str1="hello";
var str2="world"
//字符串连接:concat()
console.log(str1.concat(str2));//helloworld（5）大小写转换
var str1="hello";
//toUpperCase() 小写转化为大写
//toLowerCase() 大写转化为小写
console.log(str1.toUpperCase());//HELLO
console.log("HELLO".toLowerCase);//hello（6）字符串的替换
//replace(str1,str2) 将str1替换成str2
console.log(str);
console.log(str.replace("world","JS")); //helloJS（7）字符串的分隔(将字符串转化为数组)
//split(分隔符)
console.log(str.split());//["helloworld"]
console.log(str.split(""));//['h','e','l','l','o','w','o','r','l','d']
console.log(str.split("o"));//['hello','w','rld']String对象案例（判断用户名是否合法）
var username=prompt('请输入用户名')
if(username.length<3 || username.length>10){
alert('用户名长度必须在3~10范围内');
}else if (username.toLowerCase().indexOf('admin')!==-1){
alert('用户名中不能包含敏感词:admin');
}else{
alert('恭喜您,该用户名可以使用');
}第6章-DOM（上）
1---获取元素案例1-隔行变色
（1）document.getElementById
//document.getElementById("id属性值")根据ID属性获取元素（2）document.getElementsByTagName
//document.getElementsByTagName("标签名")根据标签名获取元素
（3）element.onclick
//元素对象.事件属性 =事件处理函数
//element.onclick(单击事件)=事件处理函数（4）element.style
//element.style.样式属性名="样式属性值"（5）backgroundColor
//backgroundColor 设置背景颜色（6）总代码：
<body>
<!-- HTML部分 -->
<button id="btn">点我呀,给你点颜色看看</button>
<!-- <ul>
<li>给你点颜色看看</li>
</ul> -->
<!-- ul>li{给你点黄色看看}*5 -->
<ul>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
</ul>
<!-- JS部分 -->
<script>
//1.获取元素
let btn = document.getElementById("btn")
console.log(btn);
let liList =document.getElementsByTagName("li")
console.log(liList);
//获取元素
//document.getElementById("id属性值")根据ID属性获取元素
//document.getElementsByTagName("标签名")根据标签名获取元素
//2.注册事件
btn.onclick=function(){
//3.事件处理
for(let i=0;i<liList.length; i++){
if(i%2==0){
console.log("黄色");
liList[i].style.backgroundColor="yellow"
}else{
console.log("绿色");
liList[i].style.backgroundColor="green"
}
}
}
//元素对象.事件属性 =事件处理函数
//element.onclick(单击事件)=事件处理函数
//元素样式操作
//element.style.样式属性名="样式属性值"
//backgroundColor 设置背景颜色
</script>
</body>（7）结果：
2---获取元素案例2-微博评论框
（1） textarea 多行文本框
（2） placeholder 占位符
（3）maxlength 最大字符容量
（4）根据css选择器获取元素
//根据css选择器获取元素
//document.querySelector("#id选择器名")根据id选择器 获取函数
//document.querySelector(".class类选择器")根据class类选择器获取元素
（5）console.log(this.value);
// console.log(this.value);// 打印输入框的内容（6）console.log(this.value.length)；
// console.log(this.value.length);// 打印输入框内容的长度（7）element.oninput(输入事件)=事件处理函数
// 元素对象.事件属性 = 事件处理函数
// element.oninput(输入事件)=事件处理函数（8） element.innerHTML
// 设置内容
// element.innerHTML =“HTML内容”（10）总代码：
<!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>
.count{
color: red;
}
</style>
</head>
<body>
<div class="box">
<!-- textarea 多行文本框 -->
<!-- placeholder 占位符 -->
<!-- maxlength 最大字符容量 -->
<textarea name="" id="area" cols="38" rows="10" placeholder="说点什么吧" maxlength="140"></textarea>
</div>
<span class="count">0</span>
<span>/</span>
<span>140</span>
<script>
//1.获取元素
let area =document.querySelector("#area")
console.log(area);
let count =document.querySelector(".count")
console.log(count);
//根据css选择器获取元素
//document.querySelector("#id选择器名")根据id选择器 获取函数
//document.querySelector(".class类选择器")根据class类选择器获取元素
// 2.设置事件
area.oninput = function(){
// console.log(this.value);// 打印输入框的内容
// console.log(this.value.length);// 打印输入框内容的长度
count.innerHTML = this.value.length
}
// 元素对象.事件属性 = 事件处理函数
// element.oninput(输入事件)=事件处理函数
// 设置内容
// element.innerHTML =“HTML内容”
</script>
</body>
</html>（11）结果：
3---获取元素案例3-开关灯
（1）document.body
//document.body 获取文档中的body标签（2）总代码：
<body>
<input type="button" value="关灯" id="btn">
<script>
//1.获取元素
let btn=document.getElementById("btn")
console.log(btn);
//获取元素
// document.getElementById("id属性值")根据ID属性获取元素
//2.事件处理
// 按钮点击事件
btn.onclick =function(){
//document.body 获取文档中的body标签
let body = document.body
if(this.value=="关灯"){
this.value="开灯"
//this.style.backgroudColor ="balck"
body.style.backgroundColor="black"
}else{
this.value="关灯"
//this.style.backgroundColor="white"
body.style.backgroundColor="white"
}
}
//元素对象.事件属性=事件处理函数
//element.onclick(单击事件)=事件处理函数
// 元素样式操作
// element.style.样式属性名="样式属性值"
// backgroundColor 设置背景颜色
</script>
</body>（3）结果：
4---元素内容操作案例1-真香定律
（1）法一：
<body>
<!-- 一句话 -->
<p id="hua">我王境泽就是饿死,死外边,从这里跳下去,也不会吃你们一点东西</p>
<!-- button按钮 -->
<input type="button" value="王子变形记" id="btn">
<!-- JS -->
1.获取元素(话、按钮)
2.设置事件
按钮.点击事件 = function(){
改变话的内容
}
<script>
let btn=document.getElementById("btn")
let hua=document.getElementById("hua")
btn.onclick=function(){
hua.innerHTML="真香"
}
</script>
</body>（2）法二：
<body>
<div id="text">我王境泽就是饿死，死外边,从这里跳下去,也不会吃你们一点东西</div>
<input type="button" value="王子变形记" id="btn" onclick="changeText()">
<script>
function changeText(){
document.getElementById("text").innerHTML="真香"
}
//设置内容
//element.innerHTML="HTML内容"
</script>
</body>（3）结果：
5---元素内容操作案例2-显示实时时间
（1）总代码：
（2）结果：
<!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>
p{
/* 设置文字大小 */
font-size: 50px;
/* 设置文本对齐方式为居中 */
text-align: center;
}
span{
/* 设置字体加粗 */
font-weight: bolder;
color: blue;
}
</style>
</head>
<body>
<p>现在是<span id="clock">09:28:00</span></p>
<input type="button" value="测试按钮" onclick="showTime()">
<script>
//获取实时时间函数
function showTime() {
//获取日期对象
var date=new Date()
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
// var text =date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()
// console.log(text);
// document.getElementById("clock").innerHTML=text
var text2=time(date.getHours())+":"+time(date.getMinutes())+":"+time(date.getSeconds())
document.getElementById("clock").innerHTML =text2
}
function time(t) {
if(t<10)
t="0"+t;
return t
}
//定时器函数
//setInterval 每隔多少毫秒数完成什么函数
setInterval(showTime,1000)
</script>
</body>
</html>
6---元素样式操作案例1-改变盒子大小
（1）总代码：
<!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>
.box{
width: 50px;
height: 50px;
background-color: pink;
margin: 50px auto;
/* margin是设置盒子外边距，
第一个值为上下外边距，第二个值为左右外边距。
当第二个值设置为auto时，元素左右居中 */
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
//1.获取元素
let box =document.getElementById("box")
//定义一个变量，存储用户的点击数
var i=0;
//2.注册事件
box.onclick=function(){
++i
console.log(i);
//单击次数为奇数，变大
if (i%2) {
this.style.width="500px"
this.style.height="500px"
this.innerHTML="大"
}else{
//单击次数为偶数，变小
this.style.width="50px"
this.style.height="50px"
this.innerHTML="小"
}
}
</script>
</body>
</html>（2）结果：
7---元素样式操作案例2-点击按钮变色
（1）总代码：
<body>
<button>按钮一</button>
<button>按钮二</button>
<button>按钮三</button>
<button>按钮四</button>
<button>按钮五</button>
<button>按钮六</button>
<script>
//getElementsByTagName("button")获得页面中所有标签名为button的数组。
var btns=document.getElementsByTagName("button")
console.log(btns);
//遍历btns数组，为数组中的每一个元素设置点击事件
for(let i=0;i<btns.length;i++){
console.log(i);
btns[i].onclick=changeColor
}
function changeColor(){
for(let j=0;j<btns.length;j++){
//this为正在点击的按钮
if (btns[j]==this){
console.log(this);
console.log(btns[j]);
this.style.backgroundColor="pink"
}else{
console.log(btns[j]);
btns[j].style.backgroundColor="gray"
}
}
}
</script>
</body>
</html>（2）结果：
8---元素样式操作案例3-一闪一闪亮晶晶
（1）onmouseover
//onmouseover 鼠标移入事件（2）display="none"
//display="none"设置元素隐藏（3）onmouseout
//onmouseout 鼠标移出事件（4）display="block
//display="block"设置元素显示（5）总代码：
<body>
<img src="./微信图片_20240612160354.jpg" alt="" id="star">
<script>
//1.获取元素
let star=document.getElementById("star")
//onmouseover 鼠标移入事件
star.onmouseover=function(){
//display="none"设置元素隐藏
star.style.display="none"
}
//onmouseout 鼠标移出事件
star.onmouseout=function(){
//display="block"设置元素显示
star.style.display="block"
}
</script>
</body>（6） 结果：
鼠标移出图片时：
鼠标移入图片时：
9---元素样式操作案例4-我方了
（1）getElementsByClassName
//获取元素
//getElementsByClassName("类名")通过类名获取元素，得到所有这个类名的数组。（2）element.classList
// element.classList:获取元素的类名列表（3）element.classList.add
// element.classList.add("类名"):为元素添加类名（4）element.classList.remove
// element.classList.remove(“类名”):为元素移除类名（5）总代码：
<!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>
.box{
width: 200px;
height: 200px;
background-color: blue;
}
.btn{
margin:20px 20px;
}
.changeBox{
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 当给box盒子增加。changeBox类名时，圆角弧度的类名就也被添加给了这个盒子 -->
<!-- 需要设置点击事件，自动的完成changeBox类名的移除和添加 -->
<div class="box"></div>
<!-- <div class="box changeBox"></div> -->
<button class="btn">我圆了</button>
<button class="btn">我方了</button>
<script>
//1.获取元素
//getElementsByClassName("类名")通过类名获取元素，得到所有这个类名的数组。
var box=document.getElementsByClassName("box")
var btns=document.getElementsByClassName("btn")
console.log(box);
console.log(btns);
//2.设置点击事件
//btns[0]指向btns数组中下标为0的元素，也就是第一个按钮，“我圆了”
btns[0].onclick=function (){
console.log(box[0].classList);//['box',value:'box']
box[0].classList.add("changeBox")
console.log(box[0].classList);//['box', 'changeBox', value: 'box changeBox']
}
btns[1].onclick = function(){
console.log(box[0].classList); ['box', 'changeBox', value: 'box changeBox']
box[0].classList.remove("changeBox")
console.log(box[0].classList);//['box',value:'box']
}
// element.classList:获取元素的类名列表
// element.classList.add("类名"):为元素添加类名
// element.classList.remove(“类名”):为元素移除类名
</script>
</body>
</html>（6）结果：
点我圆了：
点我方了：
10---元素属性操作案例1-我哭了我装的
（1）总代码：
<body>
<img src="./我哭了.jpg" alt="" width="400px" height="300px" id="pic">
<script>
//1.获取图片元素
var pic=document.getElementById("pic")
console.log(pic);
//2.为元素设置事件
//onmouseenter 鼠标移入事件
pic.onmouseenter=function(){
this.src="./我装的.jpg"
}
//onmouseleave 鼠标移出事件
pic.onmouseleave=function(){
this.src="./我哭了.jpg"
}
</script>
</body>（2）结果：
鼠标移出时：
鼠标移入时：
11---元素属性操作案例2-404
（1）input.value
//修改input属性的value值
input.value="404NotFound"（2）disabled
//修改button标签的disabled,开启禁用模式
this.disabled=true（3）总代码：
<body>
<input type="text" placeholder="请输入内容" value>
<button>搜索</button>
<script>
//1.获取元素
let input=document.querySelector("input")
let btn=document.querySelector("button")
//2.设置事件
btn.onclick=function(){
//修改input属性的value值
input.value="404NotFound"
//修改button标签的disabled,开启禁用模式
this.disabled=true
}
</script>
</body>（4）结果：
点搜索前：
点搜索后：
12---元素属性操作案例3-显示和隐藏密码
（1）总代码：
<!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>
img{
width: 20px;
height: 20px;
/* 设置左边距 */
margin-left: 10px;
}
.box{
/* 设置弹性布局 */
display: flex;
}
</style>
</head>
<body>
<div class="box">
<input type="text" id="input">
<img src="./close.jpg" alt="" id="img">
</div>
<!-- 当input标签的type属性为password时，为密码框
<input type="password"> -->
<script>
//1.获取元素
let input=document.getElementById("input")
let img=document.getElementById("img")
//2.注册事件
img.onclick=function(){
if (input.type =="text"){
input.type="password"
img.src="./close.jpg"
}else{
input.type="text"
img.src="./open.jpg"
}
}
</script>
</body>
</html>（2）结果：
13---元素属性操作案例4-隔行变色plus
（1）三元表达式
//i%2==0?"yellow":"green"三元表达式
//?前面的语句成立，就执行？与：之间的内容，否则执行：之后的内容（2）Attribute属性
//操作attribute属性
//element.setAttribute("属性名"，“属性值")设置属性
//element.getAttribute(属性名)（3）总代码：
<body>
<!-- ul>li{string}*num -->
<ul>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
<li>给你点黄色看看</li>
<li>给你点绿色看看</li>
</ul>
<script>
//1.获取元素
var liList = document.querySelectorAll("li");
console.log(liList);
//2.遍历liList数据，拿到每一个li元素
for (let i = 0; i < liList.length; i++) {
//3.为列表设置背景颜色
//element.style.backgroundColor为元素设置背景颜色
//i%2==0?"yellow":"green"三元表达式
//?前面的语句成立，就执行？与：之间的内容，否则执行：之后的内容
liList[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green";
//4.为元素设置事件
//onmouseenter 鼠标移入事件
liList[i].onmouseenter = function () {
//5.存储元素当前背景颜色
this.setAttribute("bgc", this.style.backgroundColor);
// console.log(this.getAttribute("bgc"));
//6.设置鼠标移入效果
this.style.backgroundColor = "red";
};
// onmouseleave 鼠标移出事件
liList[i].onmouseleave = function () {
//取出自定义的背景颜色
console.log(this.getAttribute("bgc"));
this.style.backgroundColor = this.getAttribute("bgc");
};
}
//操作attribute属性
//element.setAttribute("属性名"，“属性值")设置属性
//element.getAttribute(属性名)
</script>
</body>（4）结果：
第7章-DOM（下）
1---节点操作案例1-删除水平线
（1）parentNode
//parentNode 获取父节点（2）previousSibling
//previousSibling 获取上一个兄弟节点（3）previousElementSibling
//previousElementSibling 获取上一个兄弟节点的元素（4）nextSibling
//nextSibling 获取下一个兄弟节点（5）nextElementSibling
//nextElementSibling 获取下一个兄弟节点元素（6）node.removeChild(child)
//移除节点
//node.removeChild(child)
//node表示父节点，child表示node中需要被移除的子节点（7）总代码：
<body>
<h1>JavaScript程序设计</h1>
<hr />
<h2>什么是JavaScript</h2>
<p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p >
<hr />
<h2>第一部分 JavaScript概述</h2>
<p>JavaScript的发展历史</p >
<input type="button" value="删除水平线" onclick="delhr()">
<script>
function delhr(){
// 1.获取元素
let hrs=document.querySelectorAll("hr")
console.log(hrs);//[hr,hr]
// 2.遍历元素数组
for(let i=0;i<hrs.length;i++){
var hr=hrs[i]
console.log(hr);
//parentNode 获取父节点
console.log(hr.parentNode);
//previousSibling 获取上一个兄弟节点
console.log(hr.previousSibling);
//previousElementSibling 获取上一个兄弟节点的元素
console.log(hr.previousElementSibling);
//nextSibling 获取下一个兄弟节点
console.log(hr.nextSibling);
//nextElementSibling 获取下一个兄弟节点元素
console.log(hr.nextElementSibling);
//移除节点
//node.removeChild(child)
//node表示父节点，child表示node中需要被移除的子节点
hr.parentNode.removeChild(hr)
}
}
</script>
</body>（8）结果：
点击按钮前：
点击按钮后：
1840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
