文章目录
正则表达式
1 正则表达式(RegExp)概念
什么是正则表达式
正则表达式是由一些含有特殊含义的字符组成的字符串，这些含有特殊意义的字符称为元字符。
正则表达式的应用
校验一个字符串是否符合正则表达式定义的规则
2 元字符
案例1-基础用法
- 创建RegExp对象
方式1: 字面量语法
let re = /正则表达式/ ;
方式2: 构造函数
let re = new RegExp("正则表达式"]);
<script>
/**
* 什么是正则表达式
* 正则表达式是使用具有特殊含义的字符组成的字符串,具有特殊含义的字符称为元字符
* 正则表达式的作用
* 用来校验字符串是否符合正则表达式的规则
*
*
* 常用的元字符
* 预定义字符
* 数字 \d 或者 [0-9]
* 小写字母 [a-z]
* 大写字母 [A-Z]
* 字母 [a-zA-Z]
* 单词字符串 \w
* 数量词
* 0次或无限次 *
* 1次或无限次 +
* 0次或一次 ?
* m次 {m}
* m到n次 {m,n}
* m到无限次 {m,}
* 边界判断
* 开头 ^
* 结尾 $
*/
//1.验证出现的是否是2位数字
let str1 = "12";
//a.写正则表达式
let reg1 = /^[0-9][0-9]$/
//b.使用正则表示校验
let f1 = reg1.test(str1)
console.log(f1);
//2.验证数字出现5次
let str3 = "44445";
//a.写正则表达式
let reg2 = /^[0-9]{5}$/
//b.使用正则表达式校验
let f2 = reg2.test(str3)
console.log(f2);
//3.验证数字至少出现5次
let str4 = "444499999999999999999";
//a.写正则表达式
let reg3 = /^[0-9]{5,}$/
//b.使用正则表达式校验
let f3 = reg3.test(str4)
console.log(f3);
//4.验证数字出现5-10次
let str5 = "7895566666";
//a.写正则表达式
let reg4 = /^[0-9]{5,10}$/
//b.使用正则表达式校验
let f4 = reg4.test(str5)
console.log(f4);
//5.校验一个字符串是不是手机号 13 15 17 18 总共11位
//a.写手机号
let tel = "18571593511"
//b.写正则表达式
let reg5 = /^1[3578][0-9]{9}$/
//c.使用正则表达式校验
let f5 = reg5.test(tel)
console.log(f5);
//6.校验字符串是否符合规则，格式为5-10个字符，可以为字母，数字和下划线
let username = "adminA0_90";
//a.写正则表达式
let reg6 = /^\w{5,10}$/
//b.使用正则表达式做校验
let f6 = reg6.test(username)
console.log(f6);
//正则表达式的第二种创建方式(了解)
let reg6_2 = new RegExp("^\\w{5,10}$")
let f6_2 = reg6_2.test(username)
console.log(f6_2);
</script>
案例2-正则模式
根据不同需求,提供了三种模式,这三种模式分别对应一下三个内容
u:匹配最近的哪一项
g:匹配所有满足的项
i:匹配的时候不考虑大小写
let reg = /abc/i //abc ABC Abc
<script>
//正则模式 i:匹配的时候不考虑大小写
let str = "ABC"
//写正则表达式,校验一个字符串是否是abc,不考虑大小写
let reg = /^abc$/i
//校验
let r = reg.test(str)
console.log(r);
</script>
案例3
用户名 <input type="text"> <span></span><br>
密码 <input type="text"> <span></span><br>
邮箱 <input type="text"> <span></span><br>
<button type="button">注册</button>
<script>
//拿到所有的输入框
let oinputArr = document.querySelectorAll("input")
//拿到所有的span标签
let spArr = document.querySelectorAll("span")
//拿到按钮
let btn = document.querySelector("button")
btn.onclick = function(){
//获取用户输入的用户名
let username = oinputArr[0].value
//写正则表达式
let reg1 = /^[A-Z][a-zA-Z]{5}$/
if(reg1.test(username)){
spArr[0].innerText = "√"
}else{
spArr[0].innerText = "用户是6位的字母,首字母必须大写"
}
//获取到用户输入的密码
let password = oinputArr[1].value
//写正则表达式
let reg2 = /^\d{6}$/
if(reg2.test(password)){
spArr[1].innerText = "√"
}else{
spArr[1].innerText = "密码必须是6位的数字"
}
//获取用户输入的邮箱
let email = oinputArr[2].value
//写正则表达式
let reg3 = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/
if(reg3.test(email)){
spArr[2].innerText = "√"
}else{
spArr[2].innerText = "邮箱格式错误"
}
}
</script>
BOM
(Browser Object Model)，浏览器对象模型。包含了 页面跳转、页面返回、定时器任务、屏幕的信息（分辨率、大小）等功能
在BOM中，有很多对象，我们给对象进行了分类
- window对象：浏览器窗口对象
- location对象：浏览器url地址对象
- history对象：浏览记录对象
- screen对象：屏幕对象
- navigator对象：浏览器对象（查看浏览器信息）
window对象
console.log(window)
window是浏览器窗口对象，默认是最顶层对象，每个浏览器都有这个对象
案例-演示window对象的方法
<button id="btn" type="button">打开百度</button>
<script>
/**
* JS由三部分组成
* ECMAScript(变量 数组 对象 语句 函数)
* DOM(网页内容的操作)
* BOM(操作浏览器的各种功能)
*
* 当浏览器打开一个网页的时候,浏览器会自动生成一个window对象
* window(浏览器窗口对象)
* DOM
* BOM
* location对象：浏览器地址栏
* history对象：浏览期历史记录
* screen对象：屏幕对象
* avigator对象：浏览器对象（查看浏览器信息）
*
*/
//输出window对象
console.log(window);
//弹窗
window.alert("我是一个弹窗")
//输入框
window.prompt("请输入")
//打开一个新的页面
let obtn = document.querySelector("#btn")
obtn.onclick = function(){
window.open("https://www.baidu.com")
}
//确认取消框
let r = window.confirm("是否删除?")
console.log(r);
</script>
知识点
alert() 弹窗
prompt() 输入框
confirm() 确认框
open() 打开新窗口的
内置对象
location
<button id="btn" type="button">刷新网页</button>
<button id="btn2" type="button">打开百度</button>
<script>
/**
* location:代表浏览器地址栏对象
*/
let obtn = document.querySelector("#btn")
obtn.onclick = function(){
//刷新浏览器
location.reload()
}
let obtn2 = document.querySelector("#btn2")
obtn2.onclick = function(){
location.assign("https://www.baidu.com")
}
</script>
<button id="btn3" type="button">获取地址栏网址</button>
<button id="btn4" type="button">打开一个新的网页</button>
let obtn3 = document.querySelector("#btn3")
obtn3.onclick = function(){
//拿到地址栏的网址
let msg = location.href
console.log(msg);
}
let obtn4 = document.querySelector("#btn4")
obtn4.onclick = function(){
//页面跳转(推荐)
// location.href = "https://www.taobao.com"
location = "https://www.taobao.com"
}
常用属性
href
search
常用函数
assign 用于页面跳转,浏览器会有历史记录,可以回退
reload 刷新页面
history
<button id="btn1" type="button">后退</button>
<button id="btn2" type="button">前进</button>
<script>
let obtn1 = document.querySelector("#btn1")
let obtn2 = document.querySelector("#btn2")
obtn1.onclick = function(){
//后退
history.back()
}
obtn2.onclick = function(){
//前进
history.forward()
}
</script>
定时器和延时器
| 定时器 | 语法 |
|---|---|
| setInterval() | 定时执行任务。每隔一段时间，某段代码就会执行一次 |
| setTimeout() | 延迟执行任务。在指定的时间后再执行任务,只执行一次 |
定时器
setInterval(function(){
console.log("-------------");
},1000)
延时器
setTimeout(function(){
console.log("*********************");
},500)
清除定时器
clearInterval(要清除的定时器)
案例-时钟
<span id="sp"></span>
<script>
let osp = document.querySelector("#sp")
setInterval(function(){
//创建一个日期对象
let date = new Date()
//把日期对象转换为本地的日期格式
let str = date.toLocaleString()
//把日期插入到sp标签
osp.innerText = str
},1000)
</script>
案例-倒计时
<span></span>
<script>
let time = 3600
//1.把定时器赋值给一个变量
let t= setInterval(function(){
let hour = Math. floor(time / 3600);
let minute = Math. floor(time % 3600 / 60);
let second = Math. floor( time % 3600 % 60);
//如果时分秒是个位数,在前面补0
hour = hour<10?"0"+hour:hour
minute = minute<10?"0"+minute:minute
second = second<10?"0"+second:second
let str = `${hour}:${minute}:${second}`
let osp = document.querySelector("span")
osp.innerText = str
if(time == 0){
//2.清除定时器
clearInterval(t)
}
//定时器执行一次,让变量time的值减1
time--
},1000)
// clearInterval(要清除的定时器)
</script>
案例-发送验证码
<!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>Document</title>
<style>
/* 初识样式 */
.btn{
width: 120px;
height: 40px;
border: 1px #06a8ff solid;
background-color: white;
color: #06a8ff;
border-radius: 6px;
}
/* 按钮被点击后的样式 */
.active{
width: 120px;
height: 40px;
border: 1px #d8d8d8 solid;
color: #999999;
background-color: #f8f8f8;
border-radius: 6px;
}
</style>
</head>
<body>
<!-- disabled:禁用 -->
<button id="sendCode" class="btn" type="button">发送验证码</button>
<script>
//拿到按钮
let obtn = document.querySelector("#sendCode")
//给按钮绑定事件
obtn.onclick = function(){
//定义变量存储60秒时间
let time = 60
//创建一个定时器
let t = setInterval(function(){
//把时间插入到按钮的中间
obtn.innerText = time
//禁用按钮(给按钮加上disabled)
obtn.setAttribute("disabled",true)
// 给标签设置css样式
obtn.setAttribute("class","active")
//当时间为0时,清除定时器
if(time == 0){
clearInterval(t)
//向按钮中间插入文本
obtn.innerText = "发送验证码"
//解除禁用(移除按钮的disabled)
obtn.removeAttribute("disabled")
//给标签设置样式
obtn.setAttribute("class","btn")
}
//时间减
time--
},10)
}
</script>
</body>
</html>
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
