JavaScript进阶
一、DOM编程
DOM(Document Object Module) 不属于原生js的一部分,是浏览器提高给js操作网页的一个API
DOM文档对象模型，就是浏览器把html的每个元素生成了一个js对象。通过js可以去操作DOM对象，就是DOM编程。
一、window对象
在浏览器里面window对象是js的根(最顶层)对象,所有的标准库都是放在window对象里面，一般都是省略window对象。
二、document对象
浏览器会把整个网页解析为一个document对象，网页的所有的元素搜索该对象的一个属性。
document对象下面的每一个节点都是一个Node节点类，每一个标签或者文本就是一个节点，节点不是一个确定的html标签。
每一个Node节点会有一个element 类，一般是一个具体的html标记(element类是继承自Node，一个element有Node的属性和自身属性)
htmlElement 继承自 element 继承自 Node
// 1. 在浏览器里面window对象是js的根(最顶层)对象,所有的标准库都是放在window对象里面，一般都是省略window对象。
console.log(window.document);// 一般省略window对象
// 2. 浏览器把整个网页解析为一个document对象
console.log(document);
1. document对象常用的属性和方法
// 1.直接可以通过.body,.head取到对应的子元素对象
console.log(document.body); //输出body对象
console.log(document.head); //输出head对象
console.log(Object.getPrototypeOf(document.body)); //获取body对象的原型
// 2. baseURI 获取网页的url地址
console.log(document.baseURI);
// 3. domain 返回网页的域名(或者ip地址)
console.log(document.domain);
// 4. forms 返回网页中的所有form表单对象
console.log(document.forms);
// 5. images 返回网页中所有的img图片对象
console.log(document.images);
// 6. links 返回网页中的所有a标签对象
console.log(document.links);
// 7. characterSet 网页编码格式
console.log(document.characterSet); // UTF-8
2. 查找dom的方法
实际开发中一般需要精准的查找到对应的DOM,需要用查询dom的方法去查询。
// 1. getElementById("id名称") 根据元素的id返回元素对象(不是集合)
console.log(document.getElementById("a1"));// 查询id为a1的元素dom对象
// 2. querySelector("css选择器") 根据css选择器条件查询返回查询到的第一个dom对象
console.log(document.querySelector(".f1"));// 查询第一个对象class为f1的dom
// 3. querySelectorAll("css选择器") 选择符合css选择条件的所有dom对象集合
var dom = document.querySelectorAll(".f2");// 返回class=f2的所有元素的集合
dom.forEach(function(item){ // 原型上有forEach方法 可以遍历每个元素
console.log(item)
})
// 4. getElementByClassName("类名") 根据标签的类名查询dom，返回一个集合
console.log(document.getElementsByClassName("f1"));// 查询class=f1的所有元素
// 5. getElementByTagName("标签名") 根据标签名查询标签,返回的是一个标签对象集合
console.log(document.getElementsByTagName("div"));// 查询网页中的所有div元素
// 6. getElementByName("name属性名称") 根据标签的name属性名称查询dom，返回的是一个集合
console.log(document.getElementsByName("pwd"));// 查询name属性为pwd的dom元素
三、DOM对象
1. DOM对象的属性
var div = document.querySelector("#box2")
// 1. 获取node的id属性，如果赋值就是修改属性
console.log(div.id);// 获取id属性
div.id = "divb"// 修改id属性值
// 2. className 获取class属性值
console.log(div.className);// 获取class属性
div.className = "divq" // 修改class值
// 3. innerHTML 返回元素内部的所有内容(包含的html标签，只读取一层)返回的是字符串
console.log(div.innerHTML);
// 修改元素内容，会渲染html标签，一般用该方式修改dom的显示元素，效率比较高
div.innerHTML = "vbka"
// 4. innerText 获取元素的文本内容，过滤html标签
console.log(div.innerText);
// 修改元素的文本内容，有html标签，当做字符串显示在网页
div.innerText = "vbka"
// 5. tagName 获取元素的标签名称(大写字母)
console.log(div.tagName);
// 6. attributes 返回元素的可见属性的map(id,class...)
console.log(div.attributes);
// 7. classList 返回元素class名的集合(类似数组对象)
console.log(div.classList,div.className);
//classList操作class，不会影响其他class
div.classList.add("warp","a")// 给div元素添加c3的class值
div.classList.remove("a")// 删除div上class为a的属性
div.classList.replace("warp","box")// 替换warp值为box
div.classList.toggle("box1")// 在一个样式之间切换(有该样式则是删除，没有则是添加)
// 8. style 返回元素的css样式结合(css的-线链接的样式名称在js里用小驼峰命名)
console.log(div.style.fontSize);
console.log(div.style.color);
// 给样式赋值就是修改样式
div.style.color = "gray"
// 9. nodeType 返回元素节点类型(返回的是一个数字，用不同的数字代表不同的节点类型)
console.log(div.nodeType);
// 10. dataset 获取元素自定义数据(data-后面的值)的对象结构
//aaa
var box = document.querySelector("#box")
console.log(box.dataset); //{text: 'text', index: 'index'}
// 11. parentNode 获取当前元素的父元素
console.log(span.parentNode);
1. classList 类名操作
var btn = document.querySelector('.btn')
// 1. 添加类 是在后面追加类名 不会覆盖前面的类名
btn.classList.add('submit')
// 2. 删除类
btn.classList.remove('submit')
// 3. 切换类 当前有这个类名就取消，没有就添加
btn.classList.toggle('submit')
2. DOM对象的方法(函数)
方法就是一个函数，一般也叫事件。用户对DOM操作的一个响应。
var box1 = document.querySelector(".box1")
// 1. onclick 点击事件，用户点击dom以后触发的函数
box1.onclick = function(){ // 用户点击box1触发该函数
box1.style.backgroundColor = "yellowgreen"
// dom的事件里面的this一般代表当前dom对象
this.style.color = "gray"
}
// 2. onmouseenter() 鼠标移入元素触发的事件。不受子元素影响，只有移入的时候触发一次
box1.onmouseenter = function(e){
console.log("enter");
console.log(e); // e表示鼠标事件对象
}
// 3. onmouseover() (较少用)鼠标移入滑过元素会触发，元素内部有其他子元素，离开子元素又会触发over
box1.onmouseover = function(){
console.log("over");
}
// 4. onmouseout() 鼠标离开元素触发，受子元素影响,移入离开子元素也会触发out
box1.onmouseout = function(){
console.log("out");
}
// 5. onmousemove() 鼠标在元素内部只要移动就触发的事件
box1.onmousemove = function(){
console.log("move");
}
// 6. onkeydown() 键盘按下触发的事件
inputName.onkeydown = function(e){
console.log("keydown");
// 默认参数e是键盘事件对象, e.key按键符号，e.keyCode按键符号的码点
console.log(e);
// console.log(this);
}
// 一般用在form表单的输入控件里面：
// 7. onchange 元素内容发生改变触发的事件，一般用在form表单的输入控件里面
// 失去焦点的时候才对比内容，有改变则执行该函数。
var inputName = document.querySelector("input[name='name']")
inputName.onchange = function(){
// 获取input的value值，赋值则是修改value值
console.log(this.value,"onchange");
}
// 8. onblur 元素失去焦点触发的事件(一般输入控件有该事件)
inputName.onblur = function(){
console.log("onblur");
}
// 9. onfocus 元素获取焦点触发
inputName.onfocus = function(){
console.log("onfocus");
}
/* 10. dom对象可以通过getElementById(),getElementsByTagName(),getElementsByClassName(),getElementsByName()
querySelector(),querySelectorAll()
查询dom对象的后代元素
*/
var span = document.querySelector("span")
// 11. document.createElement(tagName) 创建element对象(一般不用此方法，用innerHTML)
var div2 = document.createElement("div") // 创建一个div 元素
div2.style.color = "red"
div2.innerText = "div2"
console.log(div2);
// box.innerHTML = "HELLO"
var box1 = document.querySelector(".box1")
// 12. 在某个dom对象里面添加dom对象
box1.appendChild(div2)// 把div2的dom对象添加到box1里面，box1里面会渲染该元素
// 移出dom里面的某个dom元素
box1.removeChild(span) // 删除box1元素内部的span元素
// 13. setAttribute("属性名","属性值"),给元素添加属性
box1.setAttribute("id","c1")
box1.setAttribute("onclick","console.log(1)")
3. 节点操作
// 1. 父节点 parentNode
son.parentNode // 得到离元素最近的父级元素 找不到返回null
// 2. 子节点 childNodes和children
ul.childNodes // 包含 元素节点、文本节点等等
ul.children // 只获得元素节点 实际开发常用
ul.firstChild // 获取第一个子节点 包含 元素节点、文本节点等等
ul.firstElementChild // 返回第一个子元素节点
// 实际开发常用
ul.children[0] // 第一个
ul.children[ul.children.length - 1] // 最后一个
// 3. 兄弟节点
div.nextSibling // 上一个兄弟节点 包含 元素节点、文本节点等等
div.nextElementSibling // 返回上一个子元素节点
div.previousSibling // 下一个兄弟节点 包含 元素节点、文本节点等等
div.previousElementSibling // 返回下一个子元素节点
// 4. 创建、添加 节点
var li = document.createElement('li') // 创建一个li标签
ul.appendChild(li) // 给ul后面追加li节点
ul.insertBefore(li,ul.children[0]) // 给ul前面添加li节点 两个参数：1.添加的元素 2.在哪个节点前添加
// 5. 删除节点
ul.removeChild(ul.children[0]) // 把ul里第一个li元素删除
ul.removeChild(ul.children[ul.children.length - 1]) // 把ul里最后一个li元素删除
// 6. 复制节点
/**
* 1. node.childNode() 括号内为空或者为false --浅拷贝 只复制标签不复制里面的内容
* 2. node.childNode(true) 括号内为true --深拷贝 复制标签和里面的内容
*/
var li = ul.children[0].cloneNode(true)
ul.appendChild(li)
1. 案例：动态生成表格
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格title>
<style>
.box6 table {
margin: 100px auto;
width: 500px;
text-align: center;
}
style>
head>
<body>
<div class="box6">
<table cellspacing="0" border="1">
<thead>
<tr>
<td>姓名td>
<td>科目td>
<td>成绩td>
<td>操作td>
tr>
thead>
<tbody>
tbody>
table>
div>
<script>
// 动态生成表格
// 准备学生的数据，用数组来存放数据
var dates = [{
name: '张三',
subject: 'javascript',
score: 100
},
{
name: 'Anna',
subject: 'javascript',
score: 78
},
{
name: '约翰',
subject: 'javascript',
score: 89
},
{
name: '杨幂',
subject: 'javascript',
score: 90
}]
// 往tbody里面创建行 有几个人就建几行
var tbody = document.querySelector('.box6 tbody')
for (var i = 0; i < dates.length; i++){
// 1. 创建行 tr
var tr = document.createElement('tr')
tbody.appendChild(tr)
// 2. 创建单元格td 单元格数量取决每个对象里面的属性个数 for循环遍历对象
for(var k in dates[i]){
// 创建单元格td
var td = document.createElement('td')
// 把对象里面的属性值给单元格td
// console.log(dates[i][k]);
td.innerHTML = dates[i][k]
tr.appendChild(td)
}
// 3. 创建删除单元格
var td = document.createElement('td')
td.innerHTML = '删除'
// 添加 删除 操作
tr.appendChild(td)
}
// 4. 点击可以删除单元格
var dea = document.querySelectorAll('.box6 a')
for(let i = 0 ; i < dea.length;i++){
dea[i].onclick = function(){
// this.parentNode仅表示单元格td this.parentNode.parentNode才表示它所在的整个tr
tbody.removeChild(this.parentNode.parentNode)
}
}
script>
body>
html>
4. innerHTML 和 createElement() 效率比较
innerHTML 和 createElement() 创建多个元素的效率 哪个更高?
：
innerHTML采用数组(8ms左右)形式 而不采用拼接字符串格式(3s左右)效率更高，但结构稍微复杂
createElement()创建多个元素稍微低一点点(20ms左右)，但结构更清晰
四、事件监听 addEventListener
它可以触发多个操作函数 不会像 原始写法后面操作会覆盖前面的操作
1.一些常用操作执行方法
1. addEventListener(“click”,function(){}）
// 1. 传统的事件属性只能执行一个函数，不能同时执行多个
var btn = document.querySelector("button")
btn.onclick = function(){
alert("aaa")
}
btn.onclick=function(){
alert(11) // 会覆盖前面的函数，不能同时执行两个函数
}
// 2. 事件监听，通过js的事件监听系统，监听dom对象的事件，只要监听的事件触发就好执行对应的函数，可以监听多个事件。
/* element.addEventListener(eventName,callback),可以监听多个事件
eventName 事件名称，js事件属性去掉on
callback 监听事件执行的函数 */
// 给btn按钮添加点击事件的监听,两个函数都可执行
btn.addEventListener("click",function(){
alert(222)
})
var btn1 = function(){
alert("XXX");
}
btn.addEventListener("click",btn1)
// 3. 移出事件监听
/* element.removeListener(eventName,callback)
eventName 事件名称，js事件属性去掉on
callback 移出事件执行的函数(要和监听的函数是同一个内存地址) */
btn.removeEventListener("click",btn1) // 移出监听点击事件执行f1函数的监听
2. addEventListener(“change”,function(){}）
鼠标移入移出，内容发生变化才会触发
//
const input = document.querySelector('input')
// 只有文本框的内容有变化才会触发
input.addEventListener('change',function(){
console.log('触发');
})
3. addEventListener(“blur”,function(){}）
鼠标每移入移出就会触发一次
//
const input = document.querySelector('input')
// 文本框的内容有无变化都会触发
input.addEventListener('blur',function(){
console.log('触发');
})
五、事件冒泡
多个重叠dom的事件触发顺序是 从内往外 执行，像水泡一样，所以叫事件冒泡(默认行为)
e是当前事件对象：
e.stopPropagation(); 阻止事件冒泡(停止事件传递)
e.preventDefault()；阻止默认事件，（阻止a标签的默认跳转链接事件）
1. e.preventDefault() 阻止默认事件
// 阻止dom的默认事件(a标签有默认的跳转事件)
var a = document.querySelector("a")
a.addEventListener("click",function(e){
e.preventDefault() // 阻止默认事件，阻止a标签的默认跳转链接事件
})
a. 禁止选中文字和右键菜单
// selectstart 禁止选中文字
box7.addEventListener('selectstart',function(e){
e.preventDefault()
})
// contextmenu 禁用右键菜单
box7.addEventListener("contextmenu",function(e){
e.preventDefault()
})
2. e.stopPropagation() 阻止事件冒泡
/*HTML代码：
*/
var div = document.querySelectorAll("div")
// 默认会有冒泡关系
div[0].addEventListener("click",function(){
alert("box1")
})
div[1].addEventListener("click",function(e){// e是当前事件对象
e.stopPropagation()// 阻止事件冒泡(停止事件传递)
alert("box2")
})
div[2].addEventListener("click",function(e){
alert("box3")
})
六、事件委托
事件委托原理: 不是给每个子元素添加监听器，通过给元素的父元素添加事件，利用事件冒泡原理，设置到每个子元素上
通过获取点击元素的标签名(tagName),触发的事件却是父元素的事件。
如: 需要给li标签添加点击事件，获取点击li标签的所有值。
/*
- 1
- 2
- 3
*/
var ul = document.querySelector("ul")
ul.addEventListener('click',function(e){
// e是当前点击事件对象，事件对象的target属性会记录点击的那个dom元素
if(e.target.tagName === "LI"){// 判断是否点击的li标签
var index = +e.target.dataset.indext// 获取自定义数据index并转为number类型
console.log(index);
}
})
1. e.target 和 this 的区别
this 指向绑定事件
e.target 指向我们点击的那个对象
var ul = document.querySelector('ul')
ul.addEventListener("click",function(e){
// this 指向绑定事件 --> ul
console.log(this);
// e.target 指向我们点击的那个对象 --> li
console.log(e.target);
})
七、事件捕获
多个重叠的dom元素，事件执行顺序是 从外向内 执行
addEventListener(event,callback,bool)
bool为true则是事件捕获，为false则是事件冒泡，默认是false(一般省略)
三个阶段:
1.捕获阶段(从祖先元素document向目标元素进行事件的捕获) --从外向内
2.目标阶段(触发事件的对象)
3.冒泡阶段(再由目标元素向祖先元素进行事件的冒泡) --从内向外
默认在捕获阶段 事件不会触发，将addEventListener的第三个参数设置为true
div[0].addEventListener("click",function(){
alert("box1")
},true)
div[1].addEventListener("click",function(e){// e是当前事件对象
// e.stopPropagation()// 阻止事件冒泡(停止事件传递)
alert("box2")
},true)
div[2].addEventListener("click",function(e){
alert("box3")
},true)
八、函数节流与防抖
1. 函数节流
一定时间内函数只指向一次(每隔一段时间可以执行函数)
var box1 = document.querySelector(".box1")
var canMove = true // 创建变量控制函数内部逻辑代码是否执行
box1.onmousemove = function (){
if (canMove){
canMove = false //执行了代码修改变量值为false
console.log(11);
setTimeout(function(){// 控制函数内部逻辑指向的时间间隔
canMove = true
},500)
}
}
2. 函数防抖
函数频繁触发的情况下，只有足够的空闲时间才执行函数代码(某个操作结束后才执行该函数)
如：window窗口的滚动事件，需要滚动停止后再执行函数代码。
var setIndex = ""
window.onscroll=function(){
// 记录定时器的索引值，每次滚动都清除上一个定时器
clearTimeout(setIndex)
setIndex = setTimeout(function(){
console.log("scroll")
},500)
}
二、BOM对象
JS执行机制：同步和异步
JS执行分：主线程执行栈(同步任务)和任务队列(异步任务)
1. 先执行 主线程执行栈的同步任务
2. 异步任务(回调函数)放入任务队列中
3. 执行栈的同步任务执行完后，系统会按次序读取任务队列的异步任务，被读取的异步任务结束等待状态，进入执行栈，开始执行。异步任务处理完毕清空
一、window 对象
window 是浏览器窗口对象，是BOM的核心对象
在浏览器中window也是一个全局对象,是一个顶层对象,BOM自带的对象都是window对象的属性。 如: alert,propt,document等,一般省略了window —>(window.document)
var 关键词创建的全局变量都是做为window对象的属性
1. 鼠标事件的坐标
document.addEventListener("click",function(e){
// 1. client 鼠标在当前可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
// 2. page 鼠标在页面文档的x和y坐标(包括右边拉伸条)
console.log(e.pageX);
console.log(e.pageY);
// 3. screen 鼠标在电脑屏幕的x和y坐标(包括缩小浏览器窗口)
console.log(e.screenX);
console.log(e.screenY);
})
//1.获取浏览器窗口的宽度和高度
console.log(window.innerWidth,window.innerHeight)
//2.open(url,name) 打开一个窗口并显示url的网页内容
//name是窗口的名称(可省略),如果打开多个窗口，窗口的name一致，则只会打开一个窗口，后面覆盖前面的网页窗口。
window.open("https://www.baidu.com","a")
window.open("https://www.taobao.com","a")
1. mouseenter 和 mouseover 区别
mouseover：经过自身盒子会触发一次，经过子盒子再触发一次(有冒泡)
mouseenter：仅经过自身触发一次(没有冒泡)
mouseenter 和 mouseleave搭配 都不会冒泡
2. 键盘事件 - 按下和弹起
// 1. keyup键盘弹起 触发事件
document.addEventListener("keyup",function(e){
// 事件对象的 keyCode 可以得到相应的ASCII码值
console.log('upup');
})
// 2. keydown键盘按下 触发事件(比 keypress先触发)
document.addEventListener('keydown',function(e){
console.log(e.keyCode); // 不区分大小写 a和A得到的都是65
})
// 3. keypress 键盘按下 触发事件
document.addEventListener('keypress',function(e){
console.log('keypress');
console.log(e.keyCode); // 区分大小写 a：65 A：97
})
3.窗口滚动条滚动触发的事件
// 一、 window.onscroll 窗口滚动条滚动触发的事件
// 1. dom.scrollTop 滚动条离顶部的距离,如果用等号赋值就是修改滚动条的位置
// 2. dom.scrllLeft 滚动条离左边的距离
var bodyHeight = document.body.clientHeight// 获取body的可见高度
var wHeight = window.innerHeight // 获取windown窗口的高度
var btn1 = document.querySelector(".btn")
window.onscroll = function(){
/*
获取网页滚动条滚动距离用 document.documentElement.scrollTop 或者
document.body.scrollTop (不同的浏览器写法不一样，一般需要两者都用)
*/
var top = document.documentElement.scrollTop || document.body.scrollTop
// 例: 当网页滚动条滚动到底部就出现返回顶部的按钮
// 网页滚动到底部的scrollTop = body的高度 - 窗口的高度 - 滚动条高度(一般50px)
var bottom = bodyHeight - wHeight - 80
if (top > bottom){
console.log("bottom!");
btn1.style.display = "block" // 到底部显示
} else {
btn1.style.display = "none"// 没到底部隐藏
}
}
// 点击返回顶部按钮，滚动条返回顶部
btn1.onclick = function(){
// 修改scrollTop滚动条返回顶部
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
}
// 二. dom对象也有scroll系列属性
var div1 = document.querySelector(".box")
div1.onscroll = function(){
console.log(this.scrollTop,this.scrollLeft);
}
setTimeout(function(){// 设置定时器让它5秒内还原
div1.scrollLeft = 0
div1.scrollTop = 0
},5000);
// 三. window.onresize 窗口尺寸发生变化触发的事件
window.onresize = function(){
console.log(window.innerWidth); // 获取窗口宽度
console.log(window.innerHeight);// 获取窗口高度
}
// 四. dom.offset 相对于非static父元素的偏移距离(如果没有非static定位，则是相对于body)
var warp = document.querySelector(".warp")
console.log(warp.offsetLeft);// 离最近非static父辈元素的左边的距离
console.log(warp.offsetTop);// 离最近非static父辈元素的顶部的距离
二、navigator 对象
1. userAgent属性–判断用户的操作平台
可以获取浏览器相关的信息,常用userAgent属性判断用户的操作平台
如果包含了 Android 关键词则是安卓手机
如果包含了 iPhone 关键词则是iphone设备
如果都没有包含，则是pc平台
// 判断浏览器是在 移动端平台 还是在 pc平台
function isMobile(){
const userAgent = navigator.userAgent
return userAgent.match("Android") || userAgent.match('iPhone') || false
}
document.write(isMobile()?"移动端平台":"PC端平台")
三、location 对象
操作url网址相关的对象
1. location.href 获取完整的url地址
http://127.0.0.1:5500/demo3.html?id=11&name=123#444
location.href="https://www.baidu.com" // 赋值则是跳转到该url地址
// location的 href地址跳转案例
//支付将在5秒后自动跳转页面
const a = document.querySelector('a')
let num = 5
let timer = setInterval(function(){
num--
a.innerHTML = `支付将在${num}秒后自动跳转页面`
if (num === 0){ //0秒后清除定时器并跳转页面
clearInterval(timer)
location.href = "http://www.baidu.com"
}
},1000)
2. location.hash 获取url地址的(#及其后面的值)hash值
#444
3. location.search 获取url的(?后面的参数)查询参数
?id=11&name=123
获取到某个查询参数的具体值
一般需要获取到某个查询参数的值，要封装一个函数来查询
/**
* @params key 查询参数名称
*/
function getParam(key){
var search = location.search//获取查询参数字符串
// 1.替换 ? 为空字符串
search = search.replace("?","")
// 2.按 & 符合分隔数组
search = search.split("&")
// 3.按 = 号分隔数组
for (let i = 0; i < search.length;i++){// 先遍历分隔的数组
var items = search[i].split("=") // 再= 号分隔
if(key === items[0]){ // 如果传入的参数等于数组的参数
// url中的中文字符串会被编码，需要用解码函数解码
return decodeURI(items[1]) // 就返回它对应的属性值
}
}
return "" // 都没有找到返回空值
}
console.log(getParam("id"));// 11
console.log(getParam("name"));// 123
编码/解码 中文字符串：
console.log(encodeURI('中国')); // 编码
console.log(decodeURI('%E4%B8%AD%E5%9B%BD')); //解码
4. location.host 获取主机(域名)有端口号会获取到
127.0.0.1:5500
5. location.hostname 获取主机(域名),不带端口号
127.0.0.1
6. location.pathname 获取主机后面的地址(查询参数和hash值都不会获取)
/demo3.html
7. location.protocol 获取传输协议
:http
8. location.reload() 刷新当前页面
location.reload() == F5 （普通刷新）
location.reload(true) == CTRL + F5 （强制刷新）
// 用定时器每3秒自动刷新一次
setTimeout(function() {
location.reload()
}, 3000);
9. replace(url) 替换当前网站
用一个url网址替换当前网站，不会有浏览器历史记录
location.replace("https://taobao.com")
四、history 操作浏览器历史记录对象
1. 历史记录前进(forward/go)后退(back/go)
/*
百度
*/
const btn = document.querySelectorAll('button')
btn[0].onclick = function (){ // back 按钮
// 打开上一个浏览历史记录
history.back()
history.go(-1)
}
btn[1].onclick = function (){// next 按钮
// 打开下一个浏览历史记
history.forward()
history.go(1)
}
2. length 查看浏览器历史数目
console.log(history.length);
五、offset 元素偏移量 、page、scroll
必须给元素加定位 才能控制它的left等值
// offsetLeft 元素距窗口左边的距离
console.log(div.offsetLeft);
// offsetLeft 元素距窗口顶部的距离
console.log(div.offsetLeft);
// offsetWidth 元素本身的宽度 包括：padding + border + width
console.log(div.offsetWidth);
//offsetHeight 元素本身的高度 包括：padding + border + width
console.log(div.offsetHeight);
1.offset 和 style 的用法区别
/offset 和 style 的区别
1. offset可以得到任意样式表值，style只能得到行内样式表值
2. offset获得的数值没有单位，style获得是带单位的字符串
3. offsetWidth包含padding + border + width，style.width不包含padding和border值
4. offsetWidth等属性是只读属性 不能赋值，style.width是可读属性，可获取可赋值
-
综上：获取元素大小位置用offset，给元素更改值用style
2. page
element.pageX：元素到页面的X坐标长度
element.pageY：元素到页面的Y坐标长度
3. scroll
针对盒子元素：
element.scrollTop：元素被卷走的头部
element.scrollHeight：元素总的高度
针对整个页面：
window.pageYOffset：页面被卷走的头部
六、js的动画
动画原理：
1. 获得盒子当前位置
2. 让盒子在当前位置加一个移动的距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意元素一定要加定位，才能使用 element.style.left
1. 匀速动画
盒子当前的位置 + 固定值
// 封装函数：函数传递两个参数，一个操作对象，一个结束条件
function animation(obj,target){
// 当我们不断点击按钮，这个元素会越来越快 因为每点击一次，元素就会开启一个定时器
// 解决方案：让我们元素只有一个定时器
// 先清除以前的定时器，只保留当前的一个定时器执行函数
clearInterval(obj.timer)
obj.timer = setInterval(function(){ // obj.timer性能优化更好
if (obj.offsetLeft == target){
clearInterval(obj.timer)
} else {
obj.style.left = obj.offsetLeft + 1 + 'px'
}
},30)
}
// 调用函数
var box = document.querySelector('.bar')
var banner = document.querySelector('.banner')
animation(box,300)
var btn = document.querySelector('button')
btn.addEventListener('click',function(){
animation(banner,200)
})
1. 缓动动画
也可以实现多个目标值之间的移动
盒子当前的位置 + 变化值(目标值 - 当前的距离值 / 值)
思路：
- 让盒子每次移动的距离慢慢变小 速度就会慢慢落下来
- 核心算法：(目标值 - 现在的位置) / 10 作为每次移动的距离步长
- 停止条件：让当前的盒子位置等于目标位置就停止定时器
// 封装函数：函数传递两个参数，一个操作对象，一个结束条件
function animation(obj,target){
// 当我们不断点击按钮，这个元素会越来越快 因为每点击一次，元素就会开启一个定时器
// 先清除以前的定时器，只保留当前的一个定时器执行函数
clearInterval(obj.timer)
obj.timer = setInterval(function(){ // obj.timer性能优化更好
var step = (target - obj.offsetLeft) / 10
// 把步长改为整数 不要出现小数问题
tep = step > 0 ? Math.ceil(step) : Math.floor(step)
if (obj.offsetLeft == target){
clearInterval(obj.timer)
} else {
// 每次加的步长值都是一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px'
}
},15)
}
1. 加回调函数
// 封装函数：函数传递两个参数，一个操作对象，一个结束条件 ,回调函数
function animation(obj,target,callback){
// 当我们不断点击按钮，这个元素会越来越快 因为每点击一次，元素就会开启一个定时器
// 先清除以前的定时器，只保留当前的一个定时器执行函数
clearInterval(obj.timer)
obj.timer = setInterval(function(){ // obj.timer性能优化更好
var step = (target - obj.offsetLeft) / 10
// 把步长改为整数 不要出现小数问题
step = step > 0 ? Math.ceil(step) : Math.floor(step)
if (obj.offsetLeft == target){
clearInterval(obj.timer)
// 结束调用 回调函数
if (callback){// 有回调函数就调用 没有就不调用
callback()
}
} else {
// 每次加的步长值都是一个慢慢变小的值
obj.style.left = obj.offsetLeft + step + 'px'
}
},15)
}
// 调用函数
var banner = document.querySelector('.banner')
var btn2 = document.querySelector('.btn2')
btn2.addEventListener('click',function(){
animation(banner,800,function(){
banner.style.backgroundColor = 'red'
})
})
六、js异常处理
js程序如果报错，会终止代码运行并显示错误。有时不希望出错就停止执行代码，需要把可能出错的代码写入到异常处理代码块里面。
不要乱用try…catch,一般js代码需要包装逻辑的完整性，正确性，容易出错的地方用if判断解决。
1. try…catch()…语句
try {// 把可能出错的底代码放入try语句中,如果代码出错，错误会抛到catch语句中,没有错误直接执行语句，不会执行catch语句
console.log(text1); // 错误语句
}catch(err){// catch语句接受try抛出的异常，err就是错误的描述对象
console.log(err.message); //text1 is not defined
}finally{// 不管执行了try还是catch语句，都会执行finally语句(可省略)
console.log("都会执行的语句");
}
2. 自定义抛出错误
//1. 可以用Error构造函数收到抛出一个错误
function err1(){
// throw 语句抛出错误
throw new Error("err1 是一个错误语句");// 实例化一个错误对象，参数是错误显示内容
}
//2. 测试
try{
err1() // 调用错误函数
}catch(err){
console.log(err.message); //err1 是一个错误语句
}
六、cookie存储
cookie 是一种小型的文本文件，可以让程序员在计算机中存储少量的数据(4kb),用来记录用户的一些信息。比如记录用户的身份，喜好，浏览器网页的习惯等等。cookie最初设计主要是为php，asp等服务器端语言设计，前端也可以通过js操作cookie。cookie可以设置存储的过期时间。
cookie的数据是保留在客户端的硬盘上，cookie是绑定在域名上的，不同域名的cookie不能互相访问，cookie创建数量有限制，大部分浏览器现在在20-50个之间;一个cookie存储数据大小是4kb左右。前端开发一般不用cookie
cookie 的操作
// 1. 创建cookie，cookie的值是一个字符串，字符串用key=value方式存储内容
/* 存储的cookie 的 value数据中不能包含分号，逗号或者cookie,
建议存储数据使用encodeURI对内容进行编码 */
// 读取的时候用decodeURI解码。默认数据是浏览器关闭，cookie数据就消失
document.cookie = `name=${encodeURI("张珊")}`
// 2. 如果要延长cookie数据存储时间，用max-age指定cookie数据存储时长(单位s),默认为-1，浏览器关闭，数据消失
document.cookie = `test=${encodeURI("安娜")};max-age=${60*60*24*30}`// test数据30天过期
// 3. expires属性指定cookie过期日期(日期字符串格式)
document.cookie = `sex=11;expires=Fri, 17 Jul 2024 21:15:42 GMT`
// 4. 修改cookie的值，创建一个相同的cookie覆盖
document.cookie = "name=Amy"
// 5. 删除cookie，把cookie的有效期设置为一过期时间则是删除
document,cookie = "sex='';expires=Fri, 17 Jul 2020 21:15:42 GMT"
// 6. 读取cookie的值
// 封装读取cookie指定值的函数
function getCookie(key){
const cookie = document.cookie.split("; ")
for (let i = 0; i < cookie.length; i++){
const items = cookie[i].split("=")
if(items[0] === key){
return decodeURI(items[1])
}
}
return ""
}
七、本地存储localStorage 和sessionStorage
localStorage 永久存储数据，不主动删除，数据不会消失。
sessionStorage用法和localStorage一致，浏览器关闭，数据消失。storage 存储数据大小是5M
1. localStorage 永久存储数据(简单存储)
// 1. 存储数据 localStorage.setItem('key','value') ,只能存字符串(非字符串数据会转字符串)
localStorage.setItem('uame','anna') // 本地存储空间，数据永久存储
localStorage.setItem('age',18)// 数字会转成字符串
// 2. 读取key值 localStorage.getItem('key') 读取key值对应的value
console.log(localStorage.getItem('age'));
// 3. 删除key localStorage.removeItem(key)
localStorage.removeItem('age')
// 4. 删除storage里面所有数据 localStorage.clear()---也可用上面的禁用符删除
localStorage.clear()
2. sessionStorage 浏览器关闭，数据消失
用法同 localStorage 一样，除生命周期不同，页面关闭即消失。
// 添加数据
setnum.addEventListener('click',function(){
var val = ipt.value
sessionStorage.setItem('age',val)
sessionStorage.setItem('uname',val)
})
// 获取数据的值
getnum.addEventListener('click',function(){
console.log(sessionStorage.getItem('age'));
})
// 删除一条数据
remove.addEventListener('click',function(){
sessionStorage.removeItem('uname')
})
// 清除所有数据 不推荐使用
detele.addEventListener('click',function(){
sessionStorage.clear()
})
3. localStorage (复杂存储)
本地只能存储字符串，不能存储复杂的数据类型，需要将复杂数据类型转换成JSON字符串存储到本地
// 1.存储 JSON.stringify() 把对象转成JSON字符串
localStorage.setItem('user',JSON.stringify(user)) // {"name":"Anne","age":29,"gender":"女"}
// 2.取值 JSON.parse() 把JSON字符串转成对象
console.log(JSON.parse(localStorage.getItem('user'))); //{name: 'Anne', age: 29, gender: '女'}
1. 记住用户名 案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>记住用户名title>
<style>
style>
head>
<body>
<input type="text" placeholder="请输入用户名" class="username">
<input type="checkbox" name="" class="checkbox">
<script>
var username = document.querySelector('.username')
var checkbox = document.querySelector('.checkbox')
// 先判断有没有存储的 username
if (localStorage.getItem('username')){
username.value = localStorage.getItem('username')
checkbox.checked = true
}
// 如果复选框勾选就存储用户名 如果取消就移出用户名
checkbox.addEventListener('change',function(){
if (this.checked){
localStorage.setItem('username',username.value)
} else {
localStorage.removeItem('username')
}
})
script>
body>
html>
八、正则表达式
正则表达式: 是一种匹配字符的逻辑公式，主要是匹配字符串中的字符。
1. 常用匹配符号 和 修饰符
匹配符：
// a. ^ 表示以某个字符开头的(开头不能有其他任何的字符)
const reg1 = /^hello/; // 匹配字符以hello开头的hello字符串
// b. $ 匹配以某个字符结尾(结尾不能有其他任何的字符)
const reg2 = /css$/; // 匹配以css结尾的css字符串
// c. \b 匹配单词是否到边界(单词后面没有其他任意字符，可以有空格)
const regc3 = /java\b/g
修饰符：
- g 全局匹配，查询字符串中的所有。
2. i 不区分大小字母。大小写字母都会匹配
3. m 多行匹配，匹配多行中的字符
4. u 字符按照unicode编码匹配
2. 正则表达式的模式
// a. [] 范围查询，查询[]里面包含的单个字符
const reg3 = /[ak]/g // 查询a或者l字符
console.log(str.match(reg3))
// b. - 表示一段连续的内容
const reg = /[0-9a-z]/ig // 查询所0-9的所有数字,A-z查询所有的字母，不区分大小写
// const reg = /[0-9A-z]/g // 从大A - 小z
// const reg = /[0-9a-zA-Z]/g
// c. [^a] 查询除了中括号里面的所有内容
const reg5 = /[^a-z]/ig // 查询字符串里面a-z(不区分大小写)的以外的所有字符
// d. | 分隔正则逻辑(或的关系)
const reg6 = /(hello)|java/g // 查询hello或者java字符串，()表示一个整体
// e. \ 转义符号，正则表达式的内置关键字符如果要作为字符串匹配，需要添加\转义符
const reg7 = /\[java\]/ // 匹配[java],而不是作为正则表达式符号
const reg8 = /\//g // 匹配 /符号
3. 元字符(匹配逻辑简写)
// 1. \d 匹配所有的数字 等价：/[0-9]/g
const rega = /\d/g
// 2. \D 匹配所有的非数字 等价：/[^0-9]/g
const regb = /\D/g
// 3. \w 匹配数字，字母，下划线 等价：/[0-9A-z_]/g
const regc = /\w/g
// 4. \W 匹配非数字\字母\下划线的字符 等价：/[^0-9A-z_]/g
const regd = /\w/g
// 5. \s 匹配所有的空白字符串(空格)
const rege = /\s/g
// 6. .表示任意字符
const regf = /./g // 匹配所有的字符
// 7. u修饰符匹配中文字符(内部其实是去匹配中文字符对应的unicode编码)
const regg = /\p{Unified_Ideograph}/gu // 匹配所有的中文字符
4. 量词(匹配字符串出现指定的次数)
// 1. + 表示匹配字符 >=1 个以上
var rega1 = /go+d/g // 匹配gd中间带有o的字符串
// 2. * 表示匹配字符0个以上(最少是0个)
var rega2 = /go*d/g // 匹配gd中间可以有o也可以没有o的字符串
// 3. ? 表示0个或者1个
var rega3 = /go?d/g // gd中间有1个o或者没有o的字符串
// 4. {min,max} 自定义匹配数量，min是最小数量，max是最大数量
var regb1 = /go{1,3}d/g // 匹配gd之间有1-3个o的字符串
var regb2 = /go{3}d/g // 匹配gd之间只有3个o的字符串
var regb3 = /go{3,}d/g // 匹配gd之间最少有3个o的字符串
5. 正则表达式对象
字符串的test(),match(),search(),replace()可以使用正则表达式对象
1. test() 检查是否满足正则对象规则
正则表达式的test(str) 检查str字符串是否满足正则对象规则，满足返回true，不满足返回false
// 例: 校验手机号码规则
const reg = /^1[3-9]\d{9}$/
function ipone(num){
if (reg.test(num)){
console.log("手机号码正确");
} else {
console.log("手机号码格式错误");
}
}
console.log(ipone(13555555547));
// 例: 用户名注册用户名的规则:
// 以字母开头，第二位开始可以是数字，字母下划线,-,.的组合。用户名长度是4-8位
const userReg = /^[a-z][\w-\.]{3,7}$/i
const u1 = "w888"
console.log(userReg.test(u1));
2. match() 返回满足正则的数组
const str = "124 GoodJGsiwncKK 883 *4*"
// 查询数字和所有的字母
const reg = /[0-9a-z]/ig
console.log(str.match(reg));
3. replace() 替换字符串
str = str.replace(rege,"") //替换字符串里面所有的空格为""
6. 断言(环视)
预判某个位置是某个字符。也叫零宽断言，预判位置的字符不会出现在查询结果
// a1 char(?=exp) 0宽正预测(先行预测)。判断char字符后面必需符合给定的正则表达式
var str6 = "1hello-world 2hello-js 3hello-html";
var regd1 = /2hello(?=-js)/g; // 匹配hello字符串后面是-js的hello字符
console.log(str6.match(regd1))
// a2 char(?!exp) 0宽负预测先行断言(char字符后面不满足exp正则表达式)
var regd2 = /\dhello(?!-js)/g; // 匹配hello后面没有接-js的hello字符串
console.log(str6.match(regd2))
// a3 (?<=exp)char 0宽正预测回顾断言(char字符左边是否符合某个正则表达式)
var regd3 = /(?<=2hello-)\w+/g; // 查询左是2hello-字符串的字符
console.log(str6.match(regd3))
// a4 (?
var regd4 = /(?/g; // 查询左边不是2hello-字符串的字符
console.log(str6.match(regd4))
7. 常用正则表达式的规则
// 1.验证用户名 6-10位
const reg = /^\w{6,10}$/
// 2. 手机号验证 11位手机号码
const reg = /^1[3-9]\d{9}$/
// 3. 验证码 6位数字
const reg = /^\d{6}$/
// 4. 密码 6~20位数字字母符号
const reg = /^[\w-]{6,20}$/
// 企业邮箱
var emailReg = /^(?!.*\.\-)^(?!.*\-\.)\w+[-\.\w]*@([0-9A-z]+\.[0-9A-z]+)+$/
// 身份证
const reg2 = /^\d{17}[\dX]$/gi
// 复杂密码校验
// 至少包含小写字母/大写字母/数字，字母下划线的组合的4-8位密码
const pwdReg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{4,8}$/
const pwd = "123Z2a2"
三、移动端
一、touch 触摸事件对象
// 1. touchstart手指触摸DOM元素事件
div.addEventListener('touchstart',function(e){
console.log(e);
/**
* 1. touches 正在触摸屏幕的手指列表
* 2. targetTouches 正在触摸当前DOM元素的手指列表(常用)
* 3. changedTouches 手指状态发生了改变的列表 从无到有 或 从有到无
*/
// 可以拿到第一个手指触摸的相关信息 坐标等等
console.log(e.targetTouches[0]);
})
// 2. touchmove手指在DOM元素身上移动事件
div.addEventListener('touchmove',function(e){
console.log('move~~');
})
// 3. touchend 手指离开DOM元素
div.addEventListener('touchend',function(e){
console.log(e);
//当手指离开屏幕的时候，就没有 touches 和 targetTouches 列表
// 但会存在 changedTouches
})
1. 在移动端移动DOM元素
var div = document.querySelector('div')
// 获取手指的初始坐标 （声明全局变量方便后面使用）
var startX = 0
var startY = 0
// 获取盒子原来的位置
var x = 0
var y = 0
div.addEventListener('touchstart',function(e){
// 第一个手指的坐标
startX = e.targetTouches[0].pageX
startY = e.targetTouches[0].pageY
// 盒子的初始值
x = this.offsetLeft
y = this.offsetTop
})
div.addEventListener('touchmove',function(e){
// 手指移动的距离 = 手指移动的坐标 - 开始手指的坐标
var moveX = e.targetTouches[0].pageX - startX
var moveY = e.targetTouches[0].pageY - startY
// 盒子移动的距离 = 盒子原来的位置 + 手指移动的距离
this.style.left = x + moveX + 'px'
this.style.top = y + moveY + 'px'
e.preventDefault() // 阻止屏幕滚动的默认行为
})