Javascript概述
1、JS简介
JS是运行在浏览器的脚本编程语言，最初用于Web表单的校验。现在的作用主要有三个：
网页特效、表单验证、数据交互
JS由三部分组成，分别是ECMAscript、DOM、BOM，其中ECMAscript规定了JS的基本语法和规则；DOM和BOM统称Web API；DOM叫做文档对象模型，用于操作Web页面上的元素；BOM叫做浏览器对象模型，用于操作浏览器窗口
JS的书写位置和CSS一致，分为内部JS、外部JS、行内JS
内部JS：书写在<body>下方，JS代码被<script>标签包裹，<script>标签写在<body>的最下方
外部JS（最常用）：新建一个.js文件，在<body>底端通过<script src=".js文件路径"></script>引入，外部JS不要在标签中间写代码，会被忽略
行内JS：VUE框架用，写在标签中间
JS是单线程，所有任务排队执行，前一个任务结束，后一个任务才去执行。但HTML5里为了让JS多线程执行，提出了同步与异步的概念。
<body>
<script>
alert("你好")
</script>
<script src="./test.js"></script>
</body>JS语句使用英文;表示语句结束，为了风格统一，结束符要么全加，要么全不加
2、JS输入输出语句
输出语句
往文档里输出内容，可以输出文字，也可以输出标签：document.write(" ")
<script>
document.write('<h1>你好</h1>')
</script>页面弹出警示对话框：alert（“ ”）
在控制台输出语法，给程序员调试用:console.log（‘ ’）
输入语句
弹出一个对话框，对话框包含文字信息，提示用户输入文字：prompt(' ')
alert('你好');
prompt("请输入姓名");
document.write('<h1>你好</h1>');
console.log('控制');浏览器按照HTML文档顺序执行JS代码，但alter和prompt会跳过页面渲染先被执行
3、变量
声明变量：let 变量名，声明多个变量用逗号let 变量名1，变量名2……,不同变量之间用逗号隔开
变量赋值：使用赋值符号‘=’,变量名=值
变量名可以是数字、下划线、$和字母的组合，数字不能做开头，JS变量名区分大小写
let name=prompt('请输入你的姓名：')
let age=prompt('请输入你的年龄：')
document.writeln(name,age)4、常量
初始化赋值后就不需要改变的变量称作常量，JS中常量用const声明，const声明后的常量不可重新赋值，一般使用全大写的英文作为常量名
const N = 1
console.log(N)
5、数据类型
JS数据类型分为基本数据类型和引用数据类型
基本数据类型有：
数字:number，JS无需声明数字类型，根据赋值的数据判断类型。若数字类型运算结果错误或者数字的不当操作会返回NaN，对NaN的任何操作都会返回NaN。
字符串:string：用‘ ’或者" "包裹的数据，两个字符串拼接使用+，也可以使用模版字符串进行拼接，模板字符串语法为：`字符串${变量}字符串`
let usrName=prompt("请输入用户姓名")
let age=prompt("请输入用户年龄")
document.writeln(`<h1>用户的姓名为${usrName}年龄为${age}</h1>`)布尔:true\false
未定义：undefined:声明一个变量未赋值就是undefined
空:null
引用数据类型有：
object 对象
数据类型可以进行转换，隐式转换：在运算时自动进行转换，如+两端有一个是字符串两边都转换为字符串，-*/自动转换为数字类型，+字符串会将字符串转换为数字型；显式转换：使用函数强制转换
parseint(数据)：只保留整数
parsefloat(数据)：只保留小数
6、运算符
运算符除了+-*/这种基础运算符外，还有：
自增运算符：++：让变量+1，分为前置自增和后置自增，前置优先级高
自减运算符：--：让变量-1
比较运算符：<\>\>=\<=，以及，==：判断左右值是否相等；===：判断左右值和类型是否相等（常用）；!=判断左右是否不等；!==：判断左右是否不全等；NaN不等于任何值，包括自己；字符串可以比较，比较其ASCLL码
逻辑运算符：与：&&；或：||；非：!；
7、分支语句
分支语句包括：if语句、三元运算符、switch语句
if语句为：
if(条件1){满足条件1需要执行的代码}
else if(条件2){满足条件2的代码}
……
else {不满足条件的代码}
三元运算符用于处理双分支的条件语句，比if写法简单：
条件？满足条件执行代码：不满足条件执行的代码
switch语句为，执行代码后一定要加break：
switch(数据){
case 值1：
代码1
break
case 值2：
代码2
break
……
default (上述条件都不满足)：
代码n
break
}
8、循环语句
while循环语句：
while(循环条件) {需要重复执行的代码}
for循环语句：
for(变量起始值；终止条件；变量变化量){循环语句}
结束循环语句有两种：
break：结束循环
continue：结束本次循环，继续下次循环
// 输出九九乘法表
let a = 1
let i = 1
for(a=1;a<=9;a++) {
for(b=i;b<=9;b++) {
document.writeln(`${a} X ${b} =${a*b} `)
}
i++
document.writeln('<br>')
}9、数组
声明数组：let 数组名[数据1，数据2……]
返回数组长度：数组名.length()
遍历数组：for循环+索引
修改元素：数组[索引]=重新赋值
增加元素：在数组末尾添加元素：数组名.push（数据1，数据2……）,返回新增元素后数组的长度；在数组开头添加元素：数组名.unshift（数据1，数据2，……）,返回新增元素后数组的长度
删除元素：删除数组中最后一个元素：数组名.pop（）返回值是删除的元素；删除指定的元素：数组名.splice(起始索引位置，删除元素个数）；删除数组中第一个元素数组名.shift()，返回值是删除的元素
// 冒泡排序，输入数组长度，输入数组数字，输出由大到小排序的数组
let len = +prompt("输入数组的长度")
let nums=[]
for(i=0;i<len;i++){
let num=+prompt('输入数字：')
nums.push(num)
}
for(i=0;i<len-1;i++){
for(j=0;j<len-1;j++){
if(nums[j]<=nums[j+1]){
n=nums[j+1]
nums[j+1]=nums[j]
nums[j]=n
}
}
}
document.writeln(nums)10、函数
函数的声明语法：
function 函数名(形参列表){
函数体
}
函数名命名规则和变量名一致，建议用动词约定，例如：
can:是否可行；has：判断是否含有某个值；is：判断是否为某个值；get：获取某个值；set：获取某个值；load:加载某个值
函数调用语法：
函数名(实参列表)
函数返回值：return 值，若函数没有返回值，则默认返回undefined
//返回一个数组最大值
function find_max(arr) {
res=0
for(let i=0;i<arr.length;i++){
if (res<= arr[i]){
res=arr[i]
}
}
return res
}
nums=[7,11,14,3,2,4,8,10]
document.writeln(find_max(nums))
//自动转换时分秒,自动补0
function auto_turn(second) {
let hour = 0
let minute = 0
while(second>=60){
second-=60
minute+=1
if(minute===60){
minute-=60
hour+=1
}
}
if(second<10){
second='0'+second
}
if(minute<10){
minute='0'+minute
}
if(hour<10){
hour='0'+hour
}
document.writeln(`${hour}时${minute}分${second}秒`)
}
num=+prompt('请输入秒：')
auto_turn(num)匿名函数，没有名字的函数，无法直接使用：
语法：function() {}
调用方法：
函数表达式：将函数赋值给一个变量，立即执行函数必须加封号
立即执行函数：（function {}）（）;
数组的map方法
用于遍历数组并返回新的数组，与forEach不同，map有返回值语法为：
数组.map(function(变量1，变量2){})；其中变量1为数组的元素，变量2为数组的索引
数组的join方法
用于将数组所有元素拼接为一个字符串，语法为：
数组.join('用来分隔的字符')，其中join里如果是空串，则说明元素之间没有字符
11、对象
对象是JS里的一种数据类型，类似于C++里的结构体或者python里的字典，是一组无序数据的集合
对象声明语法：
let 对象名={}(更常用)；let 对象名=new Object()
对象内容有两种：属性和方法
let 对象名={
属性名：属性值，
方法名：函数
}
属性
查找对象内容：对象名.属性 或 对象名[‘属性名’]
更改对象的数据：对象名.属性=新值
增加对象的属性：对象名.新属性=新值
删除对象的数据：delete 对象名.属性
方法
对象的方法使用匿名函数
方法名:function(){函数体}
方法调用：对象名.方法名
对象遍历可以用来渲染web动态页面，语法：
for(let k in 对象名){
获得对象属性：k
获得对象值：obj[k]
}
对象可以和数组结合使用，放置批量对象
let 对象名 = [{对象1}，{对象2}……]
//CSS渲染
<style>
table {
text-align: center;
}
table,td,th {
margin: 0 auto;
font-family: '黑体';
border: 1px solid #000;
border-collapse:collapse;
}
tr {
width: 100px;
cursor: pointer;
}
th,td {
padding: 30px;
}
table tr :not(:first-child):hover{
background-color: aliceblue;
}
</style>//在web中添加学生信息，生成表格
let system_info =[]
nums= +prompt('请输入学生人数')
for(i=0;i<nums;i++){
names=prompt('请输入姓名')
gender=prompt('请输入性别')
score=prompt('请输入分数')
level=prompt('请输入等级')
system_info.push({uname:names,ugender:gender,uscore:score,ulevel:level})
}
for (let i=0;i<system_info.length;i++){
document.writeln(`
<tr>
<td>${i+1}</td>
<td>${system_info[i].uname}</td>
<td>${system_info[i].ugender}</td>
<td>${system_info[i].uscore}</td>
<td>${system_info[i].ulevel}</td>
</tr>
`)
}常用的内置对象
math
包含方法有：
random：生成0-1之间的随机数;ceil：向上取整；floor：向下取整；max:查找最大数；min：查找最小数；pow：幂运算；abs：绝对值；round：四舍五入
12、DOM
DOM基础
API是指使用JS操作html和浏览器，API包括DOM和BOM，其中DOM是用来操作网页内容的内容的，用于开发网页特效、用户交互
在写API中尽量使用const声明变量，数组和对象尽量用const声明。
DOM树：将HTML以树状结构表现出来，称之为DOM树，树中document是最顶级的文件
DOM对象：将HTML的标签获取作为JS中的对象，所有的标签属性可以在对象上找到，修改对象的属性可以映射到标签，DOM的核心思想就是将网页标签作为JS对象处理
DOM中最大的对象叫做document
获取DOM元素：使用CSS选择器获取，语法：
选择匹配的第一个元素(常用)：document.querySelector('CSS选择器') ，可以直接操作修改
选择匹配的所有元素（常用）：document.querySelectorAll('CSS选择器')，获取的是一个包含所有对象的伪数组，修改元素需要遍历，并且不能使用pop、push等方法
根据id获取第一个元素：document.getElementById(‘ID’)
根据标签获取元素：document.getElementsByTagName（‘标签’）
根据类名获取元素：document.getElementsByClassName('类名‘)
修改元素里的内容，可以用两种方式：
对象.innerText属性；对象.innerHTML属性
innerText属性：
将文本内容添加、更新到任意标签位；显示纯文本，不解析标签
innerHTML属性：
将文本内容添加、更新到任意标签位；解析标签，多标签时使用模板字符串
<script>
//实现抽奖
const staff=['小明','小红','小蓝','小绿']
let num= Math.floor(Math.random()*staff.length)
console.log(num);
const one = document.querySelector('#one')
one.innerHTML = `一等奖：${staff[num]}`
staff.splice(num,1)
console.log(staff);
num= Math.floor(Math.random()*staff.length)
console.log(num);
const two=document.querySelector('#two')
two.innerHTML=`二等奖：${staff[num]}`
staff.splice(num,1)
console.log(staff);
num= Math.floor(Math.random()*staff.length)
console.log(num);
const three=document.querySelector('#three')
three.innerHTML=`三等奖：${staff[num]}`
</script> 修改元素属性
可以通过JS设置、修改、删除元素属性
语法： 对象.属性=值
可以通过样式标签修改元素的样式属性
对象.style.属性=值（带横杠的值使用驼峰命名法，一定要带上引号和单位）
可以通过类名修改样式属性，将JS和CSS配合使用（修改样式比较多时使用）
对象.className=‘类名’（如果原先的标签有类名了要加上原来的类名，新类名就不会覆盖原来的类名）
可以通过classList修改样式属性（h5新增，最常用）
追加一个类：对象.classlist.add('类名')
删除一个类：对象.classlist.remove(‘类名’)
切换一个类，有就删除，没有就铲除：对象.classlist.toggle（‘类名’）
.bigbox {
width: 560px;
height: 400px;
background-color: #ffffff;
border: 1px solid #000000;
display: flex;
flex-direction: column;
}
.slipImg {
width:100%;
height: 400px;
background-color: antiquewhite;
display: flex;
overflow: hidden;
}
.slipImg img {
width: 100%;
height: 100%;
object-position:center ;
}
.imgTitle{
background-color: gray;
}
.imgTitle p {
align-self: center;
text-align: center;
}const img = [ //添加数据
{url:`./0.jpeg`,title:'让我来结束这一切'},
{url:`./1.jpeg`,title:'我没说不去'},
{url:`./2.jpeg`,title:'这话才不会告诉小爱音呢'},
{url:`./3.jpeg`,title:'你是来吵架的吗'},
{url:`./4.jpeg`,title:'欧内该'},
{url:`./5.jpeg`,title:'瓦塔西'},
{url:`./6.jpeg`,title:'这不是小睦的错哦'},
{url:`./7.jpeg`,title:'无论这次，还是那次'}
]
let randomNum=parseInt(Math.random()*img.length)
console.log(randomNum)
const slipImg = document.querySelector('.slipImg img')
slipImg.src=img[randomNum].url
const imgTitle = document.querySelector('.imgTitle p')
imgTitle.innerHTML=img[randomNum].title操作表单元素属性
获取表单里的内容：表单.value=值
更改表单的类型：表单.type=值
表单的一些属性如disable、checked、selected添加了就具有效果，移除就没有效果，有无属性用布尔值表示，true表示有该属性
const inp = document.querySelector('input')
inp.type='text'
const butt = document.querySelector('button')
butt.disabled= false标签属性
标签属性分为标准属性和自定义属性，HTML5可以自定义属性，用于给标签添加功能
自定义属性的命名为data-属性名
在标签上属性一律以data-开头，在DOM对象上一律以dataset对象的方式获取
间歇函数（定时器）
实现网页中每隔一段时间自动执行一段代码，无需手动刷新
开启定时器：setInterval(函数，间隔时间)，作用：每间隔一段时间，调用一次这个函数，间隔单位是毫秒，定时器有返回值，返回值是一个id数字
关闭定时器：首先给开启定制器一个变量名let 变量名=setInterval(函数，间隔时间)，
之后使用clearInterval(变量名)去关闭定时器
//用户协议
const butt = document.querySelector('.butt')
butt.disabled=true
let i = 10
let daojishi=setInterval(function(){
i--
butt.innerHTML= `倒计时${i}`
if(i===0){
clearInterval(daojishi)
butt.disabled=false
butt.innerHTML= `我同意`
}
},1000)事件监听
事件是编程系统内发生的用户操作，事件监听就是程序检测是否有事件产生，若产生则调用一个函数回应
语法：对象.addEventListener('事件类型'，调用的函数)
事件监听三要素：事件源、事件类型和事件调用函数
事件源：确定出发的是哪个DOM元素
事假类型：事件触发方式，事件类型分为四种：鼠标事件、焦点事件、键盘事件、文本事件
鼠标事件有：click 鼠标点击；mouseenter 鼠标经过；mouseleave 鼠标离开
//随机点名案例
const imgSlip = document.querySelector('.slipImg img')
const imgTitle = document.querySelector('.imgTitle p')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
start.addEventListener('click',function(){
Slip =setInterval(function(){
let random = parseInt(Math.random()*img.length)
console.log(random)
imgSlip.src = img[random].url
imgTitle.innerHTML = img[random].title
},100)
})
end.addEventListener('click',function(){
clearInterval(Slip)
})焦点事件有：表单获得光标触发，focus 获得焦点；blur 失去焦点
//下拉菜单案例
const input = document.querySelector('[type=search]')
const list = document.querySelector('.list')
input.addEventListener('focus',function(){
list.style.display='block'
})
input.addEventListener('blur',function(){
list.style.display='none'
})键盘事件有：keydown 键盘按下触发；keyup 键盘抬起触发
文本事件有：input 用户输入文本触发
事件调用函数
//评论字数案例
const comment = document.querySelector('[type=text]')
const commentMoni = document.querySelector('.comment-moni')
commentMoni.style.opacity=0
comment.addEventListener('input',function(){
let charNum = comment.value.length
commentMoni.style.opacity=1
commentMoni.innerHTML=`已经输入${charNum}个字`
console.log(1);
})事件对象
事件对象也是对象，对象里存储了事件触发的相关信息，事件对象可以判断用户进行了哪些操作，例如鼠标点击了某个元素或者键盘按下了哪些键
获取事件对象：在事件调用函数中第一个参数就是事件对象，一般命名为e\ev\event
事件对象的属性
部分常用属性有：
type：获取当前事件类型
clientX/clientY：获取光标相对于浏览器可见窗口最左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下键盘的值
//评论案例
comment.addEventListener('keyup',function(e){
let charNum = comment.value.length
commentMoni.style.opacity=1
commentMoni.innerHTML=`已经输入${charNum}个字`
console.log(1);
if(e.key==='Enter'){
alert(comment.value)
comment.value=''
commentMoni.style.opacity=0
}
})环境对象
环境对象指每个函数里特殊的对象this，用于指向调用函数的对象，普通函数里this指向浏览器窗口window，粗略来说谁调用函数this指向谁
回调函数
若函数A可以作为参数传递给函数B时，A称为回调函数，常用的有定时器函数、事件监听函数里的函数就是回调函数，匿名函数常用作回调函数
//模拟导航栏
const navList = document.querySelectorAll('.nav-list li')
const contentList = document.querySelectorAll('.content-list li')
console.log(navList)
console.log(contentList)
for(let i = 0;i<navList.length;i++){
navList[i].addEventListener('mouseenter',function(){
document.querySelector('.nav-list .active').classList.remove('active')
this.classList.add('active')
document.querySelector('.content-list .content-active').classList.remove('content-active')
document.querySelector(`.content-list li:nth-child(${i+1})`).classList.add('content-active')
})
}
//全选案例
//获取全选框和所有的小选择框
const checkAll = document.querySelector('#checkall')
console.log(checkAll)
const checks = document.querySelectorAll('.ck')
console.log(checks)
//当勾选全选框时控制小选择框
checkAll.addEventListener('click',function(){
for(let i = 0;i<checks.length;i++){
checks[i].checked=this.checked
}
})
//循环判断选择小选择框的长度（伪类选择器）是否等于小选择框的总长度,每选中一个小框监听一次
for(let i = 0;i<checks.length;i++){
checks[i].addEventListener('click',function(){
console.log(document.querySelectorAll('.ck:checked'))
checkAll.checked=document.querySelectorAll('.ck:checked').length===checks.length
})
}事件流
事件流指事件完整执行中的流动路径，事件流的分为两个阶段：捕获阶段和冒泡阶段，实际工作以冒泡阶段为主
捕获阶段：从document到标签对象的过程，例如：document.addEventlistener(事件，函数，[是否捕获事件])，第三维若为true，则事件按照document到选中的对象从大到小流动执行，一般省略不写，默认为false（冒泡）
冒泡阶段：从标签对象到document的过程,当一个元素事件被触发时，会依次向上调用所有的父级元素同名事件
阻止冒泡：将事件限制在当前元素内，阻止冒泡的前提是拿到事件对象，语法为：
事件对象.stopPropagation()；此方法为阻止事件流，同样适用于捕获
//阻止冒泡
const fa = document.querySelector('.father')
const so = document.querySelector('.son')
fa.addEventListener('click',function(){
alert('爸爸')
})
so.addEventListener('click',function(e){
alert('儿子')
e.stopPropagation()
})事件解绑
可以在触发一次事件后不再触发该事件，语法：
removeEventListener(事件类型，事件处理函数，[冒泡或捕获阶段])；匿名函数无法解绑
事件委托
可以用冒泡阶段实现事件委托，事件委托可以减少事件注册次数，提高程序性能。只给父元素绑定事件，当触发子元素时触发父元素的事件，使用事件对象.target.tagName获得真正需要触发的元素
//事件委托版本导航栏
const tabNav = document.querySelector('.nav-list')//拿到父元素
tabNav.addEventListener('click',function(e){
document.querySelector('.table-nav .nav-list .active').classList.remove('active')//将上一个元素解绑
e.target.classList.add('active')//绑定点击的事件
console.log(e.target.dataset.id)//使用自定义属性去一一对应图片
const id = +e.target.dataset.id
document.querySelector('.content-list .content-active').classList.remove('content-active')
document.querySelector(`.content-list li:nth-child(${id+1})`).classList.add('content-active')
//更换图片
})阻止元素默认行为
例如在填写表单时，只要有内容不合法，就阻止提交按钮，语法为：
事件对象.preventDefault()
页面加载事件
页面加载事件写在<title>标签的下方，页面加载事件有两种：
用于加载外部资源全部加载完毕时触发的事件，使用较少，监听页面所有资源是否加载完成；给window添加事件，事件名：load
window.addEventListener('load',function(){})
用于只加载出HTML结构，而无需等待CSS、图片等资源加载出来的事件；给document添加事件，事件名：DOMContentLoaded
document.addEventListener('DOMContentLoaded',function(){})
页面滚动事件
用于在页面滚动或页面滚动到一个区域时进行一些处理
事件名：scroll
可以监听整个页面的滚动：window.addEventListener('scroll',function(){})(给documengt或者window添加都可)
也可以监听单个元素的滚动
有关页面滚动的属性有：
scrollTop和scrollLeft：返回元素内容向上/左滚动时被卷去的内容长度，即超出元素上/左边框的长度
如果向知道整个页面滚动的长度：document.documentElement：获取整个html
//当页面下滑一段距离后显示侧边栏
window.addEventListener('scroll',function(){
const elevator = document.querySelector('.soyo-elevator')
if(document.documentElement.scrollTop>=300){
elevator.style.opacity=1
}
else{
elevator.style.opacity=0
}
})日期对象
日期对象是用来表示时间的对象，用于得到当前系统时间，在JS代码中使用new关键字对对象进行赋值的，称为实例化
获得当前系统时间：const date = new Date（）
获得指定时间: const date = new Date('指定的时间')
日期对象的方法有：
getFullyear()：获得四位年份
getMonth()：获得月份，取值为0-11
getDate()：获得月份中的每一天
getDay()：获取星期，取值为0-6
getHours()：获取小时，取值为0-23
getMinutes()：获取分钟，取值为0-59
getSeconds()：获取秒，取值为0-59
时间戳
JS中时间戳是指1970年01月01日00时00分00秒起至现在时间相差的毫秒数，通过时间戳可以得到真随机数和两段时间的时间差，有三种方法获得时间戳：
getTime()方法：必须实例化，再用实例化的对象调用这个方法
简写为+new Date()(最常用)：无需实例化，直接获取当前时间的时间戳，也可以使用+new Date（‘指定的时间’）获取指点时间时间戳
使用Date.now()：无需实例化，直接获取当前时间的时间戳
//在网页实时演示时钟和指定时间的倒计时
const myDate = document.querySelector('.time-date')//获取对象
const timeCount = document.querySelector('.time-count')
const targetTime = +new Date('2025-8-30 00:00:00')//指定时间的时间戳
const weekTable = ['日','一','二','三','四','五','六']
console.log(targetTime)
setInterval(function(){
const date = new Date()//获得当前系统时间
const nowDate = +new Date()//获得当前系统时间的时间戳
let year = date.getFullYear()//获得当前年
let month = date.getMonth()+1//获得当前月
let day = date.getDate()
let week = date.getDay()
let hours = date.getHours()
let minutes = date.getMinutes()+1
let second = date.getSeconds()+1
myDate.innerHTML = `现在的时间为：${year}年${month}月${day}日${hours}时${minutes}分${second}秒 星期${weekTable[week]}`//显示当前时间
let timeDown = (targetTime-nowDate)/1000//得到相差的时间秒数
let hourDown = 0//相差的小时数
let minuteDown = 0 //相差的分钟数
let secondDown = 0//相差的秒数
if(timeDown>=3600){
hourDown=Math.floor(timeDown/3600)
timeDown=timeDown%3600
}
if(timeDown>=60){
minuteDown=Math.floor(timeDown/60)
timeDown=timeDown%60
}
secondDown=Math.floor(timeDown)
timeCount.innerHTML=`倒计时:${hourDown}时 ${minuteDown}分 ${secondDown}秒`
},1000)节点
DOM树里的每一个内容都称为节点，节点分为：
元素节点：所有的标签
属性节点：所有的属性
文本节点：所有的文本
节点可以进行查找、新增、克隆和删除操作
查找节点
根据关系查找节点，使用查找节点方法可以减少标签获取，节点的关系分为父节点、子节点、兄弟节点
父节点查找：子元素.parentNode，查找子元素最近的一级父节点，若找不到就返回null
子节点查找：父元素.chlidNodes：获得所有的子节点，以伪数组的形式返回
父元素.children（常用）：获得所有的最近的子元素节点，以伪数组的形式返回
兄弟节点查找：下一个兄弟节点：nextElementSibling
上一个兄弟节点：previousElementsSibling
增加节点
新增节点指创建一个新的节点并将其放入指定元素内部
创建节点的方法：document.createElement('标签名')
将创建的节点插入指定父元素内部的方法：
插入到父元素的最后：父元素.appendChild('需要插入的元素')
插入到父元素指定子元素之前：父元素.insertBefore（‘插入在前的元素’）
克隆节点
克隆节点用于复制一个原有的节点，并可将该节点放入指定元素内部，方法为：
元素.cloneNode(布尔值)；布尔值若为true，则代表包含后代节点一起克隆，若为false，则克隆不包含后代节点，默认为false
删除节点
在JS的原生DOM中，删除节点必须经过父元素，语法为：
父元素.removeChild('需要删除的子元素')；若两个元素无父子关系，则不可删除
M端事件
M端指移动端，有自己独有的事件，包括：
触屏事件torch
torchstart：手指触摸到一个DOM元素触发；
touchmove：手指在一个DOM元素上上滑触发；
touchend：手指在一个DOM元素上移开时触发；
swiper插件
别人写好的代码，可以在写自己的网页时复用
//表单提交案例：在表单上填写信息提交后在下方的表格显示
const submit = document.querySelector('.info-submit')//获取元素
const info = document.querySelector('.info div').children//获取所有的表单
const infoTable = document.querySelector('.info-table')//获取表格
console.log(submit,info,infoTable)
submit.addEventListener('click',function(){
const newLine = document.createElement('tr')//点击后在表格里创建新的一行
infoTable.appendChild(newLine)//将新行添加到表格下方
for(i=0;i<info.length;i++){
const infoma = document.createElement('td')//创建新的一个单元格
infoma.innerText=info[i].value//获取表单的内容
newLine.appendChild(infoma)//将单元格添加到新的行中
}//循环写入表单的内容到表格
})//监听提交按钮13、BOM
BOM概念
BOM，为浏览器对象模型，BOM里包含DOM，BOM是浏览器提供的一组对象，里面最重要的是window对象，BOM里的其他对象都是通过window对象来访问
window是全局对象，也是JS中最顶级的对象，基本所有的BOM属性和方法都是基于window的，因此window对象下的属性和方法调用时可以省略window。所有通过var定义的全局变量、函数都会变成window的属性和方法
延时函数
JS内置的一个让代码延迟执行的函数，代码只执行一次，因为有延迟，因此延迟函数后的代码会先执行，与间歇函数一样，都属于BOM的方法，因此调用时一般省略window，语法为：
setTimeout(回调函数，等待的毫秒数)
清除延时函数，与间歇函数方法一致：
将延迟函数赋予给一个变量：let 变量=setTimeout()
clearTimeout(timer)
//设计一个五秒后自动关闭的广告
const adv = document.querySelector('.advertisement')
setTimeout(function(){
adv.style.display= 'None'
},5000)location对象
location的数据类型为对象，其拆分并保存了URL地址的各个组成部分，其常用的属性和方法有：
herf：获取完整的URL地址，对其赋值可以完成页面跳转
search：获取地址中的参数，即?后面的部分
hash：获取地址中的哈希值，即#后面的部分
reload：用于刷新当前页面，传入参数为ture时强制刷新
navigator对象
navigator记录浏览器的相关信息，常用的属性有：
userAgent：检测浏览器的版本和所在平台
history对象
history管理历史记录，不常用，主要属性和方法有：
back()：后退
forward()：前进
go(参数)：实现前进后退，如果是1则前进一个页面，-1则后退一个页面
本地存储
HTML5中新增了本地存储的功能，即将数据存储在本地浏览器中，方便数据的读取，且页面刷新时不丢失数据，本地存储分为两类：localStorage和sessionStorage
localStorage：永久性的将数据以键值对的形式存储在本地电脑上，可以利用同一个浏览器多窗口共享，语法有：
存储数据:localStorage.setItem(key,value),若有该数据则进行更改，没有则进行新增
获取数据:localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
sessionStorage：生命周期为关闭浏览器窗口，同一个窗口可以共享数据，以键值对的形式存储，方法和localStorage相同
因为本地存储只能存储字符串，所以当需要在本地存储复杂数据类型时需要将复杂数据类型转换为JSON字符串，将复杂数据类型转换为字符串保存，语法为：
JSON.stringify(复杂数据)
将JSON字符串转换为对象：
JSON.parse(JSON字符串)
//表单提交本地存储版
const submit = document.querySelector('.info-submit')//获取元素
const info = document.querySelector('.info div').children//获取所有的表单
const infoTable = document.querySelector('.info-table')//获取表格
const objStrore = []//创建一个空数组，用于存储信息
console.log(submit,info,infoTable)
submit.addEventListener('click',function(){
const newLine = document.createElement('tr')//点击后在表格里创建新的一行
infoTable.appendChild(newLine)//将新行添加到表格下方
let data ={}//空对象
const valueList = []//创建一个值表
for(i=0;i<info.length;i++){
const infoma = document.createElement('td')//创建新的一个单元格
infoma.innerText=info[i].value//获取表单的内容
newLine.appendChild(infoma)//将单元格添加到新的行中
valueList.push(info[i].value)//向值表添加信息
}
console.log(valueList)
data.name= valueList[0]//填入信息
data.tele= valueList[1]
data.address= valueList[2]
data.school= valueList[3]
console.log(data)
//将数据存储到数组中
objStrore.push(data)
console.log(objStrore)
//将数组的数据存储到本地
try {
let jsondata = JSON.stringify(objStrore) // 将数组转换为 JSON 字符串
localStorage.setItem('obj', jsondata)
} catch (error) {
console.error('存储到 localStorage 失败:', error)
}
})
//下次打开用本地存储渲染页面
let datalocal = JSON.parse(localStorage.getItem('obj'));
console.log(datalocal);
console.log(datalocal.length);
for (let i = 0; i < datalocal.length; i++) {
const newLine = document.createElement('tr');
infoTable.appendChild(newLine); // 将新行添加到表格下方
// 创建单元格并添加数据
const nameCell = document.createElement('td');
nameCell.innerText = datalocal[i].name;
newLine.appendChild(nameCell);
const teleCell = document.createElement('td');
teleCell.innerText = datalocal[i].tele;
newLine.appendChild(teleCell);
const addressCell = document.createElement('td');
addressCell.innerText = datalocal[i].address;
newLine.appendChild(addressCell);
const schoolCell = document.createElement('td');
schoolCell.innerText = datalocal[i].school;
newLine.appendChild(schoolCell);
}
14、正则表达式
正则表达式是用于匹配字符串中字符组合的模式，通常用于查找、替换符合正则表达式中的文本，在JS中正则表达式也是对象。在JS中正则表达式用于验证用户输入的表单、替换敏感词。
正则表达式的编写分为两步：定义规则和查找
在JS中定义正则表达式的语法有两种
正则表达式语法
定义规则：通过定义自变量的方式；const 变量名 = /表达式/，其中/ /中包裹的部分称为正则表达式的字面量
查找：使用test()方法，用来查看检测字符与指定字符是否匹；变量名.test(被检测的字符)；如果有匹配的字符则返回ture，否则返回false（常用）
使用exec()方法，语法与test()一致，匹配成功返回一个数组，数组包含字面量、用于匹配的字符、字面量第一个字符在检测字符串里的索引和groups，否则返回null
元字符
使用元字符的方法，元字符指一些具有特殊意义的字符，可以极大提高灵活性和匹配功能。元字符分为三类
边界符：表示字符在字符串中所处的位置，一般用于判断字符串的开头和结尾，主要有：
^ 用于匹配行首的文本，
$ 用于匹配行尾的文本
^字符$ 用于精准匹配字符，必须以该字符开头，以该字符结尾，例如^a$，测试文本是'a'为ture，是'aa'则为false
量词：表示某种字符或某个字符的重复次数，主要有：
* 表示重复0次或多次
+ 表示重复一次或多次
？表示重复一次或0次
{n} 重复n次
{n,} 至少重复n次
{n,m} 重复n到m次
字符：表示匹配某种字符，比如：
[a-z] 表示a-z26个小写字母
[a-zA-Z]表示26个大小写字母
[0-9]：表示0-9的数
//在线验证表单案例：输入用户名和密码
//用户名长度为6-12位大小写字母、数字和下划线组合，不允许有特殊符号
//密码长度为6-20位大小写字母、数字、下划线和特殊符号，且密码第一位必须为大写字母或特殊符号
//判断后给出提示，如果格式正确则显示绿色并允许提交，否则显示红色
const userName = document.querySelector('.username input')//获取元素
const userPassword = document.querySelector('.user-password input')
const userNamebox = document.querySelector('.username')
const userPassbox = document.querySelector('.user-password')
const userNamefomu = /^[a-zA-Z0-9_]{6,12}$/ //正则表达式用于匹配用户名的字符
const userPassfomu = /^[A-Z_@#$%^&*!][a-zA-Z_@#$%^&*!]{5,19}$/ //用于匹配用户密码的字符
console.log(userName,userPassword)
userName.addEventListener('blur',function(){
const userNameinfo = userName.value//获取表单信息
userName.classList.remove('ture')//移除表单元素
userName.classList.remove('false')
if(userNamefomu.test(userNameinfo)){//判断
userName.classList.add('ture')//若为真，则表单变绿
}
else{
userName.classList.add('false')
const extips =userNamebox.querySelector('p')//移除之前的提示信息
if(extips){
userPassbox.removeChild(e)
}
const tips = document.createElement('p')//新建一个提示标签
tips.innerText='用户名长度为6-12位大小写字母、数字和下划线组合，不允许有特殊符号'
userNamebox.appendChild(tips)
}
})//监听用户名表单失去焦点时触发事件
userPassword.addEventListener('blur',function(){
const userPassinfo = userPassword.value
userPassword.classList.remove('ture')
userPassword.classList.remove('false')
userPassword.classList.add('false')
if(userPassfomu.test(userPassinfo)){
userPassword.classList.add('ture')
}
else{
const extips =userPassbox.querySelector('p')//移除之前的提示信息
if(extips){
userPassbox.removeChild(e)
}
const tips = document.createElement('p')//新建一个提示标签
tips.innerText='密码长度为6-20位大小写字母、数字、下划线和特殊符号，且密码第一位必须为大写字母或特殊符号'
userPassbox.appendChild(tips)
}
})//监听用户密码表单失去焦点触发事件
元字符中预定义类
指常见模式的间歇方式
\d 匹配0-9之间的数字
\D 匹配除0-9之外的数字
\w 匹配任意的字母、数字、下划线
\W 匹配除字母、数字、下划线以外所有字符
\s 匹配空格
\S 匹配除空格以外所有字符
修饰符
修饰符是执行正则表达式约束的细节行为，例如是否大小写，是否多行匹配
语法为：/表达式/修饰符
例如：
i ：忽略大小写
g: 匹配所有满足正则表达式的结果
替换方法
字符串.repalce(/正则表达式/修饰符，‘替换的字符’)