webApi02

最新推荐文章于 2024-07-12 13:52:46 发布

Ordbiao

最新推荐文章于 2024-07-12 13:52:46 发布

阅读量80

点赞数

分类专栏： webapi 文章标签： javascript

本文链接：https://blog.csdn.net/tooHar/article/details/116203764

版权

webapi 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

笔记目录

小概
1. attribute语法
2. 排他思想
- 2.1 案例1
- 2.2 案例2
3. 开关思想
- 3.1 案例1
- 3.2 点餐选择框
4. tab栏切换案例
总结

小概

这章案例比较多，attribute语法操作元素，排他思想，开关思想，tab栏切换等案例.

1. attribute语法

attribute作用：用于操作元素行内自定义属性

元素的属性有三种:
(1)标准属性： css可以识别的属性（行内/行外）
(2)行内自定义属性： css不可以识别的属性
(3)点语法动态添加属性
attribute语法：
获取属性：元素.getAttribute(‘属性名’)
设置属性：元素.setAttribute(‘属性名’,属性值)
删除属性：元素.removeAttribute(‘属性名’)

        let box = document.querySelector('#box');//获取id=box的这个html元素
                //(1)获取属性
        console.log( box.getAttribute('aaa') );//啊啊啊

        //(2)设置属性
        box.setAttribute('bbb','666');//属性名不存在则动态添加
        box.setAttribute('aaa','888');//属性名存在则修改

        //(3)删除属性
        box.removeAttribute('aaa');

    <script>
        /*需求： 
            0.单数行： 绿色  双数行：黄色
            1.鼠标移入每一个li元素 : 颜色变红色
            2.鼠标移出每一个li元素： 颜色恢复原先的颜色
        */

        //1.获取元素
        let liList = document.querySelectorAll('li');

        //2.注册事件
        //遍历liList
        for (let i = 0; i < liList.length; i++) {
            
            //2.1 修改颜色
            liList[i].style.backgroundColor = (i % 2 == 0 ? 'green' : 'yellow');
            
            //2.2 移入事件
            liList[i].onmouseover = function () { 
                //3.事件处理  this : 当前移入的li元素
                //3.1 先使用自定义属性存储 原先的颜色
                this.setAttribute('adds', this.style.backgroundColor );
                //3.2 修改颜色
                this.style.backgroundColor = 'red';
            };

            //2.3 移出事件
            liList[i].onmouseout = function () { 
                //3.事件处理  this : 当前移入的li元素
                this.style.backgroundColor = this.getAttribute('adds');
            };
        };

注意：attribute语法可以操作行内标准属性（行外也不行），但是一般不会用于操作标准属性（标准属性直接点出来）；点语法也可以动态添加自定义属性，但是属性不会在DOM树显示（attribute添加的自定义属性会在行内样式中看到）。

2. 排他思想

:排除不符合条件的，留下符合条件的。

2.1 案例1

需求：点击每一个按钮：(1)修改自己的样式：文字变选中，颜色变粉 (2)其他按钮样式恢复默认

    <button>未选中</button>
    <button>未选中</button>
    <button>未选中</button>
    <button>未选中</button>
    <button>未选中</button>
    <script>
        let btnList = document.querySelectorAll('button'); //获取所有的button元素

        for(let i=0;i<btnList.length;i++){    //遍历所有button
            btnList[i].onclick = function(){    //给每个button添加点击事件
                // console.log(this);
                //this:btnList[i]             this 是指向当前点击的按钮(事件源)
                for(let j =0 ; j<btnList.length;j++){     //遍历每个button 判断是否被选中
                    if(btnList[j] != this){           //排他思想， 设置未被点击的btn的样式
                    btnList[j].innerText = '未选中';
                    btnList[j].style.backgroundColor = null;
                }else{
                    btnList[j].innerText = '选中';      //点击的btn
                    btnList[j].style.backgroundColor = 'pink';
                }
                }
            }
        }

2.2 案例2

需求：1.鼠标移入每一个li元素：排他思想 (1)自己opacity变成1 （2）其他li元素opacity变成0.4
2.鼠标移出wrap盒子：每一个li元素透明度1

    <div class="wrap">
        <ul>
            <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
            <li><a href="#"><img src="images/06.jpg" alt="" /></a></li>
        </ul>
    </div>
    <script>
        let liList = document.querySelectorAll('ul li');   //获取所有的li元素
        let wrap = document.querySelector('.wrap');    //获取外面的wrap盒子
        // 需求1
        for(let i =0;i<liList.length;i++){      //循环为每个li添加onmouseover事件
            liList[i].onmouseover =function(){    //绑定事件
                for(let j=0;j<liList.length;j++){    //循环所有的li
                    if(liList[j]==this){                //判断是否是触发事件的这个li
                        liList[j].style.opacity = 1;
                    }else{
                        liList[j].style.opacity = 0.4;    //为被排除的li添加样式
                    }
                }
            }
        }
        // 需求2
        wrap.onmouseout =function (){
            for(let i =0; i<liList.length;i++){
                liList[i].style.opacity=1;
            }
        }

    </script>

3. 开关思想

3.1 案例1

需求：实现勾选框的全选和全不选，反选

    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">
    <input class='check' type="checkbox">

    <input id="checkAll" type="button" value="全选">
    <input id="unCheckAll" type="button" value="全不">
    <input id="reverseCheck" type="button" value="反选">

    <script>
        let iptList = document.querySelectorAll('.check');    // 获取所有的选框
        let allCheck = document.querySelector('#checkAll');   //获取全选按钮
        let allNncheck = document.querySelector('#unCheckAll');    //获取全不选按钮
        let reverseCheck = document.querySelector('#reverseCheck');   //获取反选按钮

        allCheck.onclick = function () {
            for (let i = 0; i < iptList.length; i++) {
                iptList[i].checked = true;
            }
        }
        allNncheck.onclick = function () {
            for (let i = 0; i < iptList.length; i++) {
                iptList[i].checked = false;
            }
        }
        reverseCheck.onclick = function () {
            for (let i = 0; i < iptList.length; i++) {
                iptList[i].checked = !iptList[i].checked;
            }
        }
    </script>

3.2 点餐选择框

需求：实现勾选框的全选和全不选，当所有选择框选择时全选框也选中。

    <table>
        <tr>
            <th>
                <input type="checkbox" id="checkAll" />全选/全不选
            </th>
            <th>菜名</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>红烧肉</td>
            <td>隆江猪脚饭</td>
            <td>￥200</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>香酥排骨</td>
            <td>隆江猪脚饭</td>
            <td>￥998</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>北京烤鸭</td>
            <td>隆江猪脚饭</td>
            <td>￥88</td>
        </tr>
    </table>

    <script>
        let checkAll = document.querySelector('#checkAll');
        let checkList = document.querySelectorAll('.check')

        // 实现全选和全不选效果
        checkAll.onclick = function () {
            for (let i = 0; i < checkList.length; i++) {
                checkList[i].checked = checkAll.checked;  //把全选的选中状态赋值给所有选择框
            }
        }

        // 实现选择框全部选中自动勾选全选按钮    
        for (let i = 0; i < checkList.length; i++) {  
            checkList[i].onclick = function () {   //  循环给每个选择框绑定单击事件
                let ck = true;                   // 定义全部选中时全选框的选中状态
                for (let j = 0; j < checkList.length; j++) {
                    if (!checkList[j].checked) {    // 循环判断所有选框是否全部选中
                        ck = false;     //有未选中的则把全选框的选中状态改为false
                    }
                }
                checkAll.checked = ck;  // 把判断后的状态赋值给全选框
            }
        }

4. tab栏切换案例

需求分析
点击上方按钮：
1.排他思想修改按钮样式：自己颜色变粉色，其他按钮样式恢复默认
2.排他思想显示对应盒子：下标一致的盒子显示，其他的盒子隐藏

        <div class="Box" id="box">
            <button class="current">按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
            <button>按钮4</button>
            <div class="con" style="display:block">内容1</div>
            <div class="con">内容2</div>
            <div class="con">内容3</div>
            <div class="con">内容4</div>
        </div>
        <script>
            // let buttonList = document.querySelectorAll('button');
            // let con = document.querySelectorAll('.con');
            // for (let i = 0; i < buttonList.length; i++) {
            //     buttonList[i].onclick = function () {
            //         for (let j = 0; j < buttonList.length; j++) {
            //             if (buttonList[j] == this) {
            //                 buttonList[j].className = 'current';
            //                 con[j].style.display = 'block';
            //             } else {
            //                 buttonList[j].className = '';
            //                 con[j].style.display = 'none';
            //             }
            //         }
            //     }
            // }

            let btnList = document.querySelectorAll('button');
            let conList = document.querySelectorAll('.con');

            //用attribute给每个btn加个下标 ，判断点击的下标等于遍历到的下标 给样式
            // 通过setAttribute加的属性，不能用this点出来
            for (let i = 0; i < btnList.length; i++) {
                btnList[i].setAttribute('index', i);
                btnList[i].onclick = function () {
                    // let index= this.index;
                    let index = btnList[i].getAttribute('index');
                    console.log(index);
                    for (let j = 0; j < btnList.length; j++) {
                        if (j == index) {
                            btnList[j].className = 'current';
                            conList[j].style.display = 'block';
                        } else {
                            btnList[j].className = '';
                            conList[j].style.display = 'none';
                        }
                    }
                }
            }
        </script>

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

总结

多敲多练，多动手少动嘴。

Ordbiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webApi02

笔记目录小概1. attribute语法2. 排他思想2.1 案例12.2 案例23. 开关思想3.1 案例13.2 点餐选择框2.读入数据总结小概这章案例比较多，attribute语法操作元素，排他思想，开关思想，tab栏切换等案例.1. attribute语法attribute作用：用于操作元素行内自定义属性元素的属性有三种:(1)标准属性： css可以识别的属性（行内/行外）(2)行内自定义属性： css不可以识别的属性(3)点语法动态添加属性attribute语
复制链接

扫一扫