概念：BOM (Browser Object Model ) 是浏览器对象模型
window对象
-
window对象是一个全局对象，也可以说是JavaScript中的顶级对象
-
像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
-
所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
-
window对象下的属性和方法调用的时候可以省略window
定时器-延迟函数
JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法： setTimeout(回调函数, 延迟时间)
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window
清除延时函数： clearTimeout(timerId)
注意点
-
延时函数需要等待,所以后面的代码先执行
-
返回值是一个正整数，表示定时器的编号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script>
//开启延时函数
// setTimeout(回调函数，延迟时间) 只执行一次
const bu = document.querySelector("button");
bu.addEventListener("click", function () {
clearTimeout(time);
});
let time = setTimeout(function () {
console.log("666");
}, 3000);
</script>
</body>
</html>
案例：自动关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>5秒钟自动关闭广告</title>
<style>
body {
background-color: #07090c;
}
.ad {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.close {
position: absolute;
top: 95px;
right: 4px;
width: 20px;
height: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ad">
<img src="./images/ad.png" alt="" />
<span class="close"></span>
</div>
<script>
const img = document.querySelector(".ad img");
// console.log(img);
const close = document.querySelector(".close");
// console.log(close);
close.addEventListener("click", function () {
img.style.display = "none";
});
setTimeout(function () {
close.click();
}, 5000);
</script>
</body>
</html>
location对象
location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象
语法：location.属性
| 属性/方法 | 说明 |
|---|---|
| href | 属性，获取完整的 URL 地址，赋值时用于地址的跳转 |
| search | 属性，获取地址中携带的参数，符号 ？后面部分 |
| hash | 属性，获取地址中的啥希值，符号 # 后面部分 |
| reload() | 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 |
<body>
<form>
<input type="text" name="search"> <button>搜索</button>
</form>
<a href="#/music">音乐</a>
<a href="#/download">下载</a>
<button class="reload">刷新页面</button>
<script>
// location 对象
// 1. href属性 （重点） 得到完整地址，赋值则是跳转到新地址
console.log(location.href)
// location.href = 'http://www.itcast.cn'
// 2. search属性 得到 ? 后面的地址
console.log(location.search) // ?search=笔记本
// 3. hash属性 得到 # 后面的地址
console.log(location.hash)
// 4. reload 方法 刷新页面
const btn = document.querySelector('.reload')
btn.addEventListener('click', function () {
// location.reload() // 页面刷新
location.reload(true) // 强制页面刷新 ctrl+f5
})
</script>
</body>案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//1.href属性
//1.1获取整个地址栏内容
console.log(location.href);
//赋值
// location.href = "http://www.baidu.com";
//2.search属性
//获取查询参数 在地址栏后面采用？键=值&键=值方式
console.log(location.search);
//3.hash属性 获取的是地址栏中的hash值#
//vue会用
console.log(location.hash);
//4.reload 刷新页面
// 如果传参数true则代表强制刷新 从服务器获取最新的数据
console.log(location.reload);
</script>
</body>
</html>
navigator对象
navigator是对象，该对象下记录了浏览器自身的相关信息
常用属性和方法：
-
通过 userAgent 检测浏览器的版本及平台
// 检测 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'
}})();
histroy对象
history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等
使用场景 :history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。
常见方法：
<body>
<button class="back">←后退</button>
<button class="forward">前进→</button>
<script>
// histroy对象
// 1.前进
const forward = document.querySelector('.forward')
forward.addEventListener('click', function () {
// history.forward()
history.go(1)
})
// 2.后退
const back = document.querySelector('.back')
back.addEventListener('click', function () {
// history.back()
history.go(-1)
})
</script>
</body>
案例：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>
</head>
<body>
<a href="http://www.baidu.com">5秒后跳转到首页</a>
<script>
const a = document.querySelector("a");
a.addEventListener("click", function () {
location.href = "http://www.baidu.com";
});
let n = 5;
let time = setInterval(function () {
n--;
a.innerHTML = `${n}秒后跳转到首页`;
if (n <= 0) {
clearInterval(time);
location.href = "http://www.baidu.com";
}
}, 1000);
</script>
</body>
</html>
本地存储（重点）
本地存储：将数据存储在本地浏览器中，常见的使用场景：
https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失
好处：
1、页面刷新或者关闭不丢失数据，实现数据持久化
2、容量较大，sessionStorage和 localStorage 约 5M 左右
localStorage（重点）
作用: 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失
特性：以键值对的形式存储，并且存储的是字符串， 省略了window
语法：
- 存储数据：localStorage.setItem(key,value)
- 读取数据：localStorage.getItem(key)
- 删除数据：localStorage.removeItem(key)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// //本地存储localStorage(持久化存储)
// //1,存数据 localStorage.setItem(键,值) 只能存储字符串
// localStorage.setItem("uname", "666");
// //2，取数据
// //localStorage.getItem(键) 根据键去本地存储找到这个键对应的值
// localStorage.getItem("uname");
// //3，删除数据，localStorage.removeItem(键)
// localStorage.removeItem("uname");
//二,会话存储sessionStorage 浏览器开启有效，关闭也面失效
</script>
</body>
</html>
sessionStorage
特性：
-
用法跟localStorage基本相同
- 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除
语法：
存储：sessionStorage.setItem(key,value)
获取：sessionStorage.getItem(key)
删除：sessionStorage.removeItem(key)
localStorage 存储复杂数据类型
问题：本地只能存储字符串,无法存储复杂数据类型.
解决：需要将复杂数据类型转换成 JSON字符串,在存储到本地
语法：JSON.stringify(复杂数据类型)
JSON字符串：
-
首先是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>
</head>
<body>
<script>
//因为不能直接存储复杂数据到本地当中，所以可以采用间接方式
const obj = {
uname: "oyyy",
age: 19,
};
//1,需要将复杂数据进行转换JSON格式(字符串格式===常用于前后端交互)
//JSON.stringify(对象)
const JSonstr = JSON.stringify(obj); //转换为JSON字符串
console.log(JSonstr);
localStorage.setItem("obj", JSonstr);
// localStorage.setItem('obj',obj)
//2.将本地存储的数据取出来，获取用户名
// JSON.parse(JSON字符串) 这样才能获取对象，从而获取里面的元素
const ob = localStorage.getItem("obj");
const result = JSON.parse(ob);
console.log(result.uname);
</script>
</body>
</html>
问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用
解决： 把取出来的字符串转换为对象
语法：JSON.parse(JSON字符串)
<body>
<script>
// 本地存储复杂数据类型
const goods = {
name: '小米',
price: 1999
}
// localStorage.setItem('goods', goods)
// console.log(localStorage.getItem('goods'))
// 1. 把对象转换为JSON字符串 JSON.stringify
localStorage.setItem('goods', JSON.stringify(goods))
// console.log(typeof localStorage.getItem('goods'))
// 2. 把JSON字符串转换为对象 JSON.parse
console.log(JSON.parse(localStorage.getItem('goods')))
</script>
</body>JS的内置对象Array
Array是JS的内置对象，其中这个对象用很多方法，例如forEach，map，join方法。
遍历数组forEach
语法：arr.forEach(function (element, index) { /* … */ })
- arr是数组
- element是数组元素
- index是数组元素的索引号
数组map 方法
使用场景：map 可以遍历数组处理数据，并且返回新的数组
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (ele, index) {
// console.log(ele) // 数组元素
// console.log(index) // 索引号
return ele + '颜色'
})
console.log(newArr)
</script>
</body>注意：
map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值，forEach没有返回值（undefined）
数组join方法
作用：join() 方法用于把数组中的所有元素转换一个字符串
语法：
<body>
<script>
const arr = ['red', 'blue', 'pink']
// 1. 数组 map方法 处理数据并且 返回一个数组
const newArr = arr.map(function (ele, index) {
// console.log(ele) // 数组元素
// console.log(index) // 索引号
return ele + '颜色'
})
console.log(newArr)
// 2. 数组join方法 把数组转换为字符串
// 小括号为空则逗号分割
console.log(newArr.join()) // red颜色,blue颜色,pink颜色
// 小括号是空字符串，则元素之间没有分隔符
console.log(newArr.join('')) //red颜色blue颜色pink颜色
console.log(newArr.join('|')) //red颜色|blue颜色|pink颜色
</script>
</body>字符串截取
语法：字符串.substring(起始索引号, [结束索引号])
正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）
使用场景： 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配) ，过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
正则基本使用
1，定义规则
const reg = /表达式/
- 其中
/ /是正则表达式字面量 - 正则表达式也是
对象
2，使用正则
test()方法用来查看正则表达式与指定的字符串是否匹配- 如果正则表达式与指定的字符串匹配 ，返回
true，否则false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
//匹配字符串中的规则
const str = "oyyyhxm";
//使用正则
const ret = /oyyys/;
//2,使用规则 正则.test(字符串)
//字符串中存在这个字符则true否则false
console.log(ret.test(str));
</script>
</body>
</html>
元字符
1，普通字符:
- 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
- 普通字符只能够匹配字符串中与它们相同的字符。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
2，元字符(特殊字符）
- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
注意：如果 ^ 和 $ 在一起，表示必须是精确匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/;
console.log(reg.test("web前端")); // true
console.log(reg.test("前端web")); // false
console.log(reg.test("前端web学习")); // false
console.log(reg.test("we")); // false
// 2. 匹配结束的位置 $
const reg1 = /web$/;
console.log(reg1.test("web前端")); // false
console.log(reg1.test("前端web")); // true
console.log(reg1.test("前端web学习")); // false
console.log(reg1.test("we")); // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/;
console.log(reg2.test("web前端")); // false
console.log(reg2.test("前端web")); // false
console.log(reg2.test("前端web学习")); // false
console.log(reg2.test("we")); // false
console.log(reg2.test("web")); // true
console.log(reg2.test("webweb")); // flase
//边界符 ^开头 $结尾
// console.log(/^oy/.test("oyyy"));
// console.log(/^oy/.test("yy"));
// console.log(/oy$/.test("oyyoy"));
// console.log(/oy$/.test("oyyy"));
// console.log(/^oy$/.test("oy"));
// console.log(/^oy$/.test("oyyoy"));
//量词符
//1，* 重复出现0次或多次
// console.log(/^o*$/.test("o"));
// //2,+ 出现一次或多次
// console.log(/^o+$/.test("o"));
// //3,? 出现0或一次
// console.log(/^o？$/.test("o"));
//4，{n}出现n次
//5，{n,}出现n次以上
//6,{n,m} 出现n次以上，m以下 包含n和m
//范围符
</script>
</body>
</html>
量词
量词用来设定某个模式重复次数
注意： 逗号左右两侧千万不要出现空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/;
console.log(reg1.test("")); // true
console.log(reg1.test("w")); // true
console.log(reg1.test("ww")); // true
console.log("-----------------------");
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/;
console.log(reg2.test("")); // false
console.log(reg2.test("w")); // true
console.log(reg2.test("ww")); // true
console.log("-----------------------");
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/;
console.log(reg3.test("")); // true
console.log(reg3.test("w")); // true
console.log(reg3.test("ww")); // false
console.log("-----------------------");
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/;
console.log(reg4.test("")); // false
console.log(reg4.test("w")); // flase
console.log(reg4.test("ww")); // false
console.log(reg4.test("www")); // true
console.log(reg4.test("wwww")); // false
console.log("-----------------------");
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/;
console.log(reg5.test("")); // false
console.log(reg5.test("w")); // false
console.log(reg5.test("ww")); // true
console.log(reg5.test("www")); // true
console.log("-----------------------");
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/;
console.log(reg6.test("w")); // false
console.log(reg6.test("ww")); // true
console.log(reg6.test("www")); // true
console.log(reg6.test("wwww")); // true
console.log(reg6.test("wwwww")); // false
// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败
</script>
</body>
</html>
范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/;
console.log(reg1.test("a")); // true
console.log(reg1.test("b")); // true
console.log(reg1.test("c")); // true
console.log(reg1.test("d")); // false
console.log(reg1.test("ab")); // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/;
console.log(reg2.test("a")); // true
console.log(reg2.test("p")); // true
console.log(reg2.test("0")); // false
console.log(reg2.test("A")); // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/;
console.log(reg3.test("B")); // true
console.log(reg3.test("b")); // true
console.log(reg3.test(9)); // true
console.log(reg3.test(",")); // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/;
console.log(reg4.test("abcd1")); // false
console.log(reg4.test("abcd12")); // true
console.log(reg4.test("ABcd12")); // true
console.log(reg4.test("ABcd12_")); // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/;
console.log(reg5.test("a")); // false
console.log(reg5.test("A")); // true
console.log(reg5.test(8)); // true
</script>
</body>
</html>
字符类
某些常见模式的简写方式，区分字母和数字
替换和修饰符
replace 替换方法，可以完成字符的替换
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
</script>
</body>修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
-
i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
-
g 是单词 global 的缩写，匹配所有满足正则表达式的结果
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
// 2. 修饰符 g 全部替换
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
</body>正则插件
vscode插件中搜索
change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
判断是否有类
语法：元素.classList.contains('类名')
元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
