webAPI 的简介与基础应用
1. webAPI作用和分类
- 作用：使用 JS 去操作 html 和浏览器
- 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
- DOM是浏览器提供的一套专门用来 操作网页内容 的功能，用于开发网页内容特效和实现用户交互
- DOM树将 HTML 文档以树状结构直观的表现出来，直观的体现了标签与标签之间的关系
2. DOM对象
- 概念：
- 浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
- document 对象
- 是 DOM 里提供的一个对象
- 它提供的属性和方法都是用来访问和操作网页内容的 例：document.write()
- 网页所有内容都在document里面
- 获取dom对象（重要）
- document.querySelector('CSS选择器')（选中符合CSS选择器的第一个标签）
- document.querySelectorAll('CSS选择器')（选中符合CSS选择器的所有标签）
<body>
<div>div元素123</div>
<div>div元素456</div>
<script>
// 我想要获取一下 div标签的 dom对象
//document.querySelector('CSS选择器')获取的是符合条件的第一个标签
let divDom = document.querySelector('div');
//console.dir打印的值为浏览器定义好的div标签的所有对象属性
console.dir(divDom);
//console.log打印 的值为 <div>div元素123</div>
console.log(divDom);
//获取页面内所有的div元素
let divAll=**document.querySelectorAll('div')
//返回的值为标签数组
/*
小结
1 想要获取页面的标签 可以通过 document.querySelector(选择器)
2 querySelector 只能够获取第一个满足条件的标签
3 如果选择器找不到元素 querySelector 只会返回 null
4 如果我们想要输出和打印 dom元素
不要再使用 console.log
改为 使用 console.dir
*/
</script>
</body>
3. 设置文本内容
-
document.write 只能在body标签中写内容 以后很少用！！
-
dom.innerText="你好" 设置标签的文本内容
-
dom.innerHTML 设置标签的文本内容 ，还能解析标签 dom.innerHTML=
<a>链接</a>
<script>
//innerText无法解析标签，页面只会出现一段文本
document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button> ';
//innerHTML可以解析标签，页面的会出现一个按钮
document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> ';
</script>
4. 设置元素样式
4.1 元素常用属性
（如：**a标签的'href'/'title'/'alt'**等 ,**img标签的'src'**属性）
表达式：dom.属性名，元素与属性之间不用插入 ‘ style. ’
<body>
<a href="http://www.baidu.com">跳转到</a>
<script>
/*
a 标签身上的 href 图片 src alt id type class 属性
1 获取标签对应的dom元素
2 dom.属性名=属性值
*/
let aDom = document.querySelector('a');
//修改a标签的属性
aDom.href='https://md.zbztb.cn/';
</script>
</body>
4.2 元素样式属性
- dom.style.属性名 . 例： dom.style.color="red"
<body>
<div>普通的元素</div>
<script>
// 1 获取dom元素
let div = document.querySelector('div');
// 会出现 单词写错或者 值写错 写漏
// 那段代码没有效果 就去看那段代码
div.style.fontSize="100px";
div.style.color="yellow";
div.style.backgroundColor="pink";
div.style.height="300px";
div.style.width="400px";
</script>
</body>
- dom.className 会覆盖掉元素原本的所有的类 例： dom.className="nav"
<body>
<div ></div>
<script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去 定义好对应类的样式即可
div.className = 'box redCls';
</script>
</body>
- **dom.classList **类的列表
- 添加 dom.classList.add("类名") ，
- 移除 dom.classList.remove("类名")
- 切换 dom.classList.toggle("类名")
<body>
<div class="d1 d4">123</div>
<script>
// 获取dom
let div = document.querySelector('div');
// classList 添加一个类
div.classList.add("d2","d3");
// div.classList.add("d2");
// div.classList.add('d3');
// 单独来指定移除一个class
div.classList.remove("d2","d3")
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
div.classList.toggle("d4")
</script>
</body>
4.3 设置表单属性
- innerText innerHTML 主要是用来设置 双标签的文本内容的
- input标签为单标签，故不适合用上述两种方式设置内容
- 应该用 dom.value；来设置和获取内容
- dom.value.length表示input内容的长度
- dom.checked = true; 设置单选/复选框的选中状态 （撤销选中为dom.checked = false)
- dom.disabled = true; 禁用按钮 解除禁用（dom.disabled = false)
- dom.selected=true; 用于下拉列表option的选中状态
- 设置 textarea 标签的文本内容的方法
- textarea.value 设置文本
- textarea.innerText 设置文本
- textarea.innerHTML 可解析标签
- 获取 textarea 标签的文本内容的方法
- textarea.value 将标签当成文本获取
- textarea.innerHTML 会将标签尖括号转成字符获取 如 <；h1 > ； 你好
5. 定时器（间歇函数与延时函数）
5.1 间歇函数的介绍与应用举例
- 概念：定义间隔多久执行一次函数，例如倒计时等，不用开发者创建，只需开启和关闭即可
- 使用方法: 可将函数单独封装，也可直接写在定时器-间歇函数里面
- 表达式：setInterval ( 执行的函数,1000 ) ; // 间隔多久执行一次 1000=1000毫秒=1秒
- 清除定时器-间歇函数：clearInterval(timeid)，timeid为自定义的定时器名称
- 直接调用执行函数：setInterval(repeat, 1000); 调用 repeat ，不要带函数的小括号，会出错
<script>
let num=0
let timeid=setInterval(function(){
console.log("头发没有啦");
num++
if(num>10){
//clearInterval(timeid)表示清除定时器，一般与条件语句搭配使用
clearInterval(timeid)
}
},1000);
</script>
5.2 延时函数的介绍与应用举例
-
概念：JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
-
使用方法: 可将要执行函数单独封装，也可直接写在定时器-延时函数里面
-
表达式：setTimeout(执行的函数,1000 ) ; // 延迟多久执行 1000=1000毫秒=1秒
-
**清除定时器-延时函数：clearTimeout(timeid) **，timeid为自定义的定时器名称
-
直接调用执行函数：setTimeout(repeat, 1000); 调用 repeat ，不要带函数的小括号，会出错
<body> <script> // 延时器 - 只会执行一次而已 let timeid = setTimeout(function () { console.log('猜猜我是谁'); }, 5000); // 取消延时器 clearTimeout(timeid); </script> </body>
6. 事件
6.1 事件介绍及绑定事件
事件绑定表达式：bom.addEventListener("事件类型","处理函数")
- 一个元素可以绑定多个同名事件
- bom.addEventListener("事件类型1","处理函数1")
- bom.addEventListener("事件类型1","处理函数2")
事件三要素
- 事件源 - 给哪个dom元素绑定事件
- 事件类型
- click 鼠标单击
- mouseenter 鼠标移入
- mouseover 鼠标悬停
- mouseleave 鼠标移出
- mousemove 鼠标移动
- keydown 按下键盘
- keyup 松开键盘
- mousemove 鼠标移动
- focus 获得焦点
- input input标签的正在输入事件
- blur 失焦事件
- contextmenu 鼠标右击
- scroll 页面滚动事件
- load 标签及外部资源加载完毕事件 （给 window添加事件）
- 等待标签加载完毕 包括所有的外网资源 图像视频 才触发
- **DOMContentLoaded ** 标签解析完毕事件 （给document添加事件）
- 不会等待标签对应内容（图像、视频资源）加载完毕才触发
- resize 屏幕大小改变事件（给 window添加事件）
- 事件处理函数 要具体做的业务
注册新事件（举例）
<body>
<button class="btn1">抽奖</button>
<button class="btn2">退出抽奖</button>
<div></div>
<script>
let btn1 = document.querySelector('.btn1');
// 注册事件
// btn1.addEventListener("事件类型","处理函数")
// click 鼠标单击
btn1.addEventListener('click', function () {
console.log('开始抽奖啦');
});
let btn2 = document.querySelector('.btn2');
btn2.addEventListener('click', function () {
console.log('退出抽奖啦');
});
let div = document.querySelector('div');
// mouseover 鼠标移入到 div 的区域内
div.addEventListener('mouseover', function () {
console.log('小哥快点进来');
});
</script>
</body>
6.2 取消事件绑定
- 前提：bom元素绑定事件时使用的是具名函数
- 若绑定事件时使用的是匿名函数则无法取消
- 取消绑定表达式： dom.removeEventListener(事件类型，要取消的函数名)
<body>
<button>点击我 输出时间</button>
<script>
const btn = document.querySelector('button');
// 普通函数
function func() {
console.log('2022-04-15 14:32:26');
}
function func2() {
console.log("func2");
}
// addEventListener 可以绑定多个同名事件
btn.addEventListener('click', func);
btn.addEventListener('click', func2);
//使用延时器（非必要，为了体现效果）取消绑定事件
setTimeout(function () {
// 取消这个事件绑定 removeEventListener
btn.removeEventListener('click', func);//只取消了执行函数为func的事件绑定
}, 5000);
</script>
6.3 事件举例：页面滚动
- 整个页面滚动 给window来绑定 scroll 事件
- 可用 document.documentElement.scrollTop 获取页面在纵轴方向的滚动距离
- 可用 document.documentElement.scrollLeft 获取页面在横轴方向的滚动距离
- 应用
- 页面滚动一定距离后固定导航条
- 页面滚动一定距离后唤起返回顶部按钮
<script>
// 页面级别的滚动,当内容高度超过视口高度才有滚动事件
window.addEventListener("scroll",function () {
// 这个代码可以获取到当前页面的滚动距离
console.log(document.documentElement.scrollTop);
})
</script>
6.4 事件举例：加载事件
- load 资源全部加载事件
- 给 window 绑定load事件，标签及其他资源都加载完毕才会触发
- 应用场景：
- 有很多业务和功能 都需要使用到外部资源（外部css js 图片 视频）
- 我们希望等待资源都加载完毕，才去做其他事情
- 代码技巧：把所有的代码 都写在 window load事件中来确保 资源全部都可以使用
- DOMContentLoaded 页面标签加载事件
- 给document 绑定DOMContentLoaded 事件， 页面的标签 都加载完毕就触发了，不需要等待标签的内容回来
- load 与 DOMContentLoaded 区别
- load 触发条件： 页面的标签与对应的外部资源都加载完毕才触发
- DOMContentLoaded 触发条件：页面的标签 都加载完毕就触发了
- DOMContentLoaded事件 会比 load事件更先一步触发
<body>
<video
controls
src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/36/82/569828236/569828236-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1649906485&gen=playurlv2&os=cosbv&oi=2028708454&trid=926e1b0362e4450296eda32f1f091968h&platform=html5&upsig=de4859a796154f0ae2152c7a97789a6d&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=414874315&bvc=vod&nettype=0&bw=52793&logo=80000000"
></video>
<script>
window.addEventListener('load', function () {
console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});
// DOMContentLoaded事件的函数会更先一步触发
document.addEventListener("DOMContentLoaded",function () {
console.log("DOMContentLoaded 标签加载完毕就触发了");
})
/* 控制台输出内容顺序
1. DOMContentLoaded 标签加载完毕就触发了
2. load 标签加载完毕-标签对应外部资源加载完毕 */
</script>
</body>
6.5 事件举例：屏幕大小改变事件
- 屏幕大小改变事件 resize 给window绑定事件
- 应用场景：
- 响应式 实时显示当前的页面宽度和种类
- 屏幕适配：10 rem = 视口宽度
<body>
<div>div</div>
<script>
// 页面大小发生变化了就会触发的事件 resize window来绑定
window.addEventListener('resize', function (event) {
console.log('页面大小发生变化了');
// 移动端屏幕适配 rem 淘宝js库，flexible.js 作用 设置html的字体大小 为当前 页面的宽度的十分之一
// 获取当前页面的宽度
console.log(document.body.offsetWidth);
// 设置页面html标签的字体大小为屏幕的十分之一
document.documentElement.style.fontSize =
document.body.offsetWidth / 10 + 'px';
// 响应式布局 方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
const width = document.body.offsetWidth;
if (width > 1200) {
document.querySelector('title').innerText = `大屏幕 ${width}`;
} else if (width > 992) {
document.querySelector('title').innerText = `中等屏幕 ${width}`;
} else if (width > 768) {
document.querySelector('title').innerText = `小屏幕 ${width}`;
} else {
document.querySelector('title').innerText = `极小屏幕 ${width}`;
}
});
</script>
</body>
7. 节点操作
7.1 概念与类型
- 节点概念：在dom树中的每个节点，包括标签，注释文本等
- 节点类型
- 元素节点 标签
- 属性节点 标签的属性 如src / href 等
- 文本节点 标签的文本内容
- 注释节点 dom树中的注释内容
7.2查询获取节点
-
查询dom元素的父元素：dom.parentNode
<body> <div> <button>目标元素</button> </div> <script> // 先获取button 目标元素 let button = document.querySelector('button'); //button.parentNode 表示button元素的父元素 button.parentNode.style.backgroundColor = 'red'; </script> </body> -
查询dom元素的子节点
- dom.children 只查询子节点中的标签，返回的是数组，可用for循环遍历每个子元素
- dom.childNode 查询所有的子节点，包括文本 / 注释等 （了解即可）
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> let ul= document.querySelector('ul'); //ul.children获取到的是数组，要用数组下标来访问每一个子节点 li标签 //修改第一个（下标索引为[0]）标签的字体颜色为 'orange'橙色 ul.children[0].style.color='orange' </script> </body> -
查询dom元素的兄弟（并列关系）节点
- 上一个兄弟节点：dom.previousElementSibling
- 下一个兄弟节点：dom.nextElementSibling
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <script> /* 1 获取所有的li标签 数组 2 遍历 绑定点击事件 3 事件触发了 this.next this.previou 获取到对应的元素 设置他们的样式 */ // 1 获取所有的li标签 数组 let lis = document.querySelectorAll('li'); // 2 遍历 绑定点击事件 for (let index = 0; index < lis.length; index++) { // 3 事件触发了 lis[index].addEventListener('click', function () { // 上一个兄弟 设置 蓝色 this.previousElementSibling.style.backgroundColor = 'blue'; // 下一个兄弟 设置 绿色 this.nextElementSibling.style.backgroundColor = 'green'; }); } </script> </body>
7.3 创建元素节点
-
创建一个新标签：document.createElement ( ‘ 标签名称 ’ )
<script> //document.createElement('li')创建一个li标签 let li = document.createElement('li'); </script>
7.4 插入节点
- 父元素.appendChild(创建好的新标签) ，appendChild只能插入一个标签，插入的位置为父元素的底部
<body>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1 创建一个 li标签 节点
let li = document.createElement('li');
//设置新标签的文本内容及背景颜色
li.innerText="这个是新创建的li标签";
li.style.backgroundColor="green";
// 2 把li标签插入到 ul标签中
let ul = document.querySelector('ul'); //获取ul元素
ul.appendChild(li); // 把li标签插入到ul中 父元素的底部 插入子元素
</script>
</body>
-
父元素.append(标签1，标签2....) ，append可插入多个标签，若插入前父元素已有子元素，则插入的多个新元素按顺序排在底部
<body> <ul> <li>1</li> <li>2</li> </ul> <script> // 1 创建多个 li标签 节点 let li1 = document.createElement('li'); let li2 = document.createElement('li'); //设置新标签的文本内容 li1.innerText="这个是第一个li标签"; li2.innerText="这个是第二个li标签"; // 2 把多个li标签插入到 ul标签中 let ul = document.querySelector('ul'); //获取ul元素 ul.append(li1,li2); // 把多个li标签插入到ul中 父元素的底部 插入子元素 </script> </body> -
父元素.insertBefore(要插入的元素,哪个元素的上面) ，若要插入的元素是已存在的，insertBefore作用相当于移动
<body> <ul> <li>1</li> <li class="isMe">2</li> </ul> <script> // 1 创建一个 li标签 节点 let li = document.createElement('li'); //设置新标签的文本内容 li.innerText="这个是新创建的li标签"; // 2 把li标签插入到 ul标签中的第二个li标签的前面 let ul = document.querySelector('ul'); //获取ul元素 let isMe=document.querySelector('.isMe') ul.insertBefore(li,isMe); // 把新的li标签插入到ul中的第二个li标签的前面 </script> </body>
7.5 创建文本节点
- 表达式： document.createTextNode 不插入到元素中就不会显示在页面
<script>
// 创建文本节点document.createTextNode()
let text = document.createTextNode('试试就试试不行就百度');
//将文本节点输出到页面
document.body.appendChild(text);
</script>
7.6 克隆节点
- 浅克隆 ：dom.cloneNode( ) 传递false或不传递值，只克隆dom元素，不克隆它的子节点
- 深克隆： dom.cloneNode(true) 传递true，会连同dom元素的子节点一起克隆
<body>
<div class="box">
<button>点击</button>
</div>
<script>
// 1 获取要克隆的节点 box
let box = document.querySelector('.box');
// 2 开始克隆
let newBox1 = box.cloneNode(); // 浅克隆 不会把 div的后代节点一起克隆
newBox1.innerText='我是浅克隆的盒子'
let newBox2 = box.cloneNode(true); // true 深克隆 会把 div的后代节点一起克隆
// 3 插入到body标签中
document.body.appendChild(newBox1);
document.body.appendChild(newBox2);
</script>
</body>
7.7删除节点
- 删除dom元素的子元素： dom.removeChild(要删除的子元素)
- 删除dom元素本身： dom.remove ()
<body>
<button>删除ul中某一个li标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button = document.querySelector('button');
let ul = document.querySelector('ul');
// 要删除的子元素
let li = document.querySelector('li:nth-child(1)'); // 1
button.addEventListener('click', function () {
// 删除指定的子元素
ul.removeChild(li);
// 删除自己
ul.remove();
});
</script>
</body>
8. 时间对象
概念，指浏览器内部的关于时间的对象，可用于获取当下的时间值
使用方法：
-
实例化一个时间对象 （ 理解为抓住 运行时的当下时间值 / 设置的时间点的时间值， ）
- let date=new Date()
-
时间对象的一些方法（date为上述 1. 中自定义的实例化的时间对象的名称）
- 获取年： date . getFullYear( )
- 获取月： date . getMonth( ) 注：返回的值为 0--11，故使用该方法时应自行 +1
- 获取几号： date . getDate( )
- 获取周几： date . getDay( ) 注：返回的值为0--6， 0代表周日 1代表周一
- 获取小时： date . getHours( )
- 获取分钟： date . getMinutes( )
- 获取秒： date . getSeconds( )
-
时间戳
概念： 返回的是当前时间 距 1970年1月1日0时0分0秒的时间差的毫秒数
获得时间戳的几个方法：
- Date.now( )
- date.getTime( ) 需先实例化时间对象
- +new Date( )
9. 事件对象及应用
9.1 事件对象简介
概念：指事件触发的一瞬间，所包含的各种信息， 对象名称为事件函数的第一个形参名 一般设置为 event / e / ev 等
<body>
<button>点击点击</button>
<script>
// 获取按钮
const btn = document.querySelector('button');
btn.addEventListener('click', function (event) {
console.log(event); // 存放事件触发一瞬间的信息
});
</script>
</body>
9.2 事件对象的常用属性及方法
-
鼠标的坐标信息；
- event . clientX / event . clientY 参照物为 视口 的左上角
- event . offsetX / event . offsetY 参照物为当前元素本身的左上角
-
键盘按下信息 event . key ；
- 用于绑定某个按键的功能
- 一般在 keydown / keyup 事件中使用
- event . key=='Enter'，，用 if 条件语句判断按键的值，并触发事件函数
-
阻止标签的默认行为 event.preventDefault ( ) ；
-
例：a 标签的点击默认跳转
-
例： 鼠标右键弹出菜单栏 （contextmenu：鼠标右击事件）
-
例： form -- button 的点击刷新（后三点为其他方法参考）
-
用form / button 绑定阻止默认行为（event.preventDefault ( ) ）均可
-
给button按钮 添加一个 type="button" 属性
-
换成 input标签 type="button"
-
把button 移出form表单的区域
-
-
9.3 事件流
概念
-
事件流指的是事件完整执行过程中的流动路径；
-
说明：假设页面里有个div，当触发事件时，会经历三个阶段，分别是捕获阶段、目标阶段、冒泡阶段；
-
简单来说：捕获阶段是 从父到子，目标阶段是在子元素时， 冒泡阶段是从子到父；
冒泡对事件触发的影响
若子元素和父元素都绑定了点击事件，点击子元素，则：
- 事件触发时先触发子元素的事件函数，然后相继会触发父元素的事件函数；
- js默认的事件触发是冒泡；
- 工作中常用的是冒泡；
- 停止冒泡（指点击子元素只触发子元素的点击事件，不往后触发父元素的点击事件）；
- event.stopPropagation()
- 冒泡与捕获的转换： addEventlistener('click' , 事件处理函数 ， true ) 只要在注册事件中传递一个true的参数，则事件触发是捕获阶段的流向；
9.4事件委托
1.基本介绍
- 概念：事件委托是利用事件流的特征解决一些开发需求的知识技巧。
- 优点：给父级元素加事件（可以提高性能）。
- 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发。
- 实现：事件对象.target 可以获得真正触发事件的元素。
- 事件对象.target 返回点击的最里层的元素 。
2. 利用 event.target.nodeName / event.target.className优化使用事件委托
- event.target.nodeName 获取的值为被点击的标签名（大写字母）如：‘ LI ’
- event.target.className 获取的值为被点击的标签的所有类名
- 一般与条件语句一起使用，以缩小触发事件函数的元素范围
<body>
<ul>
<li><a href="#">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
// 只有点击了li标签才触发 event.target.nodeName
if (event.target.nodeName === 'LI') {
console.log('改变颜色');
event.target.style.backgroundColor = 'red';
}
});
</script>
</body>
10. 元素的位置与大小
10.1scroll家族
- dom.scrollTop ** 获取元素内容在元素纵轴方向的滚动的距离**
- dom.scrollLeft ** 获取元素内容在元素横轴方向的滚动的距离**
- dom.scrollWidth 获取可以滚动的区间整个内容的宽度
- dom.scrollHeight 获取可以滚动的区间整个内容的高度
- 小细节：dom.scrollWidth / dom.scrollHeight 都是不包含滚动条宽度的
- 小细节：PC端滚动条宽度 17px，移动端滚动条宽度为0.
- 示意图如下
10.2 offset家族
- offsetTop 获取距离定位了的父元素顶部的长度
- offsetLeft 获取距离定位了的父元素左侧的长度
- offsetWidth 获取元素可视区域的宽度（包括滚动条）
- offsetHeight 获取元素可视区域的高度（包括滚动条）
- 示意图如下：
10.3 client家族
- clientTop 上边框的宽度
- clientLeft 左边框的宽度
- clientWidth 可视区域的宽度-不包含滚动条
- clientHeight 可视区域的高度-不包含滚动条
- 示意图如下
11. Window对象
11.1 location对象
- location. href 设置跳转页面
- location. search 获取 url ？ 后面的字符串
- location. hash 获取 url # 后面的字符串
- location. reload() 刷新
- location. reload(true) 强制刷新
<body>
<button>跳转到百度</button>
<script>
// 1 使用a标签 href 属性 可以实现页面跳转
// 2 在js中，也可以直接跳转 location.href 来跳转
// 3 location.href 也可以实现刷新 location.href = location.href;
// 4 location.reload(true);// true 强制刷新！
// 5 search 后一个阶段就会用到它 了 获取 url上 ？ 后面一串字符 /17- location.html?a=1&b=2
// 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17- location.html#/index #/index
const button = document.querySelector('button');
button.addEventListener('click', function () {
//设置跳转页面
location.href="http://www.baidu.com";
// 刷新功能
// location.href = location.href; // 刷新功能
// reload实现刷新
// location.reload(true);// true 强制刷新！
//获取 url # 后面的字符串
console.log(location.hash);
});
</script>
</body>
11.2 navigator对象（了解）
- navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息。
- 通过 userAgent方法 检测浏览器的版本及平台。
<script>
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
</script>
11.3 histroy对象
- histroy对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等。
- histroy. back()返回上一页
- histroy. forword()前进一页
- histroy. go(2) 前进两个页面
- histroy. go(-2) 后退两个页面
<body>
<a href="http://www.baidu.com">百度</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
const forward = document.querySelector('.forward');
forward.addEventListener('click', function () {
// history.forward();
history.go(1); // 前进一个记录
});
const back = document.querySelector('.back');
back.addEventListener('click', function () {
// history.back();
history.go(-1); // 后退一个记录
});
</script>
</body>
12. 本地储存
12.1 简介及应用
- 本地储存的作用：当页面刷新了，原页面的数据还在。
- 应用场景：待办列表 就业信息管理等案例。
- 分类
- localStorage 永久存在浏览区的本地存储内除非手动删除
- sessionStorage 当关闭了浏览器就会删除，存储在会话空间
- 本地存储只能存字符串类型，复杂的引用类型需先转换成字符串类型才能存储
- 两种储存方式对API的应用一致 ，区别只在于储存的数据的生命周期
- api分类
- setItem("key",value) 存储 key为秘钥名称 value为存储的内容
- getItem("key") 读取 凭借秘钥 key 获取
- removeItem("key") 删除一个 填写 key 即可删除对应的内容
- clear() 清空所有
12.2 localStorage 应用举例
- 案例需求：页面刷新了 之前设置的颜色还在
<body>
<input type="color" />
<script>
// 代码重新执行了 页面刷新
document.body.style.backgroundColor = localStorage.getItem('bgcolor');
const colorInput = document.querySelector('input');
colorInput.addEventListener('change', function () {
document.body.style.backgroundColor = this.value;
// 设置颜色到本地存储中
localStorage.setItem('bgcolor', this.value);
});
</script>
</body>
13. 正则表达式
13.1概念与简介
- 概念：正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。
- 作用：表单验证（匹配），过滤敏感词（替换），字符串中提取我们想要的部分（提取）。
- 语法：
- 定义正则表达式： let 变量名=/表达式/，表达式包裹在双斜杠内
- 验证方法（test）： 变量名.test(被检测的字符串)，变量名为上述自定义的变量名，如果正则表达式与指定的字符串匹配 ，返回true，否则false。
- 检索方法(exec) ： 变量名.exec(被检测的字符串)，如果匹配成功，exec() 方法返回一个数组，否则返回null。
13.2 元字符
-
边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
边界符 说明 ^ 表示匹配行首的文本（以谁开始），放在首字符前面 $ 表示匹配行尾的文本（以谁结束），放在尾字符后面 如果 ^ 和 $ 在一起，表示必须是精确匹配。
-
量词（表示重复次数）
量词用来设置某个模式出现的次数
量词 说明 * 重复0次或更多次 + 重复一次或更多次 ？ 重复0次或1次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次 注意： 逗号左右两侧千万不要出现空格
-
字符类
- [ ]里面加上一个 - 连字符， - 表示一个范围，如[a-z]表示小写字母a-z都可以
- 里面加上 ^ 取反符号,
- . 匹配除换行符之外的任何单个字符
-
预定义类
指的是某些常见模式的简写方式。
-
修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
/表达式/修饰符
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
replace替换方法
-
正则小案例
<script> // 注册账号 填写用户名 规则 必须是字母，范围 3-8 // console.log(/[a-zA-Z]/);// 一个字母 // console.log(/[a-zA-Z]/.test("a"));// true // 3-8 // {3,8} 修饰前面[] // console.log(/[a-zA-Z]{3,8}/.test("ab"));// false // console.log(/[a-zA-Z]{3,8}/.test("abc"));// true // console.log(/[a-zA-Z]{3,8}/.test("111222 abc 333444"));// true // 边界符 // console.log(/^[a-zA-Z]{3,8}$/.test("111222 abc 333444"));// false // console.log(/^[a-zA-Z]{3,8}$/.test("abc"));// true // 手机号码 验证 知道手机号码的验证规则 不懂去百度 // 规则 以数字1开头 第二位数字可以是 35789 其他9位数字 （11位数组） // console.log( /^1[35789]\d{9}$/.test("dd") );// false // console.log( /^1[35789]\d{9}$/.test("12345678901") );// false // console.log( /^1[35789]\d{9}$/.test("13345678901"));// false // console.log( /^1[35789]\d{9}$/.test("15345678901"));// false // console.log( /^1[35789]\d{9}$/.test("17345678901"));// false // console.log( /^1[35789]\d{9}$/.test("18345678901"));// false // console.log( /^1[35789]\d{9}$/.test("19345678901"));// false // 邮箱 yeah123@dsfdf.com // 邮箱名称 yeah123 可以是字母或者数字 最少要有一个 {1,} 或者 + // 分隔符 @ // 字母或者数字 // 匹配一个. => \. // 规定 com com // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("yeah123@dsfdf"));// true // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("@dsfdf"));// false // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@"));// false // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@3"));// true // console.log(/./.test('a')); // 就想要表示. 本身 加一个反斜杠 // console.log(/\./.test('a'));// false // console.log(/\./.test('.'));// true // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3')); // false // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3.com')); // true // 感受 代码不多 贼难！ // // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.com')); // true // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.cn')); // true // c om // c n </script>
14. 小知识点扩展
14.1 字符串的方法及小补充
14.1.1字符串的方法
-
字母大小写转换：
- 转大写： 待转换的字符.toUpperCase( ) 推荐将待转换的字符以变量表示
- 转小写 ：待转换的字符. toLowerCase( ) 推荐将待转换的字符以变量表示
<script> let msg='ASDFWGF' //转换成小写 msg.toLowerCase() console.log(msg.toLowerCase()) let msg1 = 'helloworld'; //转换成大写 toUpperCase() console.log(msg1.toUpperCase()); </script> -
字符串转成数组
表达式：待转换的字符 . split(' ') 括号内引号的内容表示 以什么符号为分割参考来将字符串变数组
<script> const str="abcdefg"; // split("") 分割 console.log(str.split(""));//=> ["a","b","c","d","e","f","g"] const str1 = 'a-b-c-d-e-f-g'; //表示以 - 为分割标准来分割字符串 console.log(str1.split('-'));//=> ["a","b","c","d","e","f","g"] </script> -
字符串的拼接（了解）
表达式：字符串1 . concat(字符串2) 推荐将字符串以变量表示
<script> //字符串也有一个 concat 也是表示合并 const str1 = '123'; const str2 = 'abc'; // console.log(str1.concat(str2));// 很少用 有什么用？ 当你的键盘 + 键坏 使用它 console.log(str1 + str2); // 更加简单好理解 </script>
14.1.2字符串的小补充
- 有类似数组的特性
- 可通过 .length 获取内容的长度
- 也可如数组般用下标来访问
- 字符串也可以用for循环遍历（暂不举例）
<script>
let txt='我是一组字符串'
//获取并在控制台输出文本的长度 7
console.log(txt.length);
//获取并在控制台输出文本数组的下标为[1]的字符 是
console.log(txt[1]);
</script>
14.2 数组的方法及小补充
14.2.1数组的方法（部分）
-
数组转字符串
表达式： arr**.join('')** 括号内引号的内容表示 数组转换成字符串后 以什么符号为连接符
<script> const arr = ['a', 'b', 'c', 'd']; console.log(arr.join('')); // abcd 数组转字符串 console.log(arr.join('-')); // a-b-c-d 数组转字符串 </script> -
数组的拼接
表达式：arr1 . concat(arr2)
<script> // 连接 数组和数组之间连接 const arr1 = ['1', '2', '3']; const arr2 = ['a', 'b', 'c']; // 将两个数组合并成一个数组 arr1.concat(arr2) console.log(arr1.concat(arr2));//['1', '2', '3', 'a', 'b', 'c'] </script>
14.2.2数组与伪数组的小补充
- 数组和伪数组都可以用for循环遍历
- 伪数组不支持一些好用的数组方法，如： filter / map / some / every / find 等
- 使用document.querySelectorAll获取到的元素是伪数组
14.3 环境参数 this
概念：this 是函数内部的特殊变量，有以下两个特征
- 谁调用了包含this的方法，谁就是this
- 哪个元素绑定了点击事件，哪个元素就是this
判断this指代的是是什么举例
<script>
let obj={
uName:'悟空',
logFun:function () {
console.log(this.uName);//this指代的是obj这个对象
}
}
obj.logFun()
</script>
14.4 let和const的区别
- const 声明的变量不能被修改，let声明的变量可被修改
- 工作中能用const则推荐用const来声明变量
- 就引用类型来说：
- arr.push(123) 这个不叫修改变量，用到 = 号的才是修改变量
- const obj={}
- obj.name1='abc' 这个并不是直接修改数据
- const对作用于 堆 的增删改并无影响
14.5 标签的自定义属性
应用场景:当需要给标签加上特殊“印记” 以方便操作元素的时候
14.5.1常规自定义属性
- 设置自定义属性： dom. setAttribute("hello",456) hello 为自定义属性名 456为属性值
- 获取自定义属性： dom.getAttribute("hello") 只需传入属性名即可
- 删除自定义属性： dom.removeAtrribute("hello") 只需传入属性名即可
- Attribute 功能强大，不仅能操作自定义属性，也能操作元素的固有属性
14.5.2 H5建议的自定义属性
- H5建议的命名规则 ： data-xxx =属性值
- 设置属性：dom .dataset.abc=456 传入标签后属性的模样： data-abc="456"
- 获取属性值： dom.dataset.xxx
- 优点：设置和获取方便
- 应用举例：
<body>
<!-- 设置自定义属性data-index="1" -->
<a data-index="1" href="#">
<script>
//获取 a 标签
const a=document.querySelector('a')
//获取自定义属性的值 a.dataset.index
console.log(a.dataset.index);
</script>
</body>
14.6 swiper(第三方插件)
- 应用场景：轮播图，页面滑动等
- 学习要求： 会根据文档或者教程来使用它即可-查询字典来使用！！
- 网址：www.swiper.com.cn/
14.7 高阶函数（了解）
- 概念：a 函数 可以把 另外一个函数b当成参数来接收处理 或者 返回另外一个新的函数C ， 函数a 就是 高阶函数
- 作用：react阶段应用广泛
14.8 浏览器渲染页面的流程（了解）
- 重排： 主要修改了元素的大小、位置、定位+浮动 。。。等， 损耗比较多浏览器性能
- 重绘： 主要修改了外观颜色字体颜色。。 等， 性能损耗比较低
- 编写代码的理想情况： 不要出现重排重绘 或 出现重绘不要出现重排
- 区分： 出现重绘不一定会出现重排 ， 出现重排 一定会出现重绘
