成年人的浪漫就是情谊和体面
学习路线:基础 -- 应用 -- 进阶【javaScript基础-5天 => webApi - 7天 => javaScript进阶-4天】
使用vsCode作为工具，代码编写错误提示插件：Error lens
声明变量const优先
声明对象，并且对对象里面的属性进行增删改操作也可以使用const,因为他是引用数据类型,栈内存中保存的地址未发生改变
WebAPIs
WebAPI的基本认知【WebAPI的作用和分类/什么是DOM/什么是DOM树】
WebAPI的作用和分类
作用：通过js来操作html页面和浏览器
分类：DOM【文档对象模型】、BOM【浏览器对象模型】
什么是DOM
DOM是JS操作网页的接口,全称为文档对象模型。将网页转化为一个JS对象，从而用脚本进行各种操作
浏览器通过DOM规范，对结构化文档(例如html和xml文档)解构成一系列节点，再由这些节点组合成一个树状结构--DOM Tree,所有的节点和最终的DOM树都有规范的对外接口
DOM是浏览器厂商提供的JS操作html的api,不同的厂商提供的api可能不同，所以DOM存在兼容性问题(少部分)
DOM树
DOM树直观的展示了标签与标签之间的关系
获取DOM元素
//获取匹配的第一个div元素 、获取第一个li元素(ul>li)，返回的数据类型是object对象
document.querySelector('.div')
document.querySelector('ul li:first-child') //CSS选择器
//获取多个元素,返回数据类型是list对象集合
document.querySelectorAll('ul li')
获取对象的值/重新赋值
innerText() //const d = document.querySeleceor('div') const dt = d.innerText() || d.innerText = ""
innerHTML() //const d = document.querySelector('#p') const dt = d.innerHTML() || d.innerHTML=""
通过style操作元素样式
属性.style.backgroundColor='' //修改背景颜色,实例如下
const div = document.querySelector('div')
div.style.width = '300px'
div.style.backgroundColor=''
div.style.border='2px solid red'通过操作类名(className)来操作元素样式
像上面那样一个一个改，写的代码太长了，每次都要属性.style. ,要修改成的样式写在<style>里要好很多，还有提示，
所以通过操作类名(className)来操作元素样式
<style>
div{
width:200px;
height:200px;
background-color:red;
border:2px solid blue;
}
.box{
width:300px;
height:300px;
background-color:green;
border:2px solid red;
}
</style>
<body>
<div></div>
<script>
const div = document.querySelector('div')
div.classname = 'box'
//还可以多个
//div.className = 'box1 box2'
</script>
</body>通过classList来操作对象样式
className的方法会覆盖原来的样式，classList能够解决这个问题
新增：对象.classList.add('')
移除：对象.classList.remove('')
切换： 对象.classList.toggle('') //判断有没有，有就删除，没有就添加
操作表单对象
操作text:
<input type="text" value="你好我是文本">
获取文本框中的值/重新赋值文本框中的值都使用value属性；ipt.value="" / console.log(ipt.value)
操作checkBox:
<input type="checkBox" id="" name="" checked>
console.log( ipt.checked ) / ipt.checked=true
操作disabled
<button disabled="disabled">注册</button> //一般值一样的就省略<button disabled>注册</button>
btn.disabled = true //禁用，false是不禁用，默认false
自定义属性
自定义属性名一律以data-开头，html5推出，例如<div class="box" data-id="10"><div>
获取dom属性一律使用dataSet获取,例如
<script>
const dt = document.querySelector('.box')
console.log( dt.dataSet.id )
</script>
定时器-间隔函数setInterval(函数名,间隔时间)，可以做倒计时效果；setInterval返回一个整数
<script>
setInterval(function(){console.log('一秒钟一次')},1000)
</script>
或者
<script>
function fn(){
console.log('一秒钟一次')
}
let num = setInterval(fn,1000) //fn后面不许加(),setInterval返回一个数字
//关闭定时器
clearInterval(num)
</script>事件监听
什么叫事件监听：检测是否有事件发生，如果有则调用对应的函数进行相应
事件监听3要素：元素、事件、事件处理程序；可以翻译成谁被触发，触发的方式是什么，触发以后发生什么事情
对象.addEventListener('事件类型',要执行的函数)
const dtn = document.querySelector('bttton')
dtn.addEventListener('click',function(){}) //鼠标点击
dtn.addEventListener('mouseenter',function(){}) //鼠标进入、经过
dtn.addEventListener('mouseleave',function(){}) //鼠标离开
dtn.addEventListener('focus',function(){}) //锁定焦点
dtn.addEventListener('blur',function(){}) //失去焦点
dtn.addEventListener('keydown',function(){}) //键盘摁下
dtn.addEventListener('keyup',function(){}) //键盘抬起
dtn.addEventListener('input',function(){}) //表单输入触发获取事件对象
部分常见属性
获取事件类型：type
获取点击时鼠标位置：clientX/clientY
获取点击时鼠标位于盒子的什么位置：offsetX/offsetY
获取键盘的值：key/keycode(现在不推荐使用keycode了,已经废除了)
事件流、事件捕获，事件冒泡、阻止冒泡
什么叫事件流：事件完整执行过程中的流动路径
事件流的两个阶段：捕获阶段(父到子)、冒泡阶段(子到父)
事件捕获需要写对应代码才能看到：
对象.addEventListener('事件类型',事件处理函数,是否使用捕获机制true/false)
注意：若是用L0事件监听，则没有捕获事件，只有冒泡阶段
冒泡
同类事件，例如子类的click事件，相应的父级的click事件，不会涉及其他类型事件，例如经过事件等等
阻止冒泡事件/捕获事件
事件对象.stopPropagation() //既能组织冒泡又能组织捕获，也就是组织流动传播
实例：son.addEventLiatener('click',function fn(e){alert("我是儿子") e.stopPropagation()})
扩展
mouseenter和mouseleave， mouseover和mouseout
mouseover和mouseout会有冒泡效果，mouseenter和mouseleave不会有冒泡效果，所以推荐使用
冒泡有一个非常好的用途，我们可以用它来做事件委托
事件移除removeEventListener
两种解除事件情况：
<script>dtn.onclick = function(){} dtn.οnclick=null </script> //事件移除1
<script>dtn.addEventListener('click',function fn(){}) dtn.removeEventListener('click',fn)</script> //事件移除2
事件委托
事件委托利用了事件冒泡的特点，委托给父级，事件写在父级身上
使用e.target.tagName来选定对象
if(e.target.tagName === 'P' ) {e.target.style.color='red'}
console.log(e) console.dir(e.target)
事件委托好处
减少注册次数，提高程序性能
阻止事件默认行为preventDefault
e.preventDefault()
页面加载事件，页面滚动事件、页面尺寸事件
页面加载事件load
window.addEventListener('load',function(){}) //加载外部事件全部完成后再执行函数
img.addEventListener('load',function(){}) //加载照片完成后再执行函数
页面滚动事件scroll,scrollTop, scroll
window.addEventListener('scroll',function(){})
div.addEventListener('scroll',function(){})
console.log(document.documentElement.scrollTop) //结合window,整个页面被卷去了多少
页面尺寸大小事件
页面尺寸大小事件window.addEventListener('resize',function(){})
检测屏幕的尺寸
获取元素的宽高：
clientWidth /clientHeight 不包含边框、margin,padding、滚动条的宽度
offsetLeft / offsetTop 包含margin、padding、border的宽度,但是受最近一级带有定位的祖先元素的影响
距离父亲的距离+父亲距离大边框的位置。如果没有父级，则以文档的左上角为准
但是如果父亲css样式标注position:relative，p.offsetLeft=到父级的距离，没有父级到上级边框的距离
一些样式是怎么构思的
导航栏一直置顶的方法：
实际就是导航栏这个div的位置进行改变，起初应该是最顶层，也就是top:0; 当页面滑动到一定位置时，例如某个div2元素的位置，那么就把div的top改为div2距离文档最左上角的垂直距离
侧面电梯效果渐入渐出效果的实现：
实际就是判断整个html标签的上卷距离window.addEventListener('scroll',function(){const top = document.documentElement.scrollTop})，达到某一距离区间的时候if(top>=div1.offsetTop){}，就显示display:block transation:all .3s 从display:none渐变为display:block
日期对象的使用date
获取当前时间<script>const date1 = new date()</script>
指定时间<script>const date1 = new date('2022-5-11 08:30:00')</script>
date1.getFullYear() //获取年份
date1.getMonth() //获取月份，0·11
date1.getDate() //获取月份的每一天
date1.getDay() //获取星期0·6
date1.getHours() //获取小时0-23
date1.getMinutes() //获取分钟0-59
date1.getSecond() //获取秒0-59
时间戳
就是从1970年1月1日 00：00：00起至现在的毫秒数，是一种特殊的计量时间的方式
适用场景：如果要实现倒计时的效果，上面日期对象的方法不能实现，需要借助时间戳完成
语法
+new Date() || const date = new Date() date.getTime() || Date.now() ==> 示例结果：1648778122490
+new Date('2022-2-5 18:30:00') || const date = new Date() date.getTime()
DOM节点
什么叫节点：标签节点、元素节点、文本节点
查找DOM节点
获取父节点：子元素.parentNode //parentNode只能获取最近一级的父节点，如果没有父节点则返回null
获取子节点:
childNodes属性 ;获取所有的子节点，包括空格、换行、注释节点等
children属性: 父节点.children;仅获取所有元素节点，选择的是亲孩子，但是孙子辈的信息也会在儿子详细信息里有，用children比较多,返回的是一个伪数组
获取兄弟节点
nextElementSibling属性;获取下一个兄弟节点
previousElementSibling属性;获取上一个兄弟节点
增加DOM节点
创建节点：const d = document.createElement('div')
追加节点：
appendChild追加到最后一个元素后面：document.body.appendChild(d) || ul.appendChild(d)
insertBefore指定在哪个元素之前：insertBefore(要插入的元素，在哪个元素之前)
ul.insertBefore(b,ul.children[0]) //放在ul的第一个元素之前
克隆节点
深克隆
元素.cloneNode(true) //标签里有什么克隆什么
浅克隆
元素.cloneNode() //只克隆一个标签
删除DOM节点removeChild()
父元素.removeChild()
M端事件
就是model移动端，触屏事件touch
touchstart/touchend/touchmove
在移动端做一个轮播图之类的会非常麻烦，所以一般使用js插件，例如swiper
BOM === window
window{documenet、location、navigator、history、screen}
document/conlose.log()/alert()都属于window的属性
延时函数
例如弹窗，然后几秒钟后自动关闭，只执行一次，和间歇函数不一样
setTimeout(函数方法,毫秒)
关闭延迟函数
js执行机制
浏览器有两个引擎：渲染引擎和js引擎。例如谷歌是V8引擎，v8就是来解析js的
js是单线程，比如对某个dom元素不能同时进行添加和删除，必须先添加再删除。所以为了解决这个问题，利用多核cpu的计算能力，html5提出web worker标准，允许js脚本创建多线程，于是js中出现了同步和异步
同步：在主线程上执行，形成一个执行栈
异步：js的异步是通过回调函数实现的，需要耗时的任务就从执行栈转移到任务队列(也叫消息队列)中去。一般而言，异步任务有以下3种类型:
普通事件：click、resize
加载资源：load、error
定时器：setInterval 、setTimeout
一旦执行栈里面的所有同步任务执行完成后，系统就会按次序读取任务队列中的异步任务，于是异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断地获取任务、执行任务，再获取任务，在执行，所以这种机制被称为事件循环
js主线程 ---- web API(异步API)(这部分是浏览器) ---- 消息队列/任务队列 ---- js主线程
location对象
常用的属性和方法：
属性href：
一般用来做页面的跳转：location.href=''
结合setInterval或者 setTimeout(function(){},1000)
属性search
用来获取网址携带的参数，也就是？后面部分：console.log(location.search)
例如<input type="text" name="name">，通过search获取用户输入的用户名
属性hash
获取地址中的哈希值，也就是网址#后面的部分：console.log(localhost.hash)
例如
<a href="#/my">我的</a>
<a href="#/friend">关注</a>
<a href="#/download">下载</a>
启动程序，点击我的，网址显示为https://www.~.html#/my,
点击关注，网址显示为https://www.~.html#/friend
点击下载，网址显示为https://www.~.html#/download
页面跳转，但是不是重新打开一个页面，
方法reload()
location.reload() //刷新页面 === f5
location.reload(true) //强制刷新 === ctrl+f5
<button>刷新</button>
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
location.reload()
})
navigator
网页--开发者模式--console --navigator--会得到一系列的浏览器信息和登录电脑版本信息
主要使用的属性就是userAgent
//检测userAgent(浏览器信息)
!(function(){
const userAgent = navigator.userAgent
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iphone\sOS)\s([\d_]+)/)
})
history对象属性
back()：history.back()
forword()：history.forword()
go(参数)：history.go() //参数写-1或者1
本地存储介绍
数据存储在用户的本地浏览器中
设置、读取方便，甚至刷新页面也不会丢失数据
容量较大，sessionStorage和localStorage约5M左右
localStorage
数据存储在本地(也就是用户的电脑)，永久存在，除非手动删除，即使页面关闭也不会删除
多个页面可以共享(前提是同一浏览器)
以键值对的形式存储使用
存储数据：localStorage.setItem('key','value')
之后在浏览器--开发者模式--Application处查看
获取：localStorage.getItem('key')
删除：localStorage.removeItem('key')
sessionStroage
是生命周期，浏览器关闭就没有了
其他和localStroage用法没有区别
本地存储复杂数据类型,但是本地存储只能存储字符串
直接将一个对象放进本地存储是不可取的，会判读为object，获取不到具体数据
所以要把复杂数据类型转换为json字符串，再储存到本地
语法：localStroage.setItem('key',json.stringify(对象)) const obj={uname:"里斯",age:18}
什么叫json: 不管是键还是值，都带着双引号；例如{"name":"里斯","age":18}
取回来的时候再把json字符串转化为对象
运用json.parse：例如json.parse(localStroage.getItem('obj'))
//style 相关标签的属性
body{
background:#00ff00 url('smiley.gif') no-repeat fixed center;
}
等同于：
body{
background-color:#00ff00;/yellow;/rgb(255,0,255);
background-Image:url('');
//设置如何平铺对象的background-image属性，默认情况下重复background-image的水平和垂直方向
background-repeat:no-repeat;/repeat-y;/repeat-x;
//背景图片不会随着页面的滚动而滚动
background-attachment:fixed;
//设置背景图片的起始位置
background-position:center;
}
.box{
cursor:pointer; // 手形鼠标
display:none; //不显示
display:block; //块状元素，前后都带有换行符
}
textarea{ //文本域
opecity:0;/1;0.5; //设置透明度
transition:all .3s; //过渡动画
}
span{
width:80px; //span中设置宽度发现不起效果，那就需要设置行内块元素，这样就可以指定了
display:block-inlink;
}
1783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
