随笔- 67 文章- 0 评论- 0 阅读- 12655

Web API

1.引入

1. JavaScript的组成：

ECMAScript(JavaScript 语法)：JavaScript基础
是ECMAScript标准规定的基本语法，只学习基础语法，做不了常用的网页交互效果，是以后课程打基础
DOM（页面文档模型）和BOM（浏览器对象模型）总称为Web APIs
是W3C组织的标准，是JS独有党的部分，学习网页交互效果，以JS基础阶段为基础

2. Web API

API（Application Programing Interface）应用程序接口，是一些预先定义的函数，帮助程序员实现某种功能，无需理解内部机制，就是给程序员提供的一种工具
2.Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）
针对浏览器做交互效果

DOM

1.引入：

文档对象模型（Document Object Model,简称DOM），是一个接口，W3C已经定义了一些DOM接口，通过这些接口可以改变网页的内容，结构和样式。
DOM树：
文档：一个页面就是一个文档，DOM中用document表示
元素：页面中的所有标签都是元素，DOM中用element表示
节点：网页中的所有内容都是节点（标签，属性，文本，注释等等），DOM中用 node表示
DOM把以上内容都看作是对象

2.获取页面元素

1.通过ID来获取：document.getElementById（"id"）获取某一个页面元素

参数：
element是一个 Element（元素）对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
是自定义的id名
返回值：
返回一个匹配到 ID 的 DOM Element （元素）对象。若在当前 Document 下没有找到，则返回 null

<body>
      <div id='one'>xuexiya</div>
<!-- 因为文档页面从上到下加载，所以现有标签，则script写在标签的下面 -->
      <script>
          var time = document.getElementById("one");//页面中显示xuexiya
          console.log(time);//<div id='one'>xuexiya</div>
          console.log(typeof time);//object
          console.dir(time);//div#one,有助于更好的查看里面的属性和方法（了解）
      </script>
</body>

2.通过标签名来获取：document.getElementsByTagName("标签名")，来获取某类标签元素

<body>
    <li>你很好</li>
    <li>会好的</li>
    <li>越来越</li>
    <li>好呀</li>
    <script>
        var lis = document.getElementsByTagName('li');
        console.log(lis);//[li, li, li, li]
        //1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储
        console.log(lis[1]);//<li>会好的</li>
        //2.想要依次打印里面的元素对象，可以采取遍历
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
          //得到的是一个对象的集合，组成伪数组的形式
          //3. 得到的元素对象是动态的，就是当标签里面的内容变化时，不改变JS代码
//如果页面中只有一个li,返回的是伪数组的形式
//页面中没有li,返回的是空的伪数组的形式
    </script>

还可以获取某个父元素内部所有指定标签名的子元素
element.getElementsByTagName（"标签名"）;

<body>
   <ol id="ol">
    <li>你很好</li>
    <li>会好的</li>
    <li>越来越</li>
    <li>好呀</li>
   </ol>
    <script>
//此时，父元素必须是单个对象（指明是哪一个元素对象），
//获取的时候不包括父元素自己
// 如果直接 var ol=document.getElementById('ol');
// 得到[ol]是个伪数组，不是单个元素对象
// 将父元素指明一个id，再利用document.getElementById（"id"）得到单个父元素对象
var liss =document.getElementById("ol");
console.log(ol.getElementsByTagName("li"));//[li, li, li, li]
    </script>
</body>

3.通过HTML5新增得方法获取（IE9以上的版本支持）(相比之下，还是1和2用的较多)

1. 通过类名返回元素对象的集合document.getElementsByClassName("类名")

2. 通过指定选择器返回第一个元素对象 document.querySelector("选择器")

3. 通过指定选择器返回所有的元素对象集合 document.querySelectorAll("选择器")

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>123</li>
            <li>456</li>
        </ul>
    </div>
    <script>
        //1.根据类名获得元素对象集合,也是伪数组的形式
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);//[div.box, div.box]
        //2.通过指定选择器返回第一个元素对象,切记：里面的选择器需要加符号 ：类选择器：加点 ；id选择器：加# ；
        var box1 = document.querySelector('.box');
        console.log(box1);//<div class="box">盒子1</div>
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);// <li>123</li>
        //3.通过指定选择器返回所有的元素对象集合
        var all = document.querySelectorAll('.box');
        console.log(all);
        // 获取所有的盒子所在的标签 [div.box, div.box]
    </script>
</body>

4.特殊元素的获取

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

3. 事件

JS使我们有能力创建动态的页面，而事件就是可以被JS 检测到的行为
网页中的每个元素都可以产生某些可以触发JS的事件
事件由三部分组成：事件源，事件类型，事件处理程序
事件源就是被触发的对象，事件类型是指如何去触发，比如说是鼠标经过；事件处理程序就是通过一个函数赋值的方式去完成

<button id="aa">按钮一枚</button>
    <script>
         //要求：当点击一个按钮时，就会弹出一个对话框
         //分析：1.事件源就是被触发的对象 按钮
         //2.事件类型是指如何去触发 鼠标点击 onclick
         //3.事件处理程序就是通过一个函数赋值的方式去完成
var btn = document.getElementById("aa");
btn.onclick = function(){
    alert("你真棒");
}
    </script>
</body>

执行事件三步：1，获取事件源 2.注册事件（绑定事件）3.添加事件处理程序（通过一个函数赋值）
常见的鼠标事件：
onclick 触发条件：鼠标点击左键时触发
onmouseover 鼠标经过时触发
onmouseout 鼠标离开时触发
onfocus 获得鼠标焦点时触发
onblur 失去鼠标焦点时触发
onmousemove 鼠标移动时触发
onmouseup 鼠标弹起时触发
onmousedown 鼠标按下时触发

4，操作元素

JS中的DOM操作可以改变网页的内容，结构和样式；主要是利用DOM操作元素来改变元素里面的内容，属性等

1.改变元素的内容

有两种方式：element.innerText 和 element.innerHTML

<style>
        div,
        p {
            width: 100px;
            height: 180px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 题目：当我们点击了按钮，div里面的文字就会发生改变 -->
    <button>点击就会显示当前系统的事件哦</button>
    <div>某个时间</div>
    <p>修改呀</p>
    <script>
        //1.获取事件源 ,此题需要两个元素都获取
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //2.注册事件（绑定事件) btn.onclick
        //3.,添加事件处理程序
        btn.onclick = function () {
            //修改div里面的内容
            div.innerText = getDate();//调用了可以获取当前时间的函数
        }


        // 格式化年月日 星期 
        function getDate() {
            var today = new Date();
            var year = today.getFullYear();
            var month = today.getMonth() + 1;//记得在月份后加1后再输出
            var date = today.getDate();
            var day = today.getDay();
            //getDay()返回的是数字，可以：采用数组格式：
            // 将星期一，星期二等全部写到数组中去，然后getDay()返回的是数组的索引号去调用数组中的元素
            //数组中第一个必定是星期日，因为在getDay()方法返回中0 代表星期日
            var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return year + '年' + month + '月' + date + '日' + arr[day];
        }
        //2. 当然元素也也可以不添加事件（就直接修改内容，不需要触发）
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
</body>

区分两种方式：

<body>
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <script>
        var d = document.querySelector('div');
     d.innerText = "<strong>今天是2021年</strong>";
        //输出：<strong>今天是2021年</strong>；说明它不识别html标签
        //d.innerHTML = "<strong>今天是2021年</strong>";
        //输出的是加粗的今天是2021年，说明识别html标签
//2.这两个属性是可读写的，可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
//我是文字 123
console.log(p.innerHTML);
/*       我是文字
        <span>123</span>
*/
    </script>
</body>

总结：

innerText 不识别html 标签，非标准，去除空格和换行
innerHTML识别html 标签，是W3C标准，保留空格和换行
这两个属性是可读写的，可以获取元素里面的内容

2.改变元素的属性

<body>
    <!-- 下面是两个按钮加一个图片 -->
    <button id="t1">图1</button>
    <button id="t2">图2</button>
    <img src="tu1.jpg" alt="" title="图1">
    <!-- 其中的title属性是控制当鼠标放在图片上时的提示信息 -->
    <!-- 题目：当点击图1按钮，显示图1；当点击图1按钮，显示图2；同时，当鼠标放在图片上时的提示信息也随之改变 -->
    <script>
       //1.获得元素
       var t1 = document.getElementById('t1');
       var t2 = document.getElementById('t2');
       var img = document.querySelector('img');
       //2.注册事件  添加事件处理程序
       t1.onclick = function(){
           img.src="tu1.jpg";
           img.title='图1';
       }
       t2.onclick = function(){
           img.src="tu2.jpg";
           img.title='图2';
       }
       //通过标签名.   来获取其中的元素 
       //修改了图片的src 和 title 属性
    </script>
</body>

分时显示不同的图片和问候语:

例如：若在上午打开页面，显示上午好，显示上午的图片
分为上午，下午和晚上三个时间段
分析：

需要根据不同的系统时间，所以需要日期内置对象
利用分支语句来设置好不同的图片
需要一个图片，根据时间修改图片，就需要修改img元素的src属性
需要一个div元素，显示不同的问候语，就是修改元素的内容

<body>
    <img src="imagines/tu05.jpg" alt="">
    <div>大家上午好呀</div>
    <script>
        //1.获取元素
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2.得到当前的小时数
        //用到日期内置对象Date()
        var date  = new Date();
        var h = date.getHours();
        //3.判断小时数 利用分支语句来改变不同的图片和问候语
        if(h<12){
            img.src='imagines/tu05.jpg';
            div.innerText="大家上午好呀";
        }
        else if(h<18){
            img.src='imagines/tu06.jpg';
            div.innerText="大家下午好呀";
        }
        else{
            img.src='imagines/tu07.jpg';
            div.innerText="大家晚上好呀";
        }
    </script>
</body>

2.改变表单元素的属性

利用DOM可以操作表单元素的属性：type , value, checked ,selected ,disabled

1. 表单里面的值就文字内容通过value来修改的

2. 想要某个表单元素被禁用，不能再点击，可以 this.disabled =true;

<body>
    <!-- 下面是一个按钮加一个文本框 -->
    <button >按钮</button>
    <input type="text" value="请输入内容">
    <!-- 要求：当点击按钮时，文本框中的默认提示文字可以发生改变 -->
    <script>
        //1.获取元素
        //因为按钮元素被点击，表单文本内容被修改
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件 处理程序
        btn.onclick = function(){
            input.value = '点击时输入文本';
            //如果想此按钮经过上面一次点击后就不想被点击，就是想要某个表单元素被禁用，不能再点击
            this.disabled =true;
            this指向事件函数的调用者
        }
    </script>
</body>

实现HTML和CSS和JS搭配使用:先HTML,再css ,再JS

案例：显示隐藏的密码明文：
思路：当点击眼睛按钮时，把密码框类型改为文本框类型，就可以看见原来密码中小黑点的真实密码了，就是表单中的type的转换
一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
算法：利用一个flag变量，来判断flag的值，
如果是1，就切换为文本框，设置为0；
如果是0，就切换为密码框，设置为1；

<style>
        .box{
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            position:relative;
        }
        .box input{
            width: 370px;
            height: 30px;
            border:0;
            /* 想去除每次输入密码时的蓝色框 */
            outline:none;
        }
        .box img{
            width: 24px;
            /* 对密码框后面的眼睛按钮图片进行定位 ,别忘记子绝父相*/
            position:absolute;
            top:2px;
            right:20px;
        }
    </style>
</head>
<body>
    <!-- 一个div大盒子里面放两个小盒子 -->
    <div class="box">
        <!-- 密码框后面的眼睛按钮 -->
        <label for="">
            <img src="imagines/mi01.webp" id="eye">
        </label>
        <!-- 密码框 -->
        <input type="password" id="pas">   
    </div>
<!-- 想实现点击眼睛按钮的图片时，表单元素input中的type属性发生变化 -->
<script>
    //1.获取元素  按钮图片 和  表单元素input
    var eye = document.getElementById('eye');
    var pas = document.getElementById('pas');
    //2.注册事件 处理程序
    //实现点击按钮图片，密码框切换文本框
    // eye.onclick = function(){
    //     pas.type = 'text';
    // }
    //那想在密码框切换文本框时，就是可以看到密码时，换一个按钮的图片，
    //在这之后，想要再回到最初的密码框的状态呢？
    /*算法：利用一个flag变量，来判断flag的值，
如果是1，就切换为文本框，设置为0；
如果是0，就切换为密码框，设置为1；*/
var flag=0;
eye.onclick = function(){
    //点击一次之后，flag一定要变化
    if(flag==0){
        pas.type = 'text';
        eye.src='imagines/mi02.jpg';
        flag=1;
    }
    else{
        pas.type = 'password';
        eye.src='imagines/mi01.webp';
        flag=0;
    }
}   
</script>
</body>
</html>

3.修改样式属性

1.行内样式操作：element.style

JS 里面的样式采取驼峰命名法，例如：fontSize backgroundColor
JS 修改style 样式，产生的是行内样式，在CSS的权重较高
element就是某个元素
此方法仅使用于修改元素样式比较少，或者功能简单的

<style>
        div {
            width: 400px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- 想要点击盒子时，修改div大盒子的颜色 -->
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件 处理程序
        div.onclick = function () {
            //注意：此处的backgroundColor采取驼峰命名法
            this.style.backgroundColor = 'pink';
            //修改大小
            this.style.width = '600px';
        }

    </script>

</body>

案例1：关闭二维码（就是点击它旁边的叉号，二维码就隐藏）

核心思路：利用样式的显示和隐藏：
隐藏元素 display:none
显示元素 display:block

<body>
    <div class="box">
        二维码
        <img src="" alt="">
        <i class="btn">x</i>
    </div>
     <script>
         //1.获取元素
         var btn = document.querySelector('.btn');
         var box = document.querySelector('.box');
         //2.注册事件 处理程序
         btn.onclick = function(){
             box.style.display = "none";
         }
     </script>

案例2:淘宝循环精灵图

思路：精灵图中每个小图片的排列是有规律的，每个小盒子li中的背景图片是精灵图的每个小图片
就是利用for循环，修改精灵图片的背景位置background-position,让循环里面的i索引号乘以44px,就是每个图片的y坐标

<script>
        //1.获取所有的li
        var lis = document.querySelectorAll('li');
        //得到的是伪数组
        for(var i=0;i<lis.length;i++){
            var y=i*44;//纵坐标
            // 此处的要减y,backgroundPosition第一个是x,第一个是y,图片正在一行中往左排列
            lis[i].style.backgroundPosition = '0 -' + y +'px';
        }
    </script>

案例3:显示隐藏文本框内容

当鼠标点击文本框时，里面默认的文字隐藏，当鼠标离开文本框时，里面默认的文字又会显示
就是点击文本框，获得光标焦点时文字隐藏，失去光标焦点时文字显示
用到事件：
onfocus 获得鼠标焦点时触发
onblur 失去鼠标焦点时触发
如果获得焦点，先判断用户输入的表单里面的内容是否是默认文字，如果是，就清空表单内容，如果不是，就不清空表单内容，（一般网页搜索框不会让默认文字特别容易实现）
如果失去鼠标焦点，用户没有输入，就恢复默认值
同时默认文字颜色浅，而用户输入的文字颜色深
就是获得焦点时，文字颜色深；失去鼠标焦点，默认文字颜色浅

<body>
<input type="text" value="请输入：">
<script>
    //1.获取表单元素
    var text = document.querySelector('input');
    //2.获得鼠标焦点事件 onfocus

    //  如果获得焦点，先判断用户输入的表单里面的内容是否是默认文字，如果是，就清空表单内容，         
    text.onfocus = function () {
        if (this.value == '请输入：') {
            text.value = '';
        }
        this.style.color = '#333';
    }
    //3.失去鼠标焦点事件 onblur
    //用户没有输入，就恢复默认值
    text.onblur = function () {
        if (this.value == '') {
            text.value = "请输入：";
        }
        this.style.color = '#999';
    }
</script>
</body>

2.类名样式操作：element.className

想在事件触发时，改变更多的样式时，将样式写进CSS，在JS中引入
通过修改元素的className更改元素的样式，适合样式较多的或功能复杂的
className会直接更改元素的类名，会覆盖原先的类名；如果想保留原来的类名，可以类比于多类名选择器 this.className ="原类名新类名"

<style>
        div {
            width: 400px;
            height: 300px;
            background-color: red;
        }

        .change {
            background-color: pink;
            color: #fff;
            font-size: 25px;
            margin-top: 50px;
            width:600px;
        }
    </style>
</head>

<body>
    <div>更改成功</div>
    <!-- 想要点击盒子时，修改div大盒子的颜色 ,文字，上边距等样式-->
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件 处理程序
        div.onclick = function () {
            //  this.style.backgroundColor = 'pink';
            // this.style.width = '600px';
            this.className = 'change';
            //就是给当前调用此事件的对象添加了类名 ，相当于class = "change",就实现了CSS样式和JS的结合呀
        }

    </script>
</body>

密码框格式提示错误信息

例如：用户输入后的鼠标离开密码框，里面输入的个数不是6~16，则提示错误信息，否则提示输入正确信息

首先触发判断信息的事件时表单失去焦点onblur
如果输入正确，则提示正确的信息，信息颜色是绿色，是小图标对号
如果输入个数不是6~16，则提示错误的信息，信息颜色是红色，是小图标错号

<style>
        div {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            /* background: url(imagines/mi02.jpg) no-repeat left center; */
        }
        .wrong{
            color: red;
            /* background-image: url(imagines/mi01.jpg); */
        }
        .right{
            color: green;
            /* background-image: url(imagines/mi02.jpg); */
        }
    </style>
</head>
<body>
    <div class="re">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位的密码</p>
    </div>
<script>
    //1.获取表单和文字元素
    var ipt = document.querySelector('.ipt');
    var m = document.querySelector('.message');
    //2.失去焦点事件
    ipt.onblur = function(){
        //根据表单里面值得长度 ipt.value.length
        if(this.value.length<6||this.value.length>16){
            //因为提示得文字颜色和图片都变,使用className；同时它之前得类名设置保留
            m.className="message wrong";
            m.innerHTML="你输入的位数不对要求6~16位";
        }
        else{
            m.className="message right";
            m.innerHTML="你输入的正确";
        }
    }
</script>
</body>
</html>

5.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

先将所有元素全部清除样式
给当前元素设置样式

实例：有一组按钮，当点击其中一个，它自己变红

当想给多个按钮绑定点击鼠标事件时，用循环；
那如果点击哪一个按钮，它就显示有按钮颜色，用到this，表示当前调用此事件的对象；但仅仅这样，点击一个，一个变色，但点击另一个，第一个还是有颜色的，应该：
需要：先把所有的按钮背景颜色去掉，然后才将当前元素修改颜色

<body>
    <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(){
                // 先把所有的按钮 btns[i]背景颜色去掉 
                for(var i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor = '';
                }
                // 然后才将当前元素this修改颜色 
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
 </body>

实例：百度换肤：

当点击不同的小图片时，整个网页的背景图片也随之改变
思路：

给三个小图片，利用循环注册点击事件
当我们点击了这个图片，让网页背景改为当前图片
就是把当前图片的src路径取过来，给body作为背景

<style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: url(imagines/tu05.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 class="baidu">
         <li><img src="imagines/tu05.jpg" alt=""></li>
         <li><img src="imagines/tu06.jpg" alt=""></li>
         <li><img src="imagines/tu07.jpg" alt=""></li>
    </ul>
    <script>
        //1.获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //2.循环注册事件
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick = function(){
                //把当前对象的src就是this.src给body的url
                //访问body这个元素时， document.body
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
    </script>
</body>
</html>

实例：表格隔行变色效果

用到的鼠标事件：鼠标经过：onmouseover ; 鼠标离开： onmouseout
当鼠标经过行，当前的行变背景颜色，鼠标离开去掉当前背景颜色。
注意：第一行（thead里面的行）不需要变换颜色，因此获取的是tbody里面的行

<style>
        table {
            width: 480px;
            height: 600px;
            border: 1px;
            margin: auto;
        }

        thead tr {
            height: 100px;
            background-color: skyblue;
        }

        tbody tr {
            height: 100px;
            background-color: pink;
        }

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

<body>
    <!-- 表格分为thead和tbody两部分 -->
    <table>
        <thead>
            <tr>
                <th>代码1</th>
                <th>代码2</th>
                <th>代码3</th>
                <th>代码4</th>
                <th>代码5</th>
                <th>代码6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素：获取tbody里面的所有行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        //2.循环注册事件
        for (var i = 0; i < trs.length; i++) {
            // 鼠标经过事件：onmouseover  
            trs[i].onmouseover = function () {
                //当鼠标经过行，当前的行变背景颜色
                this.className = 'bg';
            }
            // 鼠标离开事件： onmouseout 
            trs[i].onmouseout= function () {
                // 鼠标离开去掉当前背景颜色。
                this.className = '';
            }
        }
    </script>
</body>

</html>

实例：表单全选取消全选

业务需求：
点击上面的全选复选框，这一列下面的所有复选框就可以全选上，
再点击上面的全选复选框，下面的所有复选框就可以都不选上，取消全选；
也可以一个一个的勾选上，实现全选，此时使得上面的全选复选框钮也会自动勾选上；
也可以再一个一个的点击一下，实现取消选择此选项，取消全选时，此时上面的全选复选框也会自动取消勾选；
所有复选框一开始默认都没有选中状态
分析：
(1) 全选和取消全选：让下面所有复选框的checked属性（默认选中状态）跟随着全选按钮
（2）下面的按钮反过来影响全选按钮:只有当下面的所有复选框全部选中，上面的全选复选框才选中：
给下面的所有复选框绑定点击事件，每次点击都要循环检查下面所有的复选框是否有没被选中的，如果有一个没被选中的，上面的全选复选框就不选中

 <style>
        table {
            width: 300px;
            height: 500px;
            border: 1px;
            margin: auto;
        }

        thead tr {
            height: 100px;
            background-color: skyblue;
        }

        tbody tr {
            height: 100px;
            background-color: pink;
        }

        input {
            width: 20px;
            float: left;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="all">
                    </th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="box">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        //一.全选和取消全选：让下面所有复选框的checked属性（默认选中状态）跟随着全选按钮
        //1.获取元素
        var all = document.getElementById('all');//全选按钮
        //选取在tbady中的所有按钮
        var box = document.getElementById('box').getElementsByTagName('input');//得到的是伪数组
        //2.绑定事件  当点击全选按钮时，下面的所有按钮也都全部选中
        all.onclick = function () {
            //复选框的checked属性（默认选中状态）checked="checked"
            //this.checked 可以得到当前全选按钮的选中状态，若是true,就是选中，若是false,就是未选中
            //使用for循环来使下面的所有按钮也都全部选中
            for (var i = 0; i < box.length; i++) {
                box[i].checked = this.checked;
            }
        }
        //二.只有当下面的所有复选框全部选中，上面的全选复选框才选中
        /*给下面的所有复选框绑定点击事件,利用循环来实现*/
        for (var i = 0; i < box.length; i++) {
            box[i].onclick = function () {
                //每次点击都要循环检查下面所有的复选框是否有没被选中的
                //如果有一个没被选中的，上面的全选复选框就不选中
                var flag = true;//设计标记位，标记全选复选框是否选中
                for (var j = 0; j < box.length; j++) {
                    if (!box[j].checked) {//下面的某一个复选框有没被选中
                        // all.checked=false;
                        //    直接让标记位
                        flag = false;
                        break;
                    }
                }
                //检查完所有的下面的所有复选框
                all.checked = flag;
            }
        }
    </script>
</body>

</html>

自定义属性的操作

1. 获取属性值

1. element.属性和 2. element.getAttribute('属性')

区别：

element.属性获取的是内置属性值，就是元素本身自带的属性，比如：id class等 img的src title 属性等
element.getAttribute('属性') 获取的是自定义属性, 就是程序员自定义的属性

2. 设置属性值

1. element.属性 = “值” 和 2. element.setAttribute('属性'，‘值’)

区别：

element.属性= “值” 设置内置属性值，就是元素本身自带的属性，比如：id class等 img的src title 属性等
element.setAttribute('属性'，‘值’) 设置自定义属性值, 就是程序员自定义的属性
element.setAttribute('属性'）移除元素的属性

<body>
     <div id="123" index="222" class="nav"></div>
     <script>
         var div = document.querySelector('div');
        //  console.log(div.id);//123
        //  console.log(div.getAttribute('id'));//123
        //  console.log(div.index);//undefined，因为index是自定义属性
        //  console.log(div.getAttribute('index'));//222
        //  div.className="666";
        //  console.log(div.className);//666
        div.setAttribute('class','footer');
        console.log(div.getAttribute('class'));////footer
         div.setAttribute('index','footer');
         console.log(div.getAttribute('index'));//footer
注意：class属性在被element.属性访问时，用.className
在被element.getAttribute('属性')访问时，用class

3.设置H5自定义属性：

有时不好判断到底是内置属性还是自定义属性，
H5自定义就规定自定义属性是以data- 开头作为属性名，并且赋值

<body>
     <div gettime="22" data-index="2"></div>
     <p data-list-value="666"></p>
     <script>
         var div = document.querySelector('div');
         console.log(div.gettime);//undefined
         console.log(div.getAttribute('gettime'));//22
         div.setAttribute('data-time','200');//增添自定义属性
         console.log(div.getAttribute('data-time'));//200
         //h5新增了获取自定义属性的方法
         //element.dataset.index  或者 element.dataset['index']
         console.log(div.dataset);//{index: "2", time: "200"}
         //dataset是一个集合，里面存放了所有以data- 开头的自定义属性
         console.log(div.dataset.index);//2
         console.log(div.dataset.time);//200
         //如果自定义属性
         var p = document.querySelector('p');
         console.log(div.dataset.listValue);
         console.log(div.dataset['listValue']);
         //
     </script>
</body>

3.tab栏切换布局分析：

某一栏中点击某一项，就显示相应的页面，会让第一个为默认选项，仅显示相应的页面内其他内容不显示容
分析：

tab栏切换有2个大的模块，上面的模块选项卡，点击某一个，当前的这一个的底色是红色，其余不变，就是“排他思想”
某一栏中点击某一项，仅显示相应的页面内其他内容不显示容，就是“排他思想”

<style>
        .current {
            background-color: red;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <!-- tab栏切换布局 -->
    <!-- HTML布局：一个大盒子里面分为上下两个盒子，上面的有五个li成一行，
    下面的部分时五个div,里面的内容与上面的li一一对应 -->
    <!-- 让第一个默认选项，显示相应的页面内容 ，先在CSS中设置将所有div内容进行隐藏
    在单独让第一个内容显示,用行内样式-->
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_content">
            <div class="item" style="display:block;">商品介绍模块的内容</div>
            <div class="item">规格与包装模块的内容</div>
            <div class="item">售后保障模块的内容</div>
            <div class="item">商品评价模块的内容</div>
            <div class="item">手机社区模块的内容</div>
        </div>
    </div>
    <script>
        //1.上面的模块选项卡，点击某一个，当前的这一个的底色是红色，其余不变，就是“排他思想”
        // 底色的设置放到单独的类current中，当点击某一个选项卡时，添加此类，其余选项卡没有
        //1.获取所有的li,
        var tab_list = document.querySelector('.tab_list');
        var lis = document.querySelectorAll('li');
        var items = document.querySelectorAll('item');
        //2.循环给这些模块添加点击事件
        for (var i = 0; i < lis.lengtth; i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function () {
                //排他思想，先清除所有li的class的类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = "";
                }
                //给当前的li添加class属性中的current
                this.className = 'current';
                this.getAttribute('index');
                items[index].style.display = 'block';
            }
        }
        //下面的模块内容，会随着上面选项卡变化，就是下面的模块写到上面选项卡的点击事件中
//关键是下面的模块内容和上面选项卡一一对应，那怎莫直到点击的是哪一个li呢？
//核心：给所有的li添加自定义属性，属性值从0开始编号
//lis[i].setAttribute('index',i);
// 知道是那个li，就对应于编号显示相应的div
    </script>
</body>
</html>

体会到：自定义属性是为了保存数据并且使用数据

posted on 2021-11-05 23:08 精致猪猪侠阅读(278) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

2025年3月

日

一

二

三

四

五

六

昵称：精致猪猪侠
园龄： 3年6个月
粉丝： 0
关注： 5

+加关注