JavaScript之web APIs 基本认知

变量声明

const优先 语义化更好 数组和对象优先用const声明

基本数据类型的值或引用数据类型地址发生变化时,变量需要进行运算时,用let声明

web APIs

作用: 使用js操作html和浏览器

分类:

DOM document object model 文档对象模型 操作网页内容html中的标签

BOM browser object model 浏览器对象模型 BOM包含DOM window对象

DOM树

DOM对象

将网页标签当作对象object处理,根据html标签生成的js对象

document对象 -- DOM提供的一个对象,网页所有内容都在document里面

获取DOM对象

根据CSS选择器来获取DOM元素

1.获取一个DOM元素

querySlector获取单个元素,可直接操作修改

   //参数:包含一个或多个css选择器 字符串
   document.querySlector('css选择器')

//返回值:css匹配的第一个元素是一个htmlElement对象,如果没有匹配到,返回为null
   <div class="box">123
        <div id="nav">
            <ul>
                <li>首页</li>
            </ul>
        </div>
    </div>
    <script>
        //根据html标签选择
        const box = document.querySelector('div')
        //根据css的class类名选择
        const box = document.querySelector('.box')
        //能直接对DOM元素操作修改
        box.style.color = '#050505'
        //根据css的ID选择
        const nav = document.querySelector('#nav')
        //根据html标签向下查找
        const li = document.querySelector('ul li:first-child')

2.获取多个DOM元素

querySelectorAll得到的是伪数组,有长度有索引号,无法使用pop(),push()等数组方法 哪怕只有一个元素也是数组形式,需要用for遍历数组得到每一个元素

    //返回值:匹配的是NodeList 对象集合
     document.querySelectorAll('css选择器')

            <ul class='nav'>
                <li>首页</li>
                <li>产品</li>
                <li>联系我们</li>
                <li>公司简介</li>
            </ul>
            <script>
            //返回伪数组形式,不能直接操作修改,只能通过遍历数组的方式修改
             const lis = document.querySelectorAll('.nav li')
             for(let i=0;i<lis.length;i++){
                 console.log(lis[i]);
             }
            </script>

操作DOM元素文字

元素.innerText属性 显示纯文本,不解析标签

    <div> 我是一个美女</div>
    <script>
        //1.获取元素
        const box = document.querySelector('div')
        //2.获取元素的文本内容
        console.log(box.innerText);
        //3.修改文本内容
        box.innerText = '我是一个靓仔'
    </script>

元素.innerHTML属性 能解析标签,多标签使用模版字符串

    <div>我是一个美女</div>
    <script>
        //1.获取元素
        const box = document.querySelector('div')
        //2.获取标签内部文字
        console.log(box.innerHTML);
        //3.修改标签内部文字
        box.innerHTML = '<strong>我是一个靓仔</strong>'
    </script>

案例 -- 随机生成数组中人名

     <h2>
        一等奖:<span class="one"></span>
     </h2>
     <h3>
        二等奖:<span class="two"></span>
     </h3>
     <h4>
        三等奖:<span class="three"></span>
     </h4>
     <script>
     const personArr = ['刘德华','周星驰','张学友','周杰伦','古天乐']
        //一等奖
        //随机得到数组的下标
        const random = Math.floor(Math.random()*personArr.length)
        //获取dom元素
        const one = document.querySelector('.one')
        //修改文本内容为数组中的随机元素
        one.innerHTML = personArr[random]
        //删除随机选中元素不会重复
        personArr.splice(random,1)

        //二等奖
        const random1 = Math.floor(Math.random()*personArr.length)
        const two = document.querySelector('.two')
        two.innerHTML = personArr[random1]
        personArr.splice(random1,1)

        //三等奖
        const random2 = Math.floor(Math.random()*personArr.length)
        const three = document.querySelector('.three')
        three.innerHTML = personArr[random2]
        personArr.splice(random2,1)
        </script>

操作DOM元素属性

1.操作元素常用属性 href title src

对象.属性 = 值

       <img src='images/1.png' title='小红的美照' alt='' />
        <script>
        const img = document.querySelector('img')
        img.src = 'images/图片3.png'
        img.title = '小明的帅照'
        </script>

2.操作元素样式属性

 1.通过style属性操作css

对象.style.样式属性 = 值

       const element = document.querySelector('div')
       //一定要加css单位
       element.style.width = '300px'
       element.style.height = '300px'
       //属性有-连接符,采取小驼峰命名法
       element.style.backgroundColor = '#000'
       element.style.border = '2px solid blue'
       element.style.borderTop = '2px solid red'

body对象可直接获取

   document.body.style.backgroundImage = 'url(./1.png)'

2.操作类名(className)操作css

元素.className = 'active' (active是class名)

    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px 0;
            padding: 10px;
            bottom: 1px solid #000;
        }
    </style>
    
    <div class="nav">123</div>
    
    <script>
        const element = document.querySelector('.nav')
        //新类名覆盖旧类名
        element.className = 'box'
    </script>

3.通过classList操作css,用于追加或删除类名

元素.classList.add('类名')

元素.classList.remove('类名')

元素.classList.toggle('类名') 有就删掉,没有就追加上

 <style>
        .box{
            width: 300px;
            height: 300px;
            margin: 100px 0;
            padding: 10px;
            bottom: 1px solid #000;
        }
        .active{
            color: red;
            background-color: pink;
        }
    </style>
    
    <div class="box">123</div>
    <script>
        const element = document.querySelector('div')
        //追加新类名
        element.classList.add('active')
        //删除旧类名
        element.classList.remove('box')
        //有就删掉,没有就追加上
        element.classList.toggle('active')
    </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>
        *{
            box-sizing: border-box;
        }
        .slider{
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
        .slider-wrapper{
            width: 100%;
            height: 320px;
        }
        .slider-wrapper img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .slider-footer{
            height: 80px;
            background-color: rgb(100,67,68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
        .slider-footer .toggle{
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
        .slider-footer .toggle button{
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border:none;
            background: rgba(255,255,255,0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .slider-footer .toggle button:hover{
            background: rgba(255,255,255,0.2);
        }
        .slider-footer p{
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .slider-indicator{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
        .slider-indicator li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        .slider-indicator li.active{
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="">
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev"></button>
                <button class="next"></button>
            </div>
        </div>
    </div>
    <script>
      const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    //获取img标签
     const img = document.querySelector('.slider-wrapper img')
    //数组对象随机下标生成
     const random = parseInt(Math.random()*sliderData.length)
     //随机生成img图片src
     img.src = sliderData[random].url
     //获取标题p标签
     const p = document.querySelector('.slider-footer p')
     //随机生成标题
     p.innerHTML = sliderData[random].title
     const footer = document.querySelector('.slider-footer')
     //生成的是行内样式表 权重比较高
     footer.style.backgroundColor = sliderData[random].color
     //小圆点获取,随机下标+1是li标签的序号
     const circle = document.querySelector(`.slider-indicator li:nth-child(${random+1})`)
     //添加类名
     circle.classList.add('active')
    </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>
        *{
            box-sizing: border-box;
        }
        .slider{
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
        .slider-wrapper{
            width: 100%;
            height: 320px;
        }
        .slider-wrapper img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .slider-footer{
            height: 80px;
            background-color: rgb(100,67,68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
        .slider-footer .toggle{
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
        .slider-footer .toggle button{
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border:none;
            background: rgba(255,255,255,0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .slider-footer .toggle button:hover{
            background: rgba(255,255,255,0.2);
        }
        .slider-footer p{
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
        .slider-indicator{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
        .slider-indicator li{
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
        .slider-indicator li.active{
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="">
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
      const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const footer = document.querySelector('.slider-footer')
    //设置自变量起始值
    let i=0
    function slider(){
    //设置一个变量自增++
    i++
    //当图片到最后一张时,大于等于数组长度,应变成第一张图,将变量重置为0
    if(i >= sliderData.length){
        i=0
    }
    img.src = sliderData[i].url
    p.innerHTML = sliderData[i].title
    footer.style.backgroundColor = sliderData[i].color

    //获取li
    const circle = document.querySelector(`.slider-indicator li:nth-child(${i+1})`)
    //先移除以前的高亮类名active
    // document.querySelector(`.slider-indicator li:nth-child(${i})`).classList.remove('active')
    document.querySelector(`.slider-indicator .active`).classList.remove('active')
    //为当前li添加active
    circle.classList.add('active')
    }

    setInterval(slider,1000)
    </script>
    </body>

3.操作表单元素属性

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

    <input type="text" value="夏天">
    <script>
        //获取表单标签
        const uname = document.querySelector('input')
        //查询表单内部value值
        console.log(uname.value)
        //修改表单value值
        uname.value = '冬天'
        //修改表单type类型
        uname.type = 'password'
    </script>

表单属性 checked disabled selected为布尔类型 只有true和false两个值

    <input type="checkbox" checked>
    <button disabled>点击</button>
    <script>
       const ipt = document.querySelector('input')
       //checked 只有true和false,勾选中为true,不☑️为false
       ipt.checked = false

       const button = document.querySelector('button')
       //disabled 禁用按钮 true为禁用 false不禁用
       button.disabled = false
    </script>

4.自定义属性

data-自定义属性

标签上一律以data开头

DOM对象中一律以dataset对象方式获取

    <div class="box" data-id="1" data-size="12">苹果</div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.dataset.size)
    </script>

定时器-间歇函数

每隔一秒钟自动执行一段代码,无需手动触发,如倒计时

定时器有开启和关闭两种功能

开启 setInterval(函数,间隔时间)

        //两种写法(匿名函数写法),间隔时间单位是毫秒
        setInterval(function(){
             console.log('一秒执行一次');
         },1000)
         
         //(具名函数写法)
        function fn(){
            console.log('一秒执行一次');
        }
        //fn函数名后不用加()
        setInterval(fn,1000)

关闭 setInterval(函数,间隔时间)

let 变量名 = setInterval(函数,间隔时间)

clearInterval(变量名)

        function fn(){
            console.log('一秒执行一次');
        }
        let clear = setInterval(fn,1000)
        clearInterval(clear)

案例 -- 用户协议5秒倒计时

     <textarea name="" id="" cols="30" rows="10">
        用户协议
      该软件受_________国著作权法和国际条约条款的保护。
      商标的使用应符合商标惯例，包括和商标所有人名称的一致。
      商标可以仅用于对该软件产品的识别。对于任何商标的该种使用都不会导致对该商标使用权的拥有。
      除上述以外，该协议不授予你该软件上的任何知识产权。
    </textarea>
    <br>
    <button disabled>我已经阅读了协议(10)</button>
    <script>
        const btn = document.querySelector('button')
        let i =10
        let a = setInterval(function(){
             i--
          btn.innerHTML = `我已经阅读了协议 (${i})`
          if(i<0){
           //关掉定时器
            clearInterval(a)
            btn.disabled = false
            btn.innerHTML = '同意'
          }
          
          },1000)
    </script>