前端之JS篇(七)——Web APIs&DOM部分内容

编程语言 2023-06-24 20:00:48 阅读次数: 0

1.Web APls

1.1 Web APls 和JS基础关联性

1.1.1 JS的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxIKCtsY-1666024858704)(Typora_image/302.png)]

1.1.2 JS基础阶段以及Web APls阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3fUduIw-1666024858705)(Typora_image/303.png)]

1.2 API 和 Web API

1.2.1 API

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6mksnmh-1666024858706)(Typora_image/304.png)]

1.2.2 Web API

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DN2XcaTQ-1666024858707)(Typora_image/305.png)]

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wiBtHti2-1666024858709)(Typora_image/306.png)]

1.2.3 API和 Web API 总结

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。

2.Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。

3.Web API 一般都有输入和输出(函数的传参和返回值)，Web API很多都是方法(函数)。

4.学习Web API 可以结合前面学习内置函数对象方法的思路学习，(1.作用？2.需要参数？3.返回值？4.代码验证)。

2. DOM

Web APlsd的两大核心，一个是DOM(页面文档对象模型)，另一个是BOM(浏览器对象模型)。

2.1 什么是DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1TRsSxte-1666024858709)(Typora_image/307.png)]

DOM主要讲解四大部分：获取元素，事件基础，操作元素，节点操作。

2.2 DOM 树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZu9ThIO-1666024858714)(Typora_image/308.png)]

2.2 获取页面元素

DOM在我们实际开发中主要用来操作元素

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式：

根据ID获取
根据标签名获取
通过HTML5新增的方法获取
特殊元素获取

2.2.1 根据ID获取

使用getElementById()方法可以获取带有ID的元素对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8J3S4WYs-1666024858715)(Typora_image/309.png)]

新建.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>
</head>
<body>
   <!-- #time  快速输入-->
   <div id="time">2022-10-6</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签  所以我们script写到标签的下面
        // 2.get意思是获得    element意思是元素    by意思是通过     
        // 3.用驼峰命名法严格区别大小写
        // 4. 参数 id 是大小写敏感的字符串,参数位置加引号的原因
        // 5.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印返回的元素对象 查看元素的属性和方法  
        console.dir(timer);
    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AViNHBjf-1666024858716)(Typora_image/310.png)]

2.2.2 根据标签名获取

使用 getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OCG8u1JI-1666024858717)(Typora_image/311.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhuhJIFJ-1666024858718)(Typora_image/315.png)]

新建.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>
    
</head>
<body>
    <!-- ul>li*5 使用快捷键-->
    <ul>
        <!-- 快捷键 shift + alt + A + 鼠标点击 -->
        <li>秋天来了，树叶都变黄了！1</li>
        <li>秋天来了，树叶都变黄了！2</li>
        <li>秋天来了，树叶都变黄了！3</li>
        <li>秋天来了，树叶都变黄了！4</li>
        <li>秋天来了，树叶都变黄了！5</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合  以伪数组的形式存储的
        // 伪数组:对象形式，只有数组的length属性和索引下标属性

        var lis = document.getElementsByTagName('li');
        console.log(lis);
        // 输出第一个元素
        console.log(lis[0]);

        // 2.想要依次打印里面的元素对象我们额可以采用遍历的方式
        for (var i = 0; i < lis.length;i++) {
            console.log(lis[i]);
            console.log(typeof lis[i]);
        }

        // 3.如何页面中只有一个li,返回的还是伪数组的形式
        // 4.如果页面中没有这个元素，返回的还是空的伪数组
    </script>

   

</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yZGIlSQU-1666024858719)(Typora_image/313.png)]

拓展：

新建.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>
</head>
<body>
    <!-- ul>li*4 -->
    <ul>
        <li>今天是阴天1</li>
        <li>今天是阴天2</li>
        <li>今天是阴天3</li>
        <li>今天是阴天4</li>
    </ul>
    <!-- ol>li*4 -->
    <ol id = 'ol'>
        <li>记得多穿点衣服1</li>
        <li>记得多穿点衣服2</li>
        <li>记得多穿点衣服3</li>
        <li>记得多穿点衣服4</li>
    </ol>
    
    <script>
        // 1.需求：只获取ol标签里面的元素 
        //    解决： element.getElementsByTagName('标签名');  父元素必须是指定的单个元素
        var ol =  document.getElementsByTagName('ol');      // ol
        // 伪数组不能作为父元素，伪数组里面的指定元素可以作为父元素
        // console.log(ol.getElementsByTagName('li'));   Uncaught TypeError: ol.getElementsByTagName is not a function
        console.log(ol[0].getElementsByTagName('li'));

        console.log('**********************');


        // 优化
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));


    </script>

    

</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jX68MKpC-1666024858720)(Typora_image/314.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lUMcLLm2-1666024858722)(Typora_image/312.png)]

2.2.3 通过HTML5新增的方法获取

ie9以上版本才支持

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBSt26eK-1666024858724)(Typora_image/317.png)]

新建.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>
</head>
<body>
    <!-- .box*2 -->
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <!-- #nav -->
    <div id="nav">
        <!-- ul>li*2 -->
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
        <script>
            // 1. getElementsByClassName  根据类名获得某些元素集合
            var boxs = document.getElementsByClassName('box');
            console.log(boxs);
            // 总结：通过类名、通过id、通过标签名都可以得到元素集合
            // 2. querySelector 返回指定选择器的第一个元素对象
            //  切记：使用querySelector时，里面的选择器需要加符号  类选择器(.box),id选择器(#nav)
            var firstBox = document.querySelector('.box');
            console.log(firstBox);
            var nav = document.querySelector('#nav');
            console.log(nav);
            var li = document.querySelector('li');
            console.log(li);
            console.log('**********************************');
            // 3. querySelectorAll()返回指定选择器的所有元素对象集合
            var allBox = document.querySelectorAll('.box');
            console.log(allBox);
            var lis = document.querySelectorAll('li')
            console.log(lis);
        </script>

    </div>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t8jddlmQ-1666024858725)(Typora_image/316.png)]

2.2.4 获取特殊元素(body,html)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f6ngzKrV-1666024858726)(Typora_image/318.png)]

新建.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>
</head>
<body>
    <script>
        // 文档页面从上往下加载，所以先得有标签  所以我们script写到标签的下面
        // 1.获取body  元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);

        // 2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);    
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d7lqplZT-1666024858728)(Typora_image/319.png)]

2.3 关于伪数组

1.伪数组的特点：
    1.是Object对象
    2.有length属性
    3.数值有下标属性，可以用索引
    4.没有数组特别的方法: forEach(), push(), pop(), splice()
2.常见的伪数组：
    1.jQuery 对象（比如 $(“div”) ）
    2.函数内部的 arguments
    3.DOM 对象列表（比如通过 document.getElementsByTags ，document.childNodes返回的NodeList对象）
3.伪数组的意义：
    伪数组存在的意义，是可以让普通的对象也能正常使用数组的很多方法（push和forEach等）
4.伪数组转换为真正的数组
    可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象
5.判断一个对象是否属于“伪数组”
    1.Array.isArray
    2.instanceof

2.4 事件基础

2.4.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解: 触发 ----响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

新建.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>
</head>
<body>
    <!-- button#btn 快捷键 -->
    <button id="btn">唐伯虎</button>
    <script>
        // 需求：点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成   事件源  事件类型  事件处理程序   我们也称为事件三要素
        // (1). 事件源  事件被触发的对象    谁---按钮
        var btn = document.getElementById('btn')
        console.log(btn);      // <button id="btn">唐伯虎</button>
        // (2) 事件类型  如何触发  什么事件   比如鼠标点击(onclick)  还是鼠标经过   还是键盘按下
        // (3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('点秋香');
        }
    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uzwN0cJb-1666024858729)(Typora_image/320.png)]

2.4.2 执行事件的步骤

1.获取事件源

2.注册事件(绑定事件)

3.添加事件处理程序(采取函数赋值形式)

新建.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>
</head>
<body>
    <div>123</div>
    <script>
        // 执行事件步骤实例
        // 需求：点击div 控制台输出  我被选中了

        // 1.获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L85zJEKU-1666024858730)(Typora_image/321.png)]

2.4.3 常见的鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6XB1FYJg-1666024858731)(Typora_image/322.png)]

应用场景例如：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DlM62edS-1666024858731)(Typora_image/323.png)]

2.5 操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

2.5.1 改变元素的内容(操作元素重点一)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2KLNgjp-1666024858733)(Typora_image/324.png)]

新建.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>
        div,p {
            width: 300px;
            height: 35px;
            /* 垂直居中---行高等于盒子高度   偏上---行高小于盒子高度  偏下---行高大于盒子高度*/
            line-height: 50px;
            color: aqua;
            background-color: orange;
        }
   </style>

</head>
<body>
    <button>显示当前系统事件</button>
    <div>某个时间</div>
    <p>456</p>
    <script>
        // 需求：当我们点击 了按钮，div里面的文字会发生变化
        // 1.获取元素   (两个元素：按钮，时间)
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.注册事件
        btn.onclick = function() {
              div.innerHTML = getDate();
        }

        // 获取当前系统的时间
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期天'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }


        // 我们元素可以不用添加事件,一刷新直接显示当前时间
        // 操作DOM
        // 1.获取元素
        var p = document.querySelector('p');
        p.innerHTML = getDate();
       

    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PS8m6xbo-1666024858734)(Typora_image/325.png)]

innterText和innerHTML的区别

新建.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>
</head>
<body>
    <div></div>
    <p>
        我是文字

        <span>123</span>
    </p>

    <script>
        // innerText 和 innerHTML的区别
        var div = document.querySelector('div');
        // 1.innerText 不识别html标签  非标准    读的时候去除空格和换行
        // div.innerText = '<strong>今天是:</strong>2022-10-7';      // <strong>今天是:</strong>2022-10-7

        // 2.innerHTML 识别html标签   W3C标准   读的时候保留空格和换行
        div.innerHTML = '<strong>今天是:</strong>2022-10-7';


        // 3.这两个属性是可读写的 ---> 可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EjCKdFEY-1666024858735)(Typora_image/326.png)]

2.5.2 常用元素的属性操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5ueS2ve-1666024858738)(Typora_image/327.png)]

新建.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>
</head>
<body>
    <button id='ldh'>刘德华</button>
    <button id='zxy'>张学友</button>
    <img src="images/ldh.jpg" alt="" width="200" height="200">
    <script>
        // 需求：点刘德华--->出现刘德华图片，点张学友--->出现张学友图片
        // 修改元素属性  src
        // 1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelector('img')
        // 2.注册事件 处理程序
        zxy.onclick = function() {
            img.src = 'images/zxy.jpg';
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = 'images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rsG6PKC-1666024858740)(Typora_image/328.png)]

2.5.3 案例：分时显示不同图片，显示不同问候语

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bFd5RLnY-1666024858741)(Typora_image/329.png)]

新建.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>
        img {
            width: 300px;
        }
    </style>
</head>
<body>
    <img src="images/s.jpg" alt="">
    <div>上午好</div>
    <script>
        /* 
        案例分析
        1.根据系统不同时间来判断，所以需要用到日期内置函数
        2.利用多分支语句来设置不同的图片
        3.需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性
        4.需要一个div元素，显示不同问候语，修改元素内容即可
        */
        // 1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div')
        // 2. 得到当前的小时数
        var date = new Date();
        console.log(date);
        var h = date.getHours();
        // 3.判断小时数改变图片和文字信息
        if (h < 12) {
            img.src = 'images/s.jpg';
            div.innerHTML = '早上好啊，今天是个好日子';
        } else if (h < 18) {
            img.src = 'images/x.jpg';
            div.innerHTML = '下午好啊，今天日落很漂亮';
        } else {
            img.src = 'images/w.gif';
            div.innerHTML = '晚上好啊，去跑步啊~';
        }


    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kFg5xEYj-1666024858742)(Typora_image/330.png)]

2.5.4 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

新建.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>
</head>
<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 需求：通过点击按钮，输入框里的值发生变化
        // 1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2.注册事件 处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了';  此时页面没反应
            // 原因: innerHTML 是对于普通盒子  比如 div 标签里面的内容，对于表单里面的属性不适用
            input.value = '被点击了';

            // 需求2: 按钮点击一次之后被禁用  disabled   
            // btn.disabled = true;

            // 也可以用this来实现
            this.disabled = true;
            // this 指向的是事件函数的调用者(此处是指btn调用了)
        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BKXfGbPR-1666024858743)(Typora_image/331.png)]

(此处知识点可结合往期前端之HTML篇(二)——HTML标签详解之表单标签部分学习)

2.5.5 案例:仿京东显示密码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psJACmD6-1666024858745)(Typora_image/332.png)]

新建.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 {
            width: 400px;
            border-bottom: 1px solid #ccc;
            /* auto  浏览器计算外边距 */
            margin: 100px auto;
        }
        /* 设置输入框格式 */
        .box input {
            position: relative;
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        /* 设置图片格式 */
        .box img {
            /* 利用定位，定到最右边  子绝父相 */
            position: absolute;
            top: 112px;
            right: 570px;
            width: 24px;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 一般lable和input标签混合使用，为了增加用户体验lable的for属性值
            和input里面的id属性值一样时，比如性别选择中，点击男就可以选择前面的按钮 -->
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">       
    </div>
    <script>
        // 1.获取元素   获取两个元素，一个图标，一个input
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2.注册事件  处理程序   点击睁眼图标显示密码  点击闭眼图片不显示密码
        var flag = 0;
        eye.onclick = function() {
            if (flag == 0) {
                pwd.type = 'text';
                // 点击一次之后，flag一定要变化
                flag = 1;
                // eye.src = 'images/open.png';
                // 此时用this也可以
                this.src = 'images/open.png';

            } else {
                pwd.type = 'password';
                flag = 0;
                // eye.src = 'images/close.png';
                // 此时用this也可以
                this.src = 'images/close.png';
            }
            
        }


    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cItF9yg-1666024858747)(Typora_image/333.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGFeu2zI-1666024858748)(Typora_image/334.png)]

2.5.6 改变元素的属性(操作元素重点二)

我们可以通过JS修改元素的大小、颜色、位置等样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BR3Bs25U-1666024858750)(Typora_image/335.png)]

1.element.style 演示 ，新建.html文件，执行代码如下:

(element.style 适用于样式修改比较少的情况)

(行内样式权重比较高)

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div ></div>
    <!-- 需求：点击div盒子，让它变成紫色 -->
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件  处理程序
        div.onclick = function() {
            // div里面的属性采取驼峰命名法  不再像css的background-color了
            // div.style.backgroundColor = 'purple';
            // this 表示当前的事件源
            this.style.backgroundColor = 'purple';
            // 需求提升：让宽度变大 高度变小
            this.style.width = '250px';
            this.style.height = '100px';

        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uIkFH6ca-1666024858751)(Typora_image/336.png)]

2.关于element.className 类名操作样式的演示 见下文2.5.10部分

特点：element.className适用于样式修改比较多的情况

2.5.7 案例：淘宝点击关闭二维码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Km96usTf-1666024858753)(Typora_image/337.png)]

新建.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 {
            position: relative;
            width: 80px;
            height: 90px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* 默认的格式  display"block */
        }
        .box img {
            width: 60px;
            margin-top: 5px;

        }
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            /* cursor: pointe 鼠标经过或点击有小手样式 */
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        // 1.获取元素    "x"号需要点击  box需要关掉
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 2.注册事件，处理程序
        btn.onclick = function() {
            // 注意，下行不能用this,如果用了的话，this指代的事件源是btn,但实际我们需要调用得到的是box的属性        
            box.style.display = 'none';
            // this.style.display = 'none';    用这行，结果是 x 号没了，二维码还在
        }
    </script>
</body>
</html>

(本案例的核心是:display的属性，它有两个值，block——显示，none ——隐藏。点击x号后，并不是删掉了，而是隐藏起来了)

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TqogVE1x-1666024858755)(Typora_image/338.png)]

2.5.8 案例：循环精灵图背景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTK9jK3M-1666024858755)(Typora_image/339.png)]

本案例所演示的精灵图sprite.png，如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgCVziTE-1666024858756)(Typora_image/340.png)]

新建.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;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 32px;
            height: 32px;
            background-color: orange;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>
<body>
    <!-- .box>ul>li*12 -->
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        // 1.获取元素  所有的小li
        var lis = document.querySelectorAll('li');
        for (var i =0; i < lis.length; i++) {
            // 让索引号  乘以 44 就是每个li 的背景y坐标  index就是我们的y的坐标
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>
</html>

效果如下

(因精灵图不是标准精灵图)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NRTh5NNR-1666024858758)(Typora_image/341.png)]

2.5.9 案例：显示隐藏文本框内容

当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B7AVH0Cv-1666024858759)(Typora_image/342.png)]

新建.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>
        input {
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册实际  获得焦点事件  onfocus
        text.onfocus = function() {
            // console.log('得到了焦点');
            // 下行的this指代函数的调用者，指text
            // 点击输入框时，显示为空，如果输入的不是默认值时，显示不为空
            if (this.value === '手机') {
                // 如果你输入的值等于默认值，清空操作
                this.value = '';
            }
            // 获得焦点需要把文本框里面的文字颜色变黑
            this.style.color = '#333';
        }
        // 3.注册事件  失去焦点事件 onblur
        text.onblur = function() {
            console.log('失去了焦点');
            // 什么都没输入，显示默认值；如果输入了不是默认值，显示为输入的值，不显示默认值s
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MvGEDLLJ-1666024858760)(Typora_image/343.png)]

案例细节

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJ80eeZt-1666024858760)(Typora_image/344.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ktipFNRY-1666024858762)(Typora_image/345.png)]

2.5.10 使用className修改样式属性(修改样式属性的方法二)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPdwXBUd-1666024858763)(Typora_image/346.png)]

新建.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>
        div {
            width: 200px;
            height: 150px;
            background-color: aqua;
        }
        .change {
            background-color: orange;
            color: blue;
            font-size: 30px;
            margin-top: 50px;

        }
    </style>
</head>
<body>
    <!-- 需求1:点击div盒子，让背景色变色 -->
    <div class="first">文本</div>
    <script>
        // 1.使用 element.style 获得修改元素样式   特点: 如果样式比较少 或者 功能简单的情况下
        var test = document.querySelector('div');
        test.onclick = function() {
           /*  this.style.backgroundColor = 'purple';
            // 需求2：再修改文字颜色
            this.style.color = '#fff';
            // 需求3：修改字体大小
            this.style.fontSize = '25px';
            // 需求4：再移动位置 调整上边距
            this.style.marginTop = '100px'; */
            // 2.使用element.className更改元素的样式  特点：适合于样式较多或者功能复杂的情况
            // 第二种方法，让当前盒子添加已经修改好样式的类
            // 此处为什么直接不是this.class的原因：因为class已经是保留字
            // this.className = 'change';   // 意思是当我们当前元素的类名改为了change 这个类

            // 3.因为element.className会直接覆盖之前的类名，如果想要保留原先的类名，我们可以这么做
            // 用法：this.className = '原类名 新类名';   多类名选择器
            this.className = 'first change';



        }
    </script>
    
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1gzyeYz-1666024858763)(Typora_image/347.png)]

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BePfJ3Mv-1666024858764)(Typora_image/348.png)]

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B5LphMzM-1666024858765)(Typora_image/349.png)]

2.5.11 案例：密码框格式提示错误信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3x8J96QH-1666024858765)(Typora_image/350.png)]

新建.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>
        div {
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        .wrong {
            clear: red;
            background-image: url(images/wrong.png);
        }
        .right {
            color: greenyellow;
            background-image: url(images/right.png);
            background-size: 22px 22px;
        }
        
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
        /* 
        案例分析
        1.首先判断的事件是表单失去焦点 onblur
        2.如果输入正确则提示正确的信息颜色为绿色小图标变化
        3.如果输入不是6到16位，则提示错误信息颜色为红色  小图标变化
        4.因为里面变化样式较多，我们采用className修改样式  
        */
        // 1.获取元素   表单和p
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message')
        // 2.注册事件  失去焦点(事件源:表单)
        ipt.onblur = function() {
            // 根据表单里面值的长度  ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                // 给p标签添加新的类样式，并保留之前的样式，对于相同的样式属性，新样式会覆盖旧样式的属性
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对，要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }

        // 
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xwVD61uO-1666024858766)(Typora_image/351.png)]

2.5.12 操作元素总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M2yE3w2k-1666024858767)(Typora_image/352.png)]

需要掌握的案例：

案例1 世纪佳缘 用户名 显示隐藏内容
案例2 京东关闭广告(直接隐藏即可)
案例3 新浪下拉菜单(微博即可)
案例4 开关灯效果(一个按钮，点击一次，变黑 ；再次点击按钮，变亮)

2.5.13 排他思想

前面的例子主要是针对于一个元素添加的事件，遇到一组元素添加事件怎么办？(例如轮播图小按钮)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubWcI0YB-1666024858768)(Typora_image/353.png)]

新建.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>
</head>
<body>
    <!-- 需求1：给每个按钮都添加事件 -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        // 1.获取所有按钮元素
        var btns = document.getElementsByTagName('button');
        // btns得到的伪数组   里面的每一个元素 btns[i]
        for (var i = 0;i < btns.length; i++) {
            // 利用循环的方式都给每个按钮绑定了一个点击事件
            btns[i].onclick = function() {
                // console.log('123');
                // 需求2：点击哪个按钮，哪个按钮变色
                
                // 注意点：
                // 1.我们先把所有的按钮背景颜色去掉
                for (var i = 0; i < btns.length; i++) {
                    btns[i].style.backgroundColor = '';
                }
                // 2.然后才让当前的元素背景颜色为紫色
                this.style.backgroundColor = 'purple';
                
            }
        }
        // 2.首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BID28aNB-1666024858769)(Typora_image/354.png)]

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uKYAHjDi-1666024858770)(Typora_image/355.png)]

2.5.14 案例：百度换肤

需求：给定4个图片，点击哪个图片，哪个图片设定为当前壁纸

案例分析：

1.这个案例练习的是给一组元素注册事件

2.给4个小图片利用循环注册点击事件

3.当我们点击了这个图片，让我们页面背景改为当前的图片

4.核心算法：把当前图片的src路径取过来，给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;
        }
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        li {
            list-style: none;
        }
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        .baidu img {
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- ul.baidu>li*4 -->
    <ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
    </ul>
    <script>
        // 1.获取元素    选取所有的图片img
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2.循环注册事件
        for (var i = 0; i < imgs.length;i++) {
            imgs[i].onclick = function() {
                // this 指当前点击的那张图片
                // console.log(this.src);   
                // this.src  就是点击图片的路径，把这个路径this.src给body就可以了
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fvBs5JLj-1666024858771)(Typora_image/356.png)]

2.5.15 案例：表格隔行变色

案例：给一个表格，当鼠标经过某一行时，某一行会变色

案例分析：

1.用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout

2.核心思路：鼠标经过tr行(当前行)，当前的行变背景颜色，鼠标离开去掉当前的背景颜色

3.注意：第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行

新建.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>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            /* border-collapse 用于表格属性, 表示表格的两边框合并为一条 表示折叠边框 */
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <!-- tr>td*6 -->
            <tr>
                <td>代码</td>
                <td>名称</td>
                <td>最新公布净值</td>
                <td>累计净值</td>
                <td>前单位净值</td>
                <td>净值增长率</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0001</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0002</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0003</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0004</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0005</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0006</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0007</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0008</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0009</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
            <tr>
                <td>0010</td>
                <td>开放债券</td>
                <td>1.075</td>
                <td>1.79</td>
                <td>1.074</td>
                <td>+0.046%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是tbody里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2.利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                // console.log(11);
                this.className = 'bg';
            }
            // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }

        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHHuHV9d-1666024858771)(Typora_image/357.png)]

2.5.16 案例：表单全选、取消全选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cUtdlDw4-1666024858772)(Typora_image/358.png)]

新建.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>
        * {
            padding: 0;
            margin: 0;
        }
 
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
 
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
 
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
 
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
 
        td {
            font: 14px "微软雅黑";
        }
 
        td:nth-of-type(1) {
            text-align: center;
        }
 
        tbody tr,
        tfoot tr {
            background-color: #f0f0f0;
        }
 
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
 
        button {
            width: 50px;
        }
    </style>
</head>
<body>
     
    <!-- 表格外部容器 -->
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll"  checked ='checked'/>
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>土豆丝</td>
                    <td>2元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>鸡肉</td>
                    <td>30元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>香蕉</td>
                    <td>4元</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>面包</td>
                    <td>8元</td>
                </tr>
 
            </tbody>
        </table>
    </div>
    <script>
        // 1.全选和取消全选做法：让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        //获取全选的这个复选框
        var j_cbAll = document.getElementById("j_cbAll");
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');  // 下面所有的复选框

        // 1.注册事件
        j_cbAll.onclick = function() {
            // this.checked 可以得到当前复选框的选中状态,如果是true,就是选中;如果是false,就是未选中。
            this.checked;
            // 让所有下面的复选框都选中
            for (var i = 0; i < j_tbs.length; i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        // 2.下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环
        //    查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
        for (var i =0; i < j_tbs.length;i++) {
            j_tbs[i].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    // 某一个按钮没有被选中
                    if (!j_tbs[i].checked) {        
                        flag = false;
                        break;    // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了。
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bu3sNZLN-1666024858773)(Typora_image/359.png)]

2.5.17 自定义属性操作

程序员自己添加的属性，称为自定义属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ALTwkIk4-1666024858774)(Typora_image/360.png)]

新建.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>
</head>
<body>
    <!-- #demo -->
    <!-- 假设自定义index属性，业务场景的需要，为了区分 -->
    <div id="demo" index="10"></div>
    <script>
        var div = document.querySelector('div');
        // 1.获取元素的属性值  两种方式
        // (1) element.属性
        console.log(div.id);                            // demo
        // (2) element.getAttribute('属性')   get 得到获取  attribute 属性的意思  
        console.log(div.getAttribute('id'));            // demo
        // 2.程序员自己添加的属性，称为自定义属性   比如：自定义属性index,如何获取它的值呢？如下
        console.log(div.getAttribute('index'));         // 10
    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IqohTpZ4-1666024858774)(Typora_image/361.png)]

2.5.18 案例：tab栏切换(重点)

当鼠标点击上面相应的选项卡(tab)，下面内容跟随变化
在这里插入图片描述
在这里插入图片描述

新建.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;
        }
        
        li {
            list-style: none;
        }
        .tab {
            width: 800px;
            margin: 100px auto;
            
        }
        .tab_list {
            
            height: 30px;
           
            border-bottom: 1px solid red;
 
        }
        
        .tab_list ul li {
            float: left;
            padding:5px 50px 5px 50px ;
            text-align: center;
            cursor: pointer;
        }
      
        .tab_list .current {
            background-color: red;
            color: #fff;
        }
        .item {
            display: none;
        }
 
    </style>
</head>
<body>
   <div class="tab">
    <div class="tab_list">
        
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（1.1万+）</li>
            </ul>
    
    </div>
    <div class="tab_con">
        <div class="item" style="display: block;">
            商品介绍模块内容
        </div>
        <div class="item">
            规格与包装模块内容
        </div>
        <div class="item">
            售后保障模块内容
        </div>
        <div class="item">
            商品评价模块内容
        </div>
    </div>
   </div>
   <script>
       //2.上面的选项卡，点击某一个 当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
    //    获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    var items = document.querySelectorAll('.item');
    //for循环绑定点击事件
    for(var i=0;i<lis.length;i++){
        // 开始给5个li设置索引号
        lis[i].setAttribute('index',i);
        lis[i].onclick = function(){
            //排他思想  干掉其他人
            for(var i=0;i<lis.length;i++){
                lis[i].className='';
            }
            // 留下我自己
            this.className='current';
            //2.下面的显示内容模块
            var index = this.getAttribute('index');
            // console.log(index);
            //排他思想
            // 干掉所有人  让其余的item 这些div隐藏
            for(var i=0;i<items.length;i++){
                items[i].style.display = 'none';
            }
            // 留下我自己 让对应的item  显示出来
            items[index].style.display = "block";
        }
    }
   </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gTRLkgPX-1666024858775)(Typora_image/364.png)]

2.5.19 H5的自定义属性

如何判断是不是自定义属性，H5规定自定义属性data-开头作为属性名并且赋值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AOeFdLNy-1666024858776)(Typora_image/365.png)]

新建.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>
</head>
<body>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        // 获取getTime属性
        var div = document.querySelector('div');
        console.log(div.getTime);  // undefined    原因：自定义属性不能用element.属性获取，只能用getAttribute获取
        console.log(div.getAttribute('getTime'));           // 20
        // 为了解决上列情况，如何判断是不是自定义属性，H5规定自定义属性data-开头作为属性名并且赋值
        // 设置自定义属性
        div.setAttribute('data-time',20);
        console.log(div.getAttribute('data-time'));         // 20
        console.log(div.getAttribute('data-list-name'));    // andy
        // H5新增的获取自定义属性的方法dataset，它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);                      // OMStringMap {index: '2', time: '20'}
        // 取对象的属性，方法一
        console.log(div.dataset.index);                // 2
        // 取对象的属性，方法二
        console.log(div.dataset['time']);              // 20


        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);            // andy
        console.log(div.dataset['listName']);            // andy

        // 总结：getAttribute获取元素属性  兼容性更强

    </script>
</body>
</html>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mi46n4Ij-1666024858777)(Typora_image/366.png)]

猜你喜欢

转载自blog.csdn.net/m0_57021623/article/details/127380197
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022