Javascript基础(3)

漉漓gg

于 2023-06-14 23:27:15 发布

阅读量165

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/luli007x/article/details/131218089

版权

96,97,101,103,108,111,113,114,115,120(2),124,125

WebAPIS

1.Web API基本认知

1.1const

let 和 const中建议const优先声名

const arr=['red','pink','blue']
arr=[1,2,3]
console.log(arr)//报错同对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ujc1pySj-1686756418489)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/const常量.jpg)]

1.2API作用和分类

作用:就是使用JS去操作html和浏览器

分类:DOM(Document Object Model)(文档对象模型)和BOM(浏览器对象模型)

1.3DOM树

将HTML文档以树状结构只管的表现出来

描述网页关系的名词

作用:直观的体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1hjbx95-1686756418491)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/DOM树.jpg)]

1.4DOM对象

浏览器根据HTML标签生成的JS对象

可以找到所有的白哦前属性,由属性有方法

核心思想就是把网页内容当作对象来处理

2.获取DOM对象

css通过选择器获取标签,JS通过css选择器获取DOM元素

2.1通过CSS选择器获取DOM元素

document.querySelector(‘CSS选择器’)

选择匹配到的第一个元素,并且返回值是对象,获取的单个可以直接修改样式

    <div class="box">122</div>
    <p id='nav'>导航栏</p>
    <div class="box">abc</div>
    <script>
        const box = document.querySelector('.box')
		//或者document.getElementsByClassName('box')
		const nav = document.querySelector('#nav')
        //或者document.getElementById('nav')
        box.style.color = 'red'//可以  直接修改
        document.write(box)//只会选择匹配到的第一个元素
        const lis = document.querySelectorAll('ul li')
        document.write(lis)
        for(let i= 0;i<lis.length;i++){
		lis[i].style.color='red'
        }
    </script>

选择多个document.querySelectorAll(‘ul li’)

拿到所有的li,返回值是Nodelist 对象集合(伪数组),获取到的全部元素需要遍历修改

伪数组:有长度,有索引号,但是没有pop() push()等数组方法,想要得到里面的一个对象,需要用遍历(for)的方式获得

3.操作元素内容

    <div class="box">我是盒子的内容</div>

    <script>
        const box = document.querySelector('.box')
        box.innerText = '<strong>我才是</strong>'//不解析标签纯输出
        box.innerHTML = '<strong>我才是</strong>'//唯一区别识别标签
    </script>

练习

    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
        for (let i = 1; i <= 3; i++) {
            let num = Math.floor(Math.random() *personArr.length)
            document.write(personArr[num])
            personArr.splice(num, 1)
        }
        document.write(personArr)
    </script>

4.操作元素属性

4.1操作元素常用属性

可以通过JS设置/修改标签的元素属性,比如通过src更换图片
最常见的属性:href,title,src等

语法:对象.属性 = 值

小练习

    <img src="./images/banner2_20190819_210028.png" alt="">

    <script>
        const img = document.querySelector('img')
        img.src = './images/2.png'
        img.title = 'pink老师的艺术照'
    </script>

随机显示一个图片

    <script>
        const imgsrc = ['../images/1.jpg', '../images/2.jpg', '../images/3.jpg', '../images/4.jpg']
        let num = Math.floor(Math.random() * imgsrc.length)
        document.write(`
        <img src="${imgsrc[num]}" alt=""`)
    </script>
//方法2
<body>
    <img src="../images/2.jpg" alt="">
    <script>
        const imgsrc = ['../images/1.jpg', '../images/2.jpg', '../images/3.jpg', '../images/4.jpg']
        const img = document.querySelector('img')
        let num = Math.floor(Math.random() * imgsrc.length)
        img.src = `${imgsrc[num]}`
    </script>
</body>

4.2操作元素样式属性

通过style属性操作CSS 语法对象.stle.属性 = 值(适合修改一个或少个属性)

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

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        box.style.width = '300px'
        box.style.backgroundColor = 'hotpink'
           //此处background-color不能写-会被理解为减号,应该小驼峰命名法
		box.style.border = '2px solid blue'
    </script>

2.通过操作类名(className)操作CSS

如果修改的样式属性比较多,直接俄通过style修改比较繁琐

语法:元素.className = ‘值’

注意:className是新值替换旧值,如果像添加一个类,需保留原来的类名

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

    .box {
        width: 300px;
        height: 300px;
        background-color: pink;
    }
</style>

<body>
    <div></div>
    <script>
        //1.获取元素
        const div = document.querySelector('div')
        //2.增加类名
        //如果原本有类名nav,需要保留之前的类名
        div.className = 'nav box'
    </script>

3.终极解决方案通过classList操作控制CSS

为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类,没有该类名就删除,没有就加上
元素.classList.toggle('类名')

4.3操作表单元素属性

<input type="text" value="电脑">
<button disabled="disabled">按钮</button>
<script>
    //1.获取元素
    const uname = document.querySelector('input')
	//2.获取值 获取表单里面的值
	console.log(uname.value)
	//注意点:console.log(uname.innerHTML)得不到表单的值
</script>

<input type="checkbox" value="">
<script>
    const ipt = document.querySelector('input')
	ipt.checked = true//表示选中
	const button = document.querySelector('button')
    button.disabled = true//表示禁用按钮了
</script>

4.4自定义属性

在html5中推出专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取

<div data-id="1" data-id="11">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>

<body>
    <script>
        let one = document.querySelector('div')
        console.log(one.dataset.id)
    </script>

5.定时器-间歇函数

开启定时器 :setInterval(函数,间隔时间)//每一个定时器都有独一无二的id号

关闭定时器:clearInterval(id号)

    <script>
        let m = setInterval(function () {
            console.log('这是id为m的定时器')
        }, 2000)
        let n = setInterval(function () {
            console.log('疫苗执行一次')
        }, 1000)//第一次执行也是1s后才执行
        clearInterval(n)//关闭定时器
    </script>

用户倒计时

    <button disabled>我已阅读(5)</button>
    <script>
        let i = 5
        const btn = document.querySelector('button')
        let n = setInterval(function () {
            i--
            btn.innerHTML = `我已阅读(${i})`
            if (i === 0) { clearInterval(n) }
        }, 1000)
        
        setInterval(function () {
            btn.disabled = false
            btn.innerHtml = '同意'
        }, 5000)//5s后禁用改为不禁用
    </script>

6.综合案例

轮播图定时器版

    <img src="../images/1.jpg" alt="">
    <script>
        const images = [{ url: '../images/1.jpg' }, { url: '../images/2.jpg' }, { url: '../images/3.jpg' }, { url: '../images/4.jpg' }]

        const img = document.querySelector('img')
        let i = 0
        setInterval(function () {
            i++
            if (i == images.length) { i = 0 }
            img.src = images[i].url
            
        }, 2000)
    </script>

7.事件监听

目标:能够给DOM元素添加时间监听

让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做吹相应,也称为绑定事件或者注册时间比如鼠标经过显示下拉菜单,点击可以播放轮播图等等

语法:元素对象.addEventlistener(‘事件类型’,要执行的函数)

事件监听三要素

事件源:哪个dom元素被事件触发了,要获取dom元素(谁被触发)
事件类型:用什么方法触发,比如鼠标单击click,鼠标经过mouseover等(用什么方式触发)
事件调用的函数:要做什么事情

    <button>电击我</button>//点击一次,执行一次
    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', function () {//注意事件类型要加引号
            alert(`别点我`)
        })
    </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>
</head>
<style>
    .box {
        position: relative;
        width: 1000px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        text-align: center;
        font-size: 50px;
        line-height: 200px;
        font-weight: 700;
    }
    .box1 {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 10px;
        width: 20px;
        height: 20px;
        background-color: aqua;
        text-align: center;
        line-height: 20px;
        font-size: 16px;
    }
</style>

<body>
    <div class="box">我是广告
        <div class="box1">X</div>
    </div>
    <script>
        const box = document.querySelector('.box')
        const box1 = document.querySelector('.box1')
        box1.addEventListener('click', function () {
            box.style.display = 'none'
        })
    </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {
            width: 450px;
            height: 40px;
            color: red;
        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是:</span>
        <div class="qs">这里显示名字</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        const arr = ['mdalf', 'fQEG', 'fewG', 'GWA', 'GWEg']
        //提升为全局变量(在不同区域块都要用到)
        let timerId = 0
        let randomInt = 0
        //获取元素
        const qs = document.querySelector('.qs')
        const start = document.querySelector('.start')
        const end = document.querySelector('.end')
        //开始按钮设置监听器点击事件,点击后随机选出一个人
        start.addEventListener('click', function () {
            randomInt = parseInt(Math.random() * arr.length)
            timerId = setInterval(function () {
                qs.innerHTML = arr[randomInt]
            }, 35)
            //所剩字符长度为1时禁用按钮
            if (arr.length === 1) {
                start.disabled = true
                end.disabled = true
            }
        })

        //结束按钮设置监听事件
        end.addEventListener('click', function () {
            clearInterval(timerId)//点击清除定时器
            arr.splice(randomInt, 1)//点击删除所选
            // console.log(arr)
        })

    </script>
</body>

</html>

事件类型

鼠标事件(鼠标触发):click鼠标点击,mouseenter鼠标经过 mouseleave 鼠标离开
焦点事件(表单获得光标):focus 获得光标,blur 失去光标
键盘触发(键盘触发):keydowm 键盘按下触发,keyup 键盘抬起触发
文本事件(表单输入触发):input用户输入事件

<body>//输入字数显示

    <textarea name="" id="tx"></textarea>
    <span>
        12
    </span>
    <script>
        const span = document.querySelector('span')
        const tx = document.querySelector('#tx')
        tx.addEventListener('input', function () {
            console.log(tx.value.length)
            span.innerHTML = `${tx.value.length}/200`
        })
    </script>
</body>

事件对象

事件对象

事件对象也是个对象,这个对象里面有事件触发的相关信息

例如:鼠标点击事件中,事件对象就存了鼠标在哪个位置等信息

使用场景

可以判断用户按下哪个键,比如按下回车键可以发布新闻

可以判断鼠标点击了哪个元素,从而做相应的操作

元素.addEventListener('click'.function( e ) { })//事件绑定的回调函数的第一个参数就是事件对象,一般命名为event,ev,e

事件对象常见属性

type:(获取当前事件类型) click等
clientX,clientY(鼠标位置距离左侧,距离右侧像素)
offsetX,offsetY::获取光标相对于当前DOM元素左上角的位置
key:用户按下键盘键的值…input事件只能检测是否按键盘,而这个可以检测按了哪个键值

环境对象

每个函数里面都有环境对象,普通函数this指向的函数的调用者

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

弄清this的指向可以让代码更简洁

//普通函数this指向的函数的调用者
<button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click', function (e) {
            console.log(this)//this 指向 btn
            btn.style.color = 'red'
            this.style.color = 'red'//this就指向btn作用相同
        })	
        function fn() {
            console.log(this)//this指向window
        }
    </script>

回调函数

将函数A作为参数传递给函数B时称A为回调函数

<body>
    <button>按钮</button>
    <script>

        //回调函数1
        function fn() {
            console.log(11);
        }//函数A--回调函数
        setInterval(fn(), 1000)//函数B
        //回调函数2
        const btn = document.querySelector('button')
        btn.addEventListener('click', fn())//B
    </script>
</body>

综合案例 103

表单全选反选案例

<body>
    <input type="checkbox" name="" id="" class="checkAll">
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
    <input type="checkbox" name="" id="" class="ck">
    <script>
        const checkAll = document.querySelector('.checkAll')
        const cks = document.querySelectorAll('.ck')
        checkAll.addEventListener('click', function () {
            for (let i = 0; i < cks.length; i++) {
                cks[i].checked = checkAll.checked
            }
        })

        //小复选框控制大复选框事件
        for (let i = 0; i < cks.length; i++) {
            cks[i].addEventListener('click', function () {
                console.log(document.querySelectorAll(`.ck:checked`).length === cks.length)
                checkAll.checked = document.querySelectorAll(`.ck:checked`).length === cks.length

            })
        }
    </script>
</body>

8.事件流

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

事件流包括事件捕获(父到子)和事件冒泡(子到父)

事件捕获: 元素.addEventListenter(‘click’,function(){},true)

事件冒泡:默认是false当一个元素的事件被触发时,同样的事件会在该元素的所有祖先元素中依次被触发,称为冒泡

简单理解就是当一个元素触发事件后,会依次向上调用所有父级元素的同名事件

阻止冒泡

问题:默认就有冒泡模式存在,容易导致事件影响到父级元素
前提:组织事件冒泡需要拿到事件对象
语法:事件对象(e).stopPropagation()//既可以阻止冒泡,也可以阻止捕获

解绑事件:可以使用null覆盖原本的就可以实现事件的解绑

//方法一 L0
<body>
    <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function () {
            alert(`点击了`)
        }
        btn.onclick = null
    </script>
</body>
//或者方法二 L2
<body>
    <button>按钮</button>
    <script>
        const btn = document.querySelector('button')
        function fn() {
            alert(`点击了`)
        }
        btn.addEventListener('click', fn)
        btn.removeEventListener('click', fn)
    </script>
</body>

阻止默认行为:e.preventDefault()

事件委托

优点:减少注册次数,提高程序效率

原理:事件委托其实利用事件冒泡的特点

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

实现:时间对象.target.tagName 可以获得真正触发时间的元素

<body>
    <ul>
        <li>第一个耗子</li>
        <li>第二个耗子</li>
        <li>第三个耗子</li>
        <li>第四个耗子</li>
        <li>第五个耗子</li>
        
         
        <p>我不想变色</p>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            console.log(e.target)//用事件对象拿到点击的哪个子元素
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'red'
            }
        })
    </script>
</body>

其他事件

页面加载事件(可以让JS写在head上面)

加载外部资源(图片,外联CSS和JavaScript等) 加载完毕时触发的事件
等到页面所有资源加载完毕再去执行回调函数
window.addEventListener(‘load’,function(){//执行的操作})

还有一个无需等待样式表,图像等完全加载完毕

document.addEventListener(‘DOMContentLoaded’,function(){//操作}

元素滚动事件

滚动条在滚动的时候持续触发的事件,页面需要有滚动条

window.addEventListener('scroll',function(){
if(document.documentElement.scrollTop>=100){
//操作}
}) 
//也可以直接给数值,一打开页面就是在指定位置
//使用document.documentElement获取整个html页面来检测滚动的长度

scrollLeft和scrollTop可以获取滚动的长度

页面尺寸事件

会在窗口尺寸发生改变时触发事件

window.addEventListener(‘resize’,function(){})

获取元素宽高也不包含border的宽度:获取元素可见的宽高:clientWidth跟clientHeight

元素尺寸与位置

综合案例

9.日期对象

日期对象:用来表示时间的对象,作用时得到当前系统时间

实例化

在代码中发现了new关键字时,就称为实例化

创建一个时间对象并

//1.得到系统时间
const date = new Date()
console.log(date)
2.//得到指定时间  倒计时使用
const date1 = new Date('2022-5-1 08:30:00')
console.log(date1)

事件对象方法

方法	作用	说明
getFullYear()	获得年份	获得四位数年份
getMonth()	获得月份	取值为0-11
getDate()	获得月份中的每一天	不同月份取值不同
getDay()	获得星期	取值为0-6
getHours()	获得小时	0-23
getMinutes()	获得分钟	0-59
getSeconds()	获得秒	0-59

const date = new Date
console.log(date.getMonth())//得到的是实际月份-1
console.log(date.getDay())//得到的0是星期天,1是星期一

//获得时间
<body>
    <div>11</div>

    <script>
        const div = document.querySelector('div')
        function getMyDate() {
            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 = getMyDate()//定时器开始前的一秒不会显示,所以要写一个
        //定时器每一秒刷新一次
        setInterval(function () {
            div.innerHTML = getMyDate()//每一秒修改内容一次
        }, 1000)
    </script>
</body>

        const date = new Date()
        console.log(date.toLocaleString())//得到年月日时间
        console.log(date.toLocaleDateString())//得到年月日
        console.log(date.toDateString())//得到年月日星期
        console.log(date.toLocaleTimeString())//得到时间

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-veSoKAyV-1686756418491)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/时间方法.jpg)]

时间戳:实现倒计时

算法:

将来时间戳 - 现在时间戳 = 剩余时间毫秒数

剩余时间毫秒数转化为剩余时间的年月日时分秒就是倒计时时间

获取时间戳有三种方法

getTime()前提必须实例化
简写 +new Date()无需实例化推荐
使用 Date.now()无需实例化,只能得到当前时间戳,不适合做倒计时

毕业倒计时案例

<body>
    <div>11</div>
    <script>
        const div = document.querySelector('div')
        const date = new Date()
        // console.log(+new Date(`2023 5 23 17:00:00`) - + new Date());
        function getMy() {
            let s = (+new Date(`2023 10 1 00:00:00`) - + new Date()) / 1000
            let d = parseInt(s / 3600 / 24)
            let h = parseInt(s / 3600 % 24)
            let m = parseInt(s / 60 % 24)
            let ss = parseInt(s % 60)

            d = d < 10 ? '0' + d : d
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            ss = ss < 10 ? '0' + ss : ss
            return `${d}  ${h}  ${m}   ${ss}`
        }
        // console.log(`${d}${h}${m}${ss}`)
        div.innerHTML = getMy()
        setInterval(function () { div.innerHTML = getMy() }, 1000)
    </script>
</body>

10.节点操作

DOM节点

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

节点类型:元素节点(所有的标签,其中html是根节点)

查找节点 :主要通过关系查找节点子元素.parentNode

父节点查找使用parentNode 返回最近的一个父节点并且为对象

子节点查找:children 仅获得标签,且为伪数组

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        console.log(ul.children)
        //const li2 = document.querySelector('ul li:nth-child(2)')
        //获取第二个元素
        
        //console.log(li2.previousElementSibling)
        //通过li2获取上一个兄弟元素
        
        //console.log(li2.nextElementSibling)
        //通过li2获取下一个兄弟元素
    </script>
</body>

增加节点

新增节点,首先创建一个节点,再把节点放入到指定元素内部

document.creatElement('标签名')

追加节点

插入到父元素最后一个子元素//父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面//父元素.insertBefore(要插入的元素,在哪个元素前面)

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        const li = document.creatElement('li')//创建新的
        li.innerHTML = '我是li'
        ul.insertBefore(li, ul.children[0])
        //放到最前面,children是数组
    </script>
</body>

克隆节点

复制一个原有节点,把复制的节点放入到指定的元素内部

元素.cloneNode(布尔值)

若为true,则代表克隆时会包含后代节点一起克隆

若为false,则代表克隆时不包含后代节点

默认为false只克隆标签,一般情况下用true

删除节点

再JSDOM操作中,需要通过亲父元素删除…父元素.removeChild(要删除的元素)

11.M端(移动端)事件

触屏touch事件	说明
touchstart	手指摸到一个DOM元素时触发
touchmove	手指再一个DOM元素上华东时触发
touchend	手指从一个DOM元素上移开时触发

div.addEventListener('touchstart',function(){})

12.JS插件

别人写好的一些代码,我们只需要复制对应的代码

13.Window对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKAXX3k4-1686756418492)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/BOM分类.jpg)]

BOM对象(浏览器对象模型)
定时器-延时函数(只执行一次)

JS中内置的一个让代码延迟执行的函数,叫setTimeout(回调函数,等待的毫秒数)

清除延迟函数

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

5s后图片消失案例

<!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>
        .active {
            display: none;
        }
    </style>

</head>


<body>
    <img src="../images/1.jpg" alt="">
    <script>
        const img = document.querySelector('img')
        setTimeout(function () {
            img.classList.add('active')
        }, 5000)
    </script>
</body>

</html>

JS执行机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5DBrCp8C-1686756418492)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/JS执行机制.jpg)]

同步任务:立即执行的

在主线程上执行,形成一个执行栈

异步任务:耗时的

JS的异步通过回调函数实现分为,异步任务添加到任务队列中

普通事件,如click,resize
资源加载,如load,error
定时器,如setInteral,setTimeout

执行机制

先执行执行栈中的同步任务
异步任务放入任务队列
一旦执行栈中的任务执行完毕,系统就会按次序读取任务队列中的异步任务

    <script>
        console.log(1)
        console.log(2)
        setTimeout(function () {
            console.log(3)
        }, 1000)//事件改为0还是1243
        console.log(4)
    </script>

location对象

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

location.href = "URL"//利用JS跳转页面
location.search //获取?以及后面内容
location.hash //获取#以及后面内容

navigator对象

userAgent属性来检测浏览器自身的相关信息

history对象

主要管理历史记录,该对象与浏览器地址栏的操作相对应,前进,后退,历史记录

<body>

    <button>前进</button>
    <button>后退</button>
    <script>
        const forward = document.querySelector('button:first-child')
        const back = forward.nextElementSibling
        forward.addEventListener('click', function () {
            history.go(1)
        })
        back.addEventListener('click', function () {
            history.go(-1)
        })
    </script>
</body>

本地存储

本地存储分类

使用localStorage把数据存储的浏览器中

作用:可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在

特性:可以多窗口(页面)共享(同一浏览器可以共享) 且以键值对的形式存储使用

语法:

//localStorage.setItem(key,value)
localStorage.setItem('uname','pink老师')//存储
localStorage.getItem('uname','pink老师')//得到
localStorage.removeItem('uname')//删除,只写属性就可
localStorage.setItem('uname',18)//改并且本地存储只能存字符数据类型

sessionStorage

特性:

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

用法跟localStorage相同

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

存储复杂数据类型

存储复杂数据类型,也就是存个对象或者存个数组,不能像上面的简单数据类型

解决:需要将复杂数据类型转化为JSON字符串,再存储到本地JSON.stringify()

取的时候将字符串再转化为对象

语法:JSON.stringify(复杂数据类型)

const obj = {
    uname:'pink',
    age:15,
    gender:'男'
}
localStorage.setItem('obj',JSON.stringify(obj))
console.log(localStorage.getItem('obj'))//现在取到的是字符串
console.log(JSON.parse(localStorage.getItem('obj')))//现在取到的是对象##  map,join

join,map字符串拼接

字符串拼接新思路

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

    //map方法重点在于有返回值
<script>
        const arr = ['red', 'blue', 'green']
        const newArr = arr.map(function (ele, index) {
            console.log(ele)//数组元素
            console.log(index)//数组索引号
        })
        console.log(newArr)
    </script>

join()方法可以把数组中的元素转化为一个字符串

    <script>
        const arr = ['red', 'blue', 'green']
        console.log(arr.join(''))//redbluegreen
        console.log(arr.join())//red,blue,green
        console.log(arr.join('|'))//red|blue|green
        console.log(arr.join('||'))//red||blue||green
    </script>

正则表达式

作用

验证表单是否匹配(匹配)
过滤敏感词(替换)
提取字符串中想要的部分(提取)

介绍:

正则表达式是用于匹配字符串中字符组合的模式,在JS中,正则表达式也是对象

通常用来查找,替换那些复合正则表达式的文本,许多语言都支持正则表达式

语法

1.定义规则 2.根据规则查找

    <script>
        const str = '我们在学习前端,希望学习前端能够高新毕业'
        // 1.定义规则
        const reg = /前端/
        // 2.检测是否匹配
            // console.log(reg.exec(str))了解  返回数组,不匹配返回null
        console.log(reg.test(str))//若返回值为true,则匹配
    </script>

元字符

普通字符只能匹配字符串中与本身相同的字符,元字符是一些具有特殊含义的字符

例如 : [a-z] 替换abcdefghijk…

元字符分类:

边界符(表示位置,开头和结尾,必须用什么开头,用什么结尾)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1d76293Z-1686756418493)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/元字符边界符.jpg)]

量词(表示重复次数,例如手机号必须重复11次)

量词用来设定某个模式出现的次数

量词	说明
*	重复0次或更多次 >=0就🆗
+	重复一次或更多次>=1就🆗
?	重复零次或一次
{n}	重复n次例如{4}
{n,}	重复n次或更多次
{n,m}	重复n到m次

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-td4YSCst-1686756418493)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/元字符量词.jpg)]

字符类(比如 \d 表示 0~9)

[ ]匹配字符集合,后面的字符串只要包含[ ]中的任意一个(这一个可重复出现),就返回true

但是如果精确匹配的话/¹{2}$/可以选两个

[^a-z]表示取反,:除了[ ]中的a-z

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7eosyYLr-1686756418493)(…/…/…/…/…/…/vscode/第一次考核/第一次考核/images/字符类1.jpg)]

字符类常见简写方式:预定类😋

预定类	说明
\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\b\v\f]

修饰符

作用约束正则执行的某些细节行为,如是否区分大小写,是否支持多行匹配等

语法:/表达式/修饰符

i是单词ignore的缩写,正则匹配时字母不区分大小写

g时global的缩写,正则匹配所有满足正则表达式的结果

console.log(/a/i.test('a'))//true
console.log(/a/i.test('A'))//true

replace()替换

const str = 'java是一种编程语言,学完jaVa工资很高'
const  re = str.replace(/java/ig,'前端')
console.log(re)//前端是一种编程语言,学完前端工资很高

abc ↩︎

漉漓gg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript基础(3)

96,97,101,103,108,111,113,114,115,120(2),124,125WebAPIS1.Web API基本认知1.1constlet 和 const中建议const优先声名const arr=['red','pink','blue']arr=[1,2,3]console.log(arr)//报错同对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ujc1pySj-1686756418489)(…/…/…/…/…/…/vscode
复制链接

扫一扫