WebApI(二)
webapi_day05 网页特效
1.1 页面滚动事件和加载事件
1.1.1 滚动事件
当页面滚动时触发的事件
事件名：scroll
样例，监听整个页面滚动：
window.addEventListener('scroll',funtion(){
//执行操作
})
可以给window或者document添加
scroll事件
1.1.2 加载事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
监听页面所有资源加载完毕
window.addEventListener('load',function(){
//执行操作
})
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded',function(){
//执行操作
})
两个加载事件的区别
load事件
给window加，监听整个页面资源，
DOMContentLoaded
给document加，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
1.2 scroll
element.scrollTop
//返回被卷曲的上侧距离，返回值不带单位 可修改
element.scrollLeft
//返回被卷曲的左侧距离，返回值不带单位 可修改
element.scrollWidth
//返回自身的实际宽度，不包含border，含padding，返回值不带单位
element.scrollHeight
//返回自身的实际高度，不包含border，返回值不带单位
1.3 offset
tips：使用offsetWidth返回的自身元素包含内边距padding、边框border、内容区的宽度width，同样的返回值不带单位
1.4 client
<script>
// 当窗口变化的时候触发的事件
window.addEventListener('resize', function () {
// console.log(111)
let w = document.documentElement.clientWidth
// console.log(document.documentElement.clientWidth)
if (w >= 1920) {
document.body.style.backgroundColor = 'pink'
} else if (w > 540) {
document.body.style.backgroundColor = 'hotpink'
} else {
document.body.style.backgroundColor = 'deeppink'
}
})
</script>
| offset | 包含边框+框内内容 | 常用于获取元素位置 |
|---|---|---|
| client | 不包含边框+框内内容 | 常用于获取元素大小 |
| scroll | 不包含边框+框外超出内容 | 常用于获取滚动距离 |
| 页面滚动距离使用window.pageXOffset获取 |
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 150px;
height: 150px;
background-color: pink;
overflow: auto;
padding: 10px;
border: 10px solid red;
margin: 100px;
}
</style>
</head>
<body>
<div>
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
我有很多很多的内容哦
</div>
<script>
// scrollWidth scrollHeight 内容 宽高 （了解）
let div = document.querySelector('div')
console.log(div.scrollWidth) // 150 不带单位
console.log(div.scrollHeight) // 336 不带单位
console.log('----------------------------')
// offset 盒子元素的大小 = 盒子本身的宽度和高度 + padding + border
console.log(div.offsetWidth) // 150 不带单位
console.log(div.offsetHeight) // 150 不带单位
// console.log(div.offsetTop) //
// console.log(div.offsetLeft)
// client 当前可视区域 不包含滚动条 边框等等
console.log('----------------------------')
console.log(div.clientWidth)
console.log(div.clientHeight)
console.log(div.clientTop) // 边框的宽度 了解 呵呵
console.log(div.clientLeft)
// 2. 被卷去的头部和左侧
// div.addEventListener('scroll', function () {
// console.log(document.querySelector('div').scrollTop)
// })
</script>
</body>
1.5 综合案例焦点轮播
<script>
//获取元素
let lis = document.querySelectorAll('.indicator li')
let piclis = document.querySelectorAll('.slides ul li')
let text = document.querySelector('.extra h3')
let next = document.querySelector('.next')
let prev = document.querySelector('.prev')
let main = document.querySelector('.main')
//1.鼠标经过小图片
//给多个li绑定事件
for(let i = 0; i < lis.length; i++){
//
lis[i].addEventListener('mouseenter',function () {
document.querySelector('.indicator .active').classList.remove('active')
this.classList.add('active')
//2.上面图片跟随变化
document.querySelector('.slides ul .active').classList.remove('active')
piclis[i].classList.add('active')
//文字跟随变化
text.innerHTML = `这是第${i + 1}张图片的信息`
index = i
})
}
//2.点击右侧按钮进切换
//需要一个变化量index,进行控制
let index = 0
next.addEventListener('click',function () {
index++
//选出index小图片，来操作
if(index === lis.length) {
index = 0
}
common()
})
//3.点击左侧按钮进切换
prev.addEventListener('click',function () {
index--
//选出index小图片，来操作
if(index < 0) {
index =9
}
common()
})
//4.封装函数
function common() {
document.querySelector('.indicator .active').classList.remove('active')
lis[index].classList.add('active')
//选出index大图片
document.querySelector('.slides ul .active').classList.remove('active')
piclis[index].classList.add('active')
text.innerHTML = `这是第${index + 1}张图片的信息`
}
//5.开启定时器
let timer = setInterval(function () {
next.click()
},1000)
//6.鼠标经过停止定时器
main.addEventListener('mouseenter',function () {
clearInterval(timer)
})
main.addEventListener('mouseleave',function () {
timer = setInterval(function () {
next.click()
},1000)
})
</script>
1.6 综合案例 电梯导航
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.aside {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.item {
height: 40px;
line-height: 40px;
text-align: center;
padding: 0 10px;
cursor: pointer;
}
.active {
background-color: red;
color: #fff;
}
.content {
width: 660px;
margin: 400px auto;
}
.neirong {
height: 300px;
margin-bottom: 20px;
color: #fff;
}
.content1 {
background-color: red;
}
.content2 {
background-color: blue;
}
.content3 {
background-color: orange;
}
.content4 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="aside">
<div class="item active">男装/女装</div>
<div class="item">儿童服装/游乐园</div>
<div class="item">电子产品</div>
<div class="item">电影/美食</div>
</div>
<div class="content">
<div class="neirong content1">男装/女装</div>
<div class="neirong content2">儿童服装/游乐园</div>
<div class="neirong content3">电子产品</div>
<div class="neirong content4">电影/美食</div>
</div>
<script>
let items = document.querySelectorAll('.item')
let neirong = document.querySelectorAll('.neirong')
for(let i = 0; i < items.length; i++){
items[i].addEventListener('click',function () {
document.querySelector('.aside .active').classList.remove('active')
this.classList.add('active')
//
document.documentElement.scrollTop = neirong[i].offsetTop
})
}
</script>
</body>
webapi_day06 Bom对象
2.1 Bom简介
- window对象是一个全局对象，也可以说是JavaScript中的顶级对象
- 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的
- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
- window对象下的属性和方法调用的时候可以省略window
2.2 延时器和定时器
定时器
创建定时器
window.setInterval(方法类型，间隔时间（1000=1秒）)
var timer=window.setInterval(func,2000);
var i=0
function func(){
console.log("你好",i)
i+=1
}
清除定时器
window.clearInterval(定时器名)
function ting(){
//清除定时器
window.clearInterval(timer);
}
重置定时器
function reset1(){
//重置定时器，重新给定参数，清除定时器，重新创建定时器
i=0;
window.clearInterval(timer);
timer=window.setInterval(func,2000);
}
延时器
只执行一次
创建延时器
window.setTimeout(函数类型，延迟时间)
var timer1=window.setTimeout(function (){
console.log("你好啊！！！");
},3000);
清除延时器
window.clearTimeout(延时器名称)
function func(){
//清除延时器
window.clearTimeout(timer1);
<script>
// 利用递归函数 模拟了 setinterval
let div = document.querySelector('div')
function fn() {
div.innerHTML = new Date().toLocaleString()
setTimeout(fn, 1000)
}
fn()
</script>
2.3 js执行机制
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript 这门脚本语言诞生的使命所以JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
同步
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步
做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。
异步
你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事
情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。
同步任务:
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务:
异步任务指的是，不进入主线程、而进入"任务队列"（Event queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
常见的异步任务
1. setTimeout、setInterval
2. Ajax请求一般采用异步，当然也可以设置为同步
3. promise.then
4. 回调函数可以理解为异步，但不是严格的异步操作
5.事件监听。即监听某个事件，当事件发生时，再执行相应的操作（比如点击、mouseover等）
2.4 事件循环
- 同步任务直接放入到主线程执行，异步任务（点击事件，定时器，ajax等）挂在后台执行，等待I/O事件完成或行为事件被触发。
- 系统后台执行异步任务，如果某个异步任务事件（或者行为事件被触发），则将该任务添加到任务队列，并且每个任务会对应一个回调函数进行处理。
- 这里异步任务分为宏任务与微任务，宏任务进入到宏任务队列，微任务进入到微任务队列。
- 执行任务队列中的任务具体是在执行栈中完成的，当主线程中的任务全部执行完毕后，去读取微任务队列，如果有微任务就会全部执行，然后再去读取宏任务队列
- 上述过程会不断的重复进行，也就是我们常说的事件循环（
Event-Loop）
2.5 location 对象
- location.href: 返回当前页面的完整的URL地址；
- location.search: 返回URL后面的参数(类似于"?name=lc&age=20")；
- location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)；
- location.host: 返回页面的域名及端口号；
- location.hostname: 返回页面的域名；
- location.port: 返回页面的端口号；
- location.pathname: 返回页面中的路径或文件名；
- location.origin: 返回URL源地址；
- location.hash: 返回URL 散列值（#后面的内容），如果没有则为空字符串。
以百度搜索后的url地址取一小段为例：
// 以https://www.baidu.com/s?wd=location&rsv_spt=1#11为例
location.href; //'https://www.baidu.com/s?wd=location&rsv_spt=1'
location.protocol; // 'https:'
location.host; // 'www.baidu.com' 如果有端口: 'www.baidu.com:port'
location.hostname; // 'www.baidu.com'
location.port; //''
location.pathname; // '/s'
location.search; // '?wd=location&rsv_spt=1'
location.origin; // 'https://www.baidu.com'
location.hash; // '#11'
从上面我们可以看到location.search获取到的是一串字符串，但是显然并不是我们日常开发中想要的数据格式，如果想要将获取到的参数处理成类似对象那种键值的形式要怎么做呢？下面我来介绍一种自己常用的一种方法。
(这里涉及到数组的相关方法和Map，不熟悉的话可以查看小shy之前的博客，里面有很详细的讲解哦。)
// 1. 获取所有参数
// 2. 去掉? -> 以&为分隔符将字符串分成数组['wd=location', 'rsv_spt=1']
// 3. 再把数组中的每一项以=分隔成[['wd', 'location'], ['rsv_spt', '1']]
// 4. 这种数据格式是不是很熟悉，对，可以放入Map结构中
// 注意：url参数通常是被编码后的格式，所以处理前先将参数解码
let search = decodeURIComponent(location.search); // ?wd=location&rsv_spt=1 以此为例
const searchMap = new Map(search.slice(1).split("&").map(v => v.split("=")));
searchMap.get("wd"); // location
- 设置location属性
location的属性不仅可以获取，也可以设置相关属性，部分属性设置后会导致重新加载新的URL。
这里以https://www.baidu.com为例：
location.hash = "#123"; // url: https://www.baidu.com/#123
// 参数修改
location.search = "?wd=123" // url: https://www.baidu.com/?wd=location 会重新加载
// 修改host
location.hash = "www.bilibili.com"; // url:https://www.bilibili.com/ 页面会重新加载，跳转到bilibili
// 修改href
location.href = "https://www.bilibili.com/"; // url: https://www.bilibili.com 是否会跳转可想而知
- location常用方法
- location.assign(url): 跳转到url，浏览器会记录历史(可以后退)；
- location.replace(url): 跳转到url，浏览器不会记录历史(不可以后退)；
- location.reload(boolean): 重新加载当前显示的页面，不传参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以给 reload()传个 true。
以当前页面为百度为例，如下：
location.assign("https://www.bilibili.com");
可以后退回百度；
location.replace("https://www.bilibili.com");
无法后退；
// 正常重新加载
location.reload();
// 强制从服务器重新加载
location.reload(true);
2.6 navigator对象
<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>
2.6 history 对象
详解：https://www.jb51.net/article/105062.htm
2.7 swiper使用
1.首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="dist/css/swiper-bundle.min.css">
</head>
<body>
...
<script src="dist/js/swiper-bundle.min.js"></script>
...
</body>
</html>
2.添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在Swiper容器之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper {
width: 600px;
height: 300px;
}
4.初始化Swiper。
<script>
var mySwiper = new Swiper ('.swiper', {
direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
具体参见api文档：https://www.swiper.com.cn/api/index.html
2.8 本地存储
localStorage
生命周期永久生效，除非手动删除 否则关闭页面也会存在
可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用
<script>
//存储数据 localStorage.setItem('键', '值')
localStorage.setItem('uname', 'pink老师')
localStorage.setItem('age', 18)
//获取数据
localStorage.getItem('键')
console.log(localStorage.getItem('uname'))
//删除数据
localStorage.removeItem('uname')
// 1. 存储复杂数据类型（引用数据类型）
let obj = {
uname: '刘德华',
age: 17,
address: '黑马程序员'
}
// console.log(JSON.stringify(obj))
//（1） 复杂数据类型一定要转换为json字符串在进行存储 （因为本地存储只能存储字符串）
localStorage.setItem('obj', JSON.stringify(obj))
// AJAX
// JSON 属性和值都是双引号进行包含
// let obj = {
// "uname": "刘德华",
// "age": "17",
// "address": "黑马程序员"
// }
// （2） 取数据 可以使用 JSON.parse() 将json字符串转换为对象
// console.log(typeof localStorage.getItem('obj'))
console.log(JSON.parse(localStorage.getItem('obj')))
let object = {
age: 18
}
// 本地存储只能存储字符串 所以我要转换 转换为JSON格式的字符串
localStorage.setItem('key', JSON.stringify(object))
// 获取的过来的值是字符串，不是对象了没有办法直接使用，因此我们首先吧字符串转换为对象
// JSON.parse()
console.log(JSON.parse(localStorage.getItem('key')))
</script>
2.8.1 学生信息表本地存储版
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname">
年龄：<input type="text" class="age">
性别: <select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary">
就业城市：<select name="city" id="" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//读取本地存储的数据 封装成函数
//如果没有数据，则默认写入三条数据
function getLocalData() {
let data = localStorage.getItem('data')
if(data) {
return JSON.parse(data)
}else {
let arr = [
{ stuId: 1001, uname: '欧阳霸天', age: 19, gender: '男', salary: '20000', city: '上海' },
{ stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' },
{ stuId: 1003, uname: '诸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' },
]
localStorage.setItem('data',JSON.stringify(arr))
}
}
//获取元素
let tbody = document.querySelector('tbody')
//添加数据按钮
let add= document.querySelector('.add')
//获取各个元素
let uname = document.querySelector('.uname')
let age = document.querySelector('.age')
let gender = document.querySelector('.gender')
let salary = document.querySelector('.salary')
let city = document.querySelector('.city')
function render() {
//读取本地存储的数据
let arr = getLocalData()
//先干掉以前的数据
tbody.innerHTML = ''
//根据数据的条数增加tr
for(let i = 0; i < arr.length; i++){
//创建tr
let tr = document.createElement('tr')
tr.innerHTML = `<tr>
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id = "${i}">删除</a>
</td>
</tr> `
// tr.children[6].children[0].addEventListener('click',function() {
// alert('11')
// })
tbody.appendChild(tr)
//复原所有的表单数据
uname.value = age.value = salary.value = ''
gender.value = '男'
city.value = '北京'
}
}
render()
add.addEventListener('click',function () {
//读取本地存储的数据
let arr = getLocalData()
//获取id
let id = arr[arr.length - 1].stuId
id++
//获取表单的值，追加到数组arr
arr.push({
stuId:id,
uname:uname.value,
age: age.value,
gender:gender.value,
salary:salary.value,
city:city.value
})
//存储
localStorage.setItem('data',JSON.stringify(arr))
console.log(arr);
//重新渲染数据
render()
})
//删除操作，删除的也是数组里面的数据 用事件委托
tbody.addEventListener('click',function (e) {
//点击a标签进行删除
if(e.target.tagName === 'A'){
console.log(e.target.dataset.id);
if(e.target.dataset.id === '0') {
alert('不允许删除')
return
}
//读取本地存储的数据
let arr = getLocalData()
//删除数据 arr.splice()
arr.splice(e.target.dataset.id,1)
//存储
localStorage.setItem('data',JSON.stringify(arr))
render()
}
})
</script>
</body>
2.9 自定义属性
<body>
<div class="box" data-index="0" data-name="andy"></div>
<script>
// 设置自定义属性
let box = document.querySelector('.box')
// box.setAttribute('myid', 10)
// console.log(box.getAttribute('myid'))
console.log(box.dataset)
console.log(box.dataset.index)
</script>
</body>
webapi_day07 正则表达式
1.正则表达式
正则表达式，全称“Regular Expression”，在代码中常简写为regex、regexp或RE。正则表达式，就是用某种模式去匹配一类字符串的公式。
1. 显式定义（构造函数）
let 变量名 = new RegExp("正则表达式模式");
2. 隐式定义(字面量)
let 变量名 = /正则表达式模式/
12345
2.正则表达式常用方法
1.test
正则去匹配字符串，如果匹配成功就返回真，匹配失败返回假
写法：正则.test(字符串)
如：
var str='abcdef';
var re=/b/;
alert(re.test(str));
2.search
正则去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失败就返回-1
写法：字符串.search(正则)
如：
var str="abcdef";
var re=/b/;
alert(str.search(re));
//返回1
var re=/w/;
//返回-1
var re=/B/;
//返回-1
3.match
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null
写法：字符串.match(正则)
比如上面例子要找出数字
var str="dgfhfgh254bhku289fgdhdy675";
var re=/\d+/g;
alert(str.match(re));
//输出2
4.replace
正则去匹配字符串，匹配成功的字符被新的字符串替换
replace的写法：字符串.replace(正则,新字符串)
var str="aaa";
var re=/a/;
str=str.replace(re,"b");
alert(str);
//输出baa
5.exec
正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，index：表示第一个匹配的字符在原字符串中的位置，input:表示原字符串，groups：表示当初中命名的分组时匹配到的分组对象；如果匹配不成功，就返回null
写法：正则. exec(字符串)
比如上面例子要找出数字
var str="dgfhfgh254bhku289fgdhdy675";
var reg=/\d+/g;
alert(reg.exec(str));
//输出2
3.常用元字符
\d匹配数字，相当于[0-9]
\D匹配非数字，相当于[^0-9]
\w匹配字母或数字或汉字或下划线
\W匹配任意不是字母、数字、汉字或下划线的字符
\s匹配任意的空白符，如空格、换行符、制表符等
\S匹配任意不是空白符的字符
.(点号)匹配除了换行符以外的任意字符
[...]匹配方括号中的所有字符
[^...]匹配非方括号中的所有字符
4.正则表达式连接符
[0-9]匹配数字，等价于\d
[a-z]匹配英文小写字母
[A-Z]匹配英文大写字母
[0-9a-zA-Z]匹配数字或英文字母
5.限定符
+重复1次或更多次
*重复0次或更多次（任意次数)重复0次或1次（最多1次)
{n}重复n次
{n,}重复n次或更多次（最少n次)
{n,m}重复n到m次
6.定位符
^限定开始位置的字符
$限定结尾位置的字符
\b限定单词(字)边界的字符
\B限定非单词(字)边界的字符
7.修饰符
g: global 全文搜索，不添加，搜索到第一个匹配停止
i: ignore case 忽略大小写，默认大小写敏感
m: multiple lines 多行搜索
8.特殊转义符
正则特殊转义符
\f 匹配换页符
\n 匹配换行符
\r 匹配回车符
\t 匹配制表符
\v 匹配垂直制表符
\\ 匹配\
\" 匹配 "
\' 匹配 '
9.优先级顺序
\转义符
()、(?:)、(?=)、[]圆括号或方括号
*、+、?、{n}、{n,}、{n,m}限定符
^、$、lb、\B位置和顺序
| 选择符，“或”运算
//边界符
<script>
// console.log(/哈/.test('哈哈'))
// console.log(/哈/.test('二哈'))
// ^ 开头
console.log(/^哈/.test('二哈')) // false
console.log(/^哈/.test('我开心的哈哈大笑')) // false
console.log(/^哈$/.test('我开心的哈哈大笑')) // false
console.log(/^哈$/.test('哈哈')) // false
console.log(/^哈$/.test('哈')) // true 精确匹配
</script>
//量词
<script>
// console.log(/a/.test('a'))
// // * 量词 n >= 0
// console.log(/a*/.test(''))
// console.log(/a*/.test('a'))
// console.log(/a*/.test('aa'))
// console.log(/a*/.test('aaaaaaaa'))
// console.log(/a*/.test('b'))
// console.log('--------------------------')
// // + 量词 n >= 1
// console.log(/a+/.test(''))
// console.log(/a+/.test('a'))
// console.log(/a+/.test('aa'))
// console.log(/a+/.test('aaaaaaaa'))
// console.log(/a+/.test('b'))
// console.log('--------------------------')
// // ? 出现 0 || 1
// console.log(/^a?$/.test(''))
// console.log(/^a?$/.test('a'))
// console.log(/^a?$/.test('aa'))
console.log(/^a?$/.test('aaa'));
console.log('--------------------------')
// {n} 只能出现 n次 符号之间不要加空格
console.log(/^a{3}$/.test('aa'))
console.log(/^a{3}$/.test('aaa'))
console.log(/^a{3}$/.test('aaaa'))
// {n,} >= n
console.log(/^a{3,}$/.test('aa'))
console.log(/^a{3,}$/.test('aaa'))
console.log(/^a{3,}$/.test('aaaa'))
console.log('--------------------------')
// {n,m} >= n <= m
console.log(/^a{3,6}$/.test('aa'))
console.log(/^a{3,6}$/.test('aaa'))
console.log(/^a{3,6}$/.test('aaaa'))
console.log(/^a{3,6}$/.test('aaaaa'))
console.log(/^a{3,6}$/.test('aaaaaaaa'))
</script>
//字符类
<script>
// console.log(/abc/.test('abc'))
// console.log(/abc/.test('ab'))
// 字符类 []
// console.log(/[abc]/.test('abc'))
// console.log(/[abc]/.test(''))
// console.log(/[abc]/.test('andy'))
// console.log(/[abc]/.test('baby'))
// console.log(/[abc]/.test('cry'))
// console.log(/[abc]/.test('die'))
// 字符类 [-] 连字符
console.log(/^[abc]$/.test('abc'))
console.log(/^[abc]$/.test('a'))
console.log(/^[abc]$/.test('b'))
console.log(/^[abc]$/.test('c'))
console.log(/^[abc]$/.test('cc'))
// 26个英文字母选其中的一个
console.log(/^[a-zA-Z]$/.test('d'))
console.log(/^[a-zA-Z]$/.test('D'))
console.log(/^[a-zA-Z]$/.test('DD'))
console.log(/^[a-zA-Z0-9]$/.test('6'))
console.log(/^[a-zA-Z0-9-_]$/.test('6'))
console.log(/^abc+$/.test('cc'))
</script>
10.验证用户名
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./right.png) no-repeat left center;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
let input = document.querySelector('input')
let span = input.nextElementSibling
input.addEventListener('blur', function () {
if (/^[a-zA-Z0-9_,@]{6,16}$/.test(input.value)) {
span.className = 'right'
span.innerHTML = '要输正确'
} else {
span.className = 'error'
span.innerHTML = '只能要输6~16位字符'
}
})
</script>
浙公网安备 33010602011771号