JS Web API 学习

Web API

DOM

DOM树直观体现了标签与标签之间的关系

根据css选择器获取DOM元素

1.匹配一个元素

    <div class="box">123</div>
    <div class="box">abc</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>
    <script>
	//document.querySelector('css选择器')
	//css选择器匹配的第一个元素，一个HTMLElement对象
        //获取匹配的第一个元素
        // const box = document.querySelector('div')
        const box = document.querySelector('.box')
        console.dir(box);
        const nav = document.querySelector('#nav')
        console.dir(nav)
//获取一个dom元素可以直接修改
        nav.style.color = 'red'
        const li = document.querySelector('ul li:first-child')
        console.dir(li);
    </script>

2.匹配多个元素

<script>
//document.qureySelectorAll('css选择器')
//参数：包含一个或多个有效的css选择器字符串
//返回值：css选择器匹配的NodeList对象集合
		const lis = document.querySelectorAll('ul li')
        console.dir(lis)
//得到的伪数组，没有pop(),push()等方法
</script>

操作元素内容

元素.innerText

元素.innerHTML

区别是一个识别标签（元素.innerHTML），一个不识别标签（元素.innerText）

DOM修改常见属性

<img src="./images/1.webp" alt="">
    <script>
        const img = document.querySelector('img')
        img.src = './images/2.webp'
        img.title = '刘德华'
    </script>

修改样式

<!--元素.属性=值-->
<img src="./images/1.webp" alt="">
    <script>
        function getRandom(N, M) {
            return Math.floor(Math.random() * (M - N + 1)) + N
        }

        const img = document.querySelector('img')
        const random = getRandom(1, 6)
        img.src = `./images/${random}.webp`
        img.title = '刘德华'
    </script>

通过style修改样式

<!--元素.style.属性=值 -->
<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '300px'
        //不能有-，当减号处理。直接小驼峰命名法即可
        box.style.backgroundColor = 'hotpink'
    </script>
</body>

通过类名修改样式

div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        div.className = 'box'
		//假如前面有类名会直接覆盖掉原来的类名
    </script>

通过classList操作类控制css

<!--	追加一个类
	元素.classList.add('类名') 
删除一个类
	元素.classList.remove('类名')
切换一个类
	元素.classList.toggle('类名')
查看有没有包含某个类，有返回true，没有返回false
	元素.classList.contains('类名')
-->
<style>
        .box {
            width: 200px;
            height: 200px;
        }

        .active {
            color: red;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">文字</div>
    <script>
        const div = document.querySelector('.box')
        //添加类
        div.classList.add('active')
        //删除类
        div.classList.remove('box')
        //切换类,没有就加上，有就删除掉
        div.classList.toggle('box')
    </script>

使用className和classList的区别?

修改大量样式的更方便

修改不多样式的时候方便

classList 是追加和删除不影响以前类名

操作表单元素属性

DOM对象.属性名

<input type="text" value="电脑"><br>
    <!-- 密码：<input type="password"> -->
	<input type="checkbox">
    <button>点击</button>
    <script>
        const uname = document.querySelector('input')
        console.log(uname.value)
        uname.type = 'password'
		const ipt = document.querySelector('input')
        ipt.checked = true
        const bot = document.querySelector('button')
        bot.disabled = true
    </script>

自定义属性

<div data-id="1" data-spm="不知道">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const one = document.querySelector('div')
        console.log(one.dataset.id)
        console.log(one.dataset.spm)
    </script>

定时器

间歇函数

可以开启和关闭定时器

// setInterval(函数,间隔时间)
        // setInterval(function () {
        //     console.log('一秒执行一次');
        // }, 1000)
        function fn() {
            console.log('一秒执行一次');
        }
        //写函数名不要加小括号
        //setInterval(fn, 1000)
//定时器返回一个id（第几个定时器）
//let 变量名 = setInterval(函数，间隔时间)
//clearInterval(变量名)
		let n = setInterval(fn, 1000)
     	console.log(n)
   	   	let m = setInterval(function () {
        console.log('hello')
        }, 2000)
        console.log(m)
        clearInterval(m)

事件监听

语法：元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素

事件源：哪个DOM元素被事件触发了，要获取dom元素

事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等

事件调用的函数：要做什么事

<button>点击</button>
    <script>
        //事件源：按钮
        //事件类型 点击鼠标
        //时间处理程序 弹出对话框
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert('hello')
        })
    </script>

事件类型

鼠标事件：鼠标触发：click鼠标点击，mouseenter鼠标经过,mouseleave鼠标离开

焦点事件：表单获得光标：focus获得焦点，blur失去焦点

键盘事件：键盘触发：keydown键盘按下触发，keyup键盘抬起触发

文本事件：表单输入触发：input用户输入事件，change事件

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<body>
    <div class="box"></div>
    <input type="text">
    <script>
        const box = document.querySelector('.box')
        box.addEventListener('mouseenter', function () {
            console.log("鼠标经过")
        })
        box.addEventListener('mouseleave', function () {
            console.log('鼠标离开')
        })
        const input = document.querySelector('input')
        input.addEventListener('focus', function () {
            console.log('得到焦点')
        })
        input.addEventListener('blur', function () {
            console.log('失去焦点')
        })
        // 键盘事件
        input.addEventListener('keydown', function () {
            console.log('键盘按下')
        })
        input.addEventListener('keyup', function () {
            console.log('键盘弹起')
        })
        input.addEventListener('input', function () {
            console.log(input.value)
        })
		//change事件是内容发生变化并且焦点离开才会触发
		input.addEventListener('change', function () {
            console.log(input.value)
        })
    </script>
</body>

事件对象

事件对象是对象，在这个对象里有事件触发时的相关信息

事件绑定的回调函数的第一个参数就是事件对象

<input type="text">
    <script>
        const input = document.querySelector('input')
        input.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                console.log('我按下了回车')
            }
        })
    </script>

环境对象

环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清楚this指向，可以让代码更简洁

函数调用方式不同，this指代的对象不同
【谁调用，this就是谁】是判断this指向的粗略规则
直接调用函数，其实相当于是window.函数，所以this指代window

<button>点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            // console.log(this) 
            this.style.color = 'red'
        })
    </script>

回调函数

如果将函数A作为参数传递给函数B时，我们称A为回调函数（当一个函数作为参数传递给另一个函数的时候，这个函数就是回调函数）

事件流

事件流指的是事件完整执行过程中的流动路径

捕获阶段是从父到子，冒泡阶段是从子到父（实际工作都是使用事件冒泡为主）

事件捕获和事件冒泡

事件监听的第三个参数决定是事件捕获还是事件冒泡，默认为false是事件冒泡，改为true为捕获

调用的是同名事件

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        const fa = document.querySelector('.father')
        const son = document.querySelector('.son')
        document.addEventListener('click', function () {
            alert('我是爷爷')
        }, true)
        fa.addEventListener('click', function () {
            alert('我是父亲')
        }, true)
        son.addEventListener('click', function () {
            alert('我是儿子')
        }, true)
    </script>

阻止冒泡

语法：事件对象.stopPropagation()

可以阻止事件流传播

事件解绑

对象.removeEventListener('事件类型'，函数名)

匿名函数无法解绑

<button>点击</button>
    <script>
        const btn = document.querySelector('button')
        function fn() {
            alert('点击了')
        }
        btn.addEventListener('click', fn)
        btn.removeEventListener('click', fn)
    </script>

mouseenter和mouseover的区别

mouseenter和mousleave没有冒泡效果（推荐）
mouseover和mouseout会有冒泡效果

<style>
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>

    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        const fa = document.querySelector('.father')
        const son = document.querySelector('.son')

        // fa.addEventListener('mouseenter', function () {
        //     console.log('鼠标经过');
        // })
        // fa.addEventListener('mouseleave', function (e) {
        //     console.log('鼠标离开');
        // })
        fa.addEventListener('mouseover', function () {
            console.log('鼠标经过');
        })
        fa.addEventListener('mouseout', function (e) {
            console.log('鼠标离开');
        })

事件委托

优点：减少注册次数，提高程序性能

原理：事件委托其实是利用时间冒泡的特点。

给父元素注册事件，当我们触发子元素时会冒泡到父元素身上，从而触发父元素的事件

事件对象.target.tagName可以获得真正触发事件的元素

<ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <p>我不要变色</p>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // console.log(e.target.tagName)
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>

阻止元素默认行为

<form action="">
        <input type="submit" value="免费注册">
    </form>
    <a href="https://cn.bing.com/chrome/newtab?ensearch=1&FORM=BEHPTB">搜索</a>
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
        })
        const a = document.querySelector('a')
        a.addEventListener('click', function (e) {
            e.preventDefault()
        })
    </script>

其他事件

页面加载事件

（用的少）

	//页面所有资源加载完毕触发事件
	window.addEventListener('load',function(){
            //执行的操作
        })
	// 页面的HTML文档完全加载和解析完成之后，触发事件，无需等待样式表、图像等全加载
        window.addEventListener('DOMContentLoaded', function ()){
            //执行的操作
        }

元素滚动事件

scrollTop是滚动高度，可以赋值

<style>
        body {
            height: 3000px;
            padding-top: 0;
        }

        div {
            display: none;
            width: 200px;
            height: 200px;
            overflow: auto;
            border: 1px solid black;
            margin: 500px auto;
        }
    </style>
</head>

<body>
    <div>我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
        我里面有很多很多文字
    </div>
    <script>
        const div = document.querySelector('div')
        // div.addEventListener('scroll', function () {
        //     //打印被卷曲的头部像素大小
        //     console.log(div.scrollTop)
        // })
		//scrollTo(x,y)也可以实现页面滚动
        window.addEventListener('scroll', function () {
            console.log(document.documentElement.scrollTop)
            if (document.documentElement.scrollTop >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })
//这个页面我的滚动条会跳动，原因是显示div的时候加了盒子的高度
    </script>
</body>

页面尺寸事件

clientWidth是一个只读属性，返回元素的内部宽度，该属性包括内边距，但不包括垂直滚动条(如果有)、边框和外边距。

<style>
        div {
            display: inline-block;
            /* width: 200px; */
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div>1234444334546568769121111132331</div>
    <script>
        const div = document.querySelector('div')
        console.log(div.clientWidth)
    </script>
</body>

offsetWidth是一个只读属性，返回一个元素的布局宽度。一个典型的offsetWidth是测量包含元素的边框、水平线上的内边距、竖直方向滚动条(如果有的话)、以及CSS设置的宽度(width)值。

offsetLeft和offsetTop获取元素距离自己定位父级元素的左、上距离

//获取的是数值，是元素距离自己定位辅机元素的左、上距离
<style>
        div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 50px;
        }
    </style>

    <div>
        <p></p>
    </div>
    <script>
        const div = document.querySelector('div')
        const p = document.querySelector('p')
        console.log(div.offsetLeft)
        console.log(p.offsetLeft)
    </script>

element.getBoundingClientRect()
//方法返回元素的大小及其相对于视口的位置

页面尺寸总结

属性	作用	说明
scrollLeft和scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth和clientHeight	获得元素宽度和高度	不包含border,margin,滚动条用于js获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素宽度和高度	包含border、padding，滚动条等，只读
offsetLeft和offsetTop	获取元素距离自己定位父级元素的左、上距离	获取元素位置的时候使用，只读

日期对象使用

		//实例化new
        //获得当前时间
        const date = new Date()
        console.log(date)
        //获得指定时间
        const dt = new Date('2023-4-23')
        console.log(dt)

日期对象常见方法

		const date = new Date()
        console.log(date.getFullYear())//年
        console.log(date.getMonth() + 1)//月，取值为0~11，所以要加一
        console.log(date.getDate())//日
        console.log(date.getDay())//星期，取值0~6,0是星期日
        console.log(date.getHours())//时 0~23
        console.log(date.getMinutes())//分 0~59
        console.log(date.getSeconds())//秒 0~59

格式化显示时间

<style>
        div {
            width: 300px;
            height: 45px;
            border: 1px solid black;
            line-height: 45px;
            text-align: center;
        }
    </style>
    <div></div>
    <script>
        const div = document.querySelector('div')
        function getTime() {
            const date = new Date()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getSeconds()
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${h}:${m}:${s}`
        }
        div.innerHTML = getTime()
        setInterval(function () {
            div.innerHTML = getTime()
        }, 1000)

    </script>

另一种写法

<style>
        div {
            width: 300px;
            height: 45px;
            border: 1px solid black;
            line-height: 45px;
            text-align: center;
        }
    </style>
    <div></div>
    <script>
        const div = document.querySelector('div')
        const date = new Date()
        div.innerHTML = date.toLocaleString()//返回格式是2023/4/21 17:36:28
        //div.innerHTML = date.toLocaleDateString()//返回格式是2023/4/21
        //div.innerHTML = date.toLocaleTimeString()//返回格式是17:41:00
        setInterval(function () {
            const date = new Date()
            div.innerHTML = date.toLocaleString()
        }, 1000)
	</script>

时间戳

时间戳是指1970年01年01月01日00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

使用场景：如果计算倒计时效果，前面无法直接计算，需要借助于时间戳完成

节点操作

DOM树里面每一个内容都是DOM节点

查找节点

父节点查找

parentNode属性
返回最近一级的父节点，找不到返回为null
子元素.parentNode

子节点查找

childNodeas

获得所有子节点，包括文本节点（空格、换行）、注释节点等
children属性

仅获得所有元素节点

返回的还是一个伪数组
父元素.children

要得到每个孩子还是要遍历

兄弟关系查找

下一个兄弟节点

nextElementSibling属性
上一个兄弟节点

previousElementSibling属性

增加节点

创建节点

创造一个新的网页元素，再添加到网页内，一般先创建节点，再插入节点

document.createElement('标签名')

追加节点

要想在界面看到，得插入到某个父级元素中

插入到父元素最后一个子元素

父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素,在哪个元素前面)

<ul>
        <li>我是第一个</li>
    </ul>
    <script>
        const li1 = document.createElement('li')
        const li2 = document.createElement('li')
        const newest = document.createElement('li')
        const ul = document.querySelector('ul')
        li1.innerHTML = '我是li'
        li2.innerHTML = '我是li2'
        ul.appendChild(li1)
        ul.insertBefore(li2, li1)
        //创建的永远在最前面
        ul.insertBefore(newest, ul.children[0])
    </script>

克隆节点

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点（只克隆这个标签）
默认为false

<ul>
        <li><a href="">1</a> </li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        //克隆第一个孩子
        ul.appendChild(ul.children[0].cloneNode(true))
    </script>

删除节点

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

如果不存在父子关系则删除不成功

M端事件（移动端）

触屏事件touch

Android和IOS都有

touchstart 手指触摸到一个DOM元素时触发

touchmove 手指在一个DOM元素上滑动时触发

touchend 手指从一个DOM元素上移开时触发

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <div></div>
    <script>
        const div = document.querySelector('div')
        //触摸开始
        div.addEventListener('touchstart', function () {
            console.log('触摸了')
        })
        //滑动
        div.addEventListener('touchmove', function () {
            console.log('滑动了')
        })
        //离开
        div.addEventListener('touchend', function () {
            console.log('移开了')
        })
    </script>

BOM

浏览器对象模型

定时器

延时函数

JavaScript内置的一个用来让代码延迟执行的函数，叫setTimeout

setTimeout(回调函数，等待的毫秒数)

setTimeout只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window

清除延迟函数

let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

间歇函数和延时函数区别：延时函数执行一次，间歇函数一直执行

JS执行机制

JavaScript是单线程，同一时间只能做一件事

单线程意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。这样会导致：如果JS执行的时间过长，这样会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉

为了解决这个问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。所以JS中出现了同步和异步

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop)

Window对象

location对象

location拆分并保存了URL地址的各个组成部分

常用属性和方法

herf属性获取完整的URL地址，对其复制时用于地址的跳转

console.log(location.href)

location.href = 'http://www/baidu.com'

search获取内容，拿到？及后面的内容
hash获取#及后面的内容
reload()方法，用于刷新页面，里面可以加参数true，代表强制刷新

navigator对象

	// 检测 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' }
	})()

history对象（不常用）

back()方法,可以后退
forward()前进
go(参数)前进后退，参数如果是1，前进1个页面，如果是-1，后退一个页面

本地存储

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不丢失数据
容量较大，sessionStorage和localStorage约5M左右

localStorage

可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在

特性：可以多窗口共享（同一浏览器可以共享）

以键值对的行驶存储使用

	//存储数据
        // localStorage.setItem(键，值)
        localStorage.setItem('uname', '木三')
        //获取数据
        console.log(localStorage.getItem('uname'))
        //删除本地存储
        // localStorage.removeItem('uname')
        //修改数据，如果有这个键就是改，没有就是增
        localStorage.setItem('uname', '三三')
        //本地存储只能存储字符串类型

sessionStorage

特性：生命周期为关闭浏览器窗口

在同一个窗口下数据可以共享

以键值对形式存储

用法和localStorage基本相同

存储数据类型

需将复杂数据类型转换成JSON字符串，再存储到本地

JSON.stringify(复杂数据类型)

	const obj = {
            uname: '三三',
            age: 20,
            gender: '女'
        }
        //把对象转换为字符串
        localStorage.setItem('obj', JSON.stringify(obj))
        //把JSON字符串转换为对象
        console.log(JSON.parse(localStorage.getItem('obj')))

数组里面的map()方法和join()方法

map()可以遍历数组处理数据，并且返回新的数组

map也称映射，只两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值，forEach没有返回值

join()方法用于把数组中的所有元素转换一个字符串

		const arr = ['red', 'blue', 'green']
        const newArr = arr.map(function (ele, index) {
            console.log(ele)//数组元素
            console.log(index)//索引号
            return ele + '颜色'
        })
        console.log(newArr)
        //join括号里面为空，逗号分隔
        console.log(newArr.join())
        //小括号里面是空字符串，就没有分隔
        console.log(newArr.join(''))

正则表达式

正则表达式是用于匹配字符串中字符组合的模式

定义正则表达式：const 变量名 = /表达式/

test()方法：用来查看正则表达式与指定的字符串是否匹配

regObj.test(被检测的字符串) 返回true或者false

exec()方法：在一个指定字符串中执行一个搜索匹配

regObj.exec(被检测字符串) 返回一个数组

元字符

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

^匹配开始 $匹配结束

/^内容$/精确匹配，字符串内容必须完全里面的内容完全一样才能匹配上

量词（表示重复次数）用来设置某个模式出现的次数

量词	说明
*	重复零次或更多次
+	重复一次或更多次
？	重复零次或一次
	重复n次
	重复n次或更多次
	重复n次到m次

逗号左右两侧不要加空格

字符类（比如\d表示0~9）

[]匹配字符集合

/[abc]/后面字符串只要包含abc中任意一个字符，都返回true

        console.log(/^[abc]$/.test('ab'))//false
        console.log(/[abc]/.test('ab'))//true
        console.log(/^[abc]{2}$/.test('ab'))//false
		//[]里面加上^是取反符号，例如 [^a-z]是除去a-z以外的所有字符

.匹配除换行符之外的其他任何字符

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的数字，相当于[^0-9]
\w	匹配任意的首字母、数字和下划线，相当于[A-Za-z0-9]
\W	除所有首字母、数字和下划线以外的字符，相当于[^A-Za-z0-9]
\s	匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]
\S	匹配非空格字符，相当于[^\t\r\n\v\f]

修饰符

修饰符约束正则执行的某些细节行为，如：是否区分大小写、是否支持多行匹配等

/表达式/修饰符

i是正则匹配时字母不区分大小写，g是匹配所有满足正则表达式的结果

replace替换

字符串.replace(/正则表达式/，‘替换的文本’)

posted @ 2023-04-24 20:15 三三要进步阅读(38) 评论(0) 收藏举报

刷新页面返回顶部

sansanyaojinbu