zoukankan html css js c++ java

Web APIs---3. DOM(2)

4.5 案例

排他思想（算法）

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1. 获取所有按钮元素
        btns = document.getElementsByTagName('button');
        //2. 绑定事件
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //（1）将所有按钮背景颜色去掉
                for (var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                //(2)将当前按钮的背景颜色设置为粉红色
                this.style.backgroundColor = 'pink';

            }
        }
    </script>
</body>

百度换肤效果(样式省略)

错误写法

<body>
    <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. 获取所有li元素
        var pics = document.getElementsByTagName('li');
        for (var i = 0; i < pics.length; i++) {
            console.log(i); //0 1 2 3
            pics[i].onclick = function() {
                document.body.style.background = 'url(images/' + i + '.jpg)';
            }
        }
    </script>
</body>

正确写法

<body>
    <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. 获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        //2. 注册事件
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

鼠标经过表格行，该行高亮

用到鼠标经过onmouseover 鼠标离开onmouseout

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1. 获取元素
        var tr = document.querySelector('tbody').querySelectorAll('tr'); //注意：一定要是：单个元素.单个元素or 单个元素.集合 not 集合.单个元素 not 集合.集合

        //2. 绑定事件   若改成鼠标点击click变成高亮，那么就要用排他思想了
        for (var i = 0; i < tr.length; i++) {
            tr[i].onmouseover = function() {
                this.className = 'bg';
            }
            tr[i].onmouseout = function() {
                this.className = '';

            }
        }
    </script>
</body>

添加了一个样式

/* 比较友好的写法是在css里面写一个类 */

.bg {
    background-color: pink;
}

表单全选以及取消全选案例

样式省略

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                        <!-- 对于复选框，有一个属性checked,若写成checked='checked'则默认被选中，若不写该属性(如上) 则默认未被选中-->
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>

    <script>
        //全选和取消全选做法
        //获取事件
        all = document.querySelector('thead').querySelector('input');
        inputs = document.querySelector('tbody').querySelectorAll('input');
        //注册事件
        all.onclick = function() {
            // console.log(this.checked);
            //this.checked可以得到当前复选框的选中状态，如果是true就是选中，如果是false就是未选中
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = this.checked;
            }
        }

        //2 下面复选框需要全选中，最上面的按钮才会被选中
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                //flag 控制全选按钮是否选中
                var flag = true;
                //每次点击下面的复选框都要检查4个小按钮是否全被选中
                for (var i = 0; i < inputs.length; i++) {
                    //如果下面某一个复选框没有被选中
                    if (!inputs[i].checked) {
                        flag = false;
                    }
                }
                all.checked = flag;
            }
        }
    </script>
</body>

4.6 自定义属性操作

获取属性值的方法：element.属性、element.getAttribute('属性')

<body>
    <!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
    <div id="demo" index="1"></div>
    <script>
        var div = document.querySelector('div');
        
        //1. 获取元素的属性值
        // (1)element.属性   该方法常常用于获取元素本身的属性
        console.log(div.id); //demo

        //（2）element.getAttribute('属性')   该方法常常用于获取元素自定义的属性
        console.log(div.getAttribute('id')); //demo
        console.log(div.getAttribute('index')); //1
    </script>
</body>

自定义属性值---->element.属性 = '值'、element.setAttribute('属性','值')

说明：
setAttribute('属性','值')不仅可以修改已经有的自定义属性值，还可以创建目前没有的属性并设置值

<body>
    <!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //2. 设置元素属性值
        // (1)element.属性 = '值'   该方法常常针对元素本身的属性
        div.id = 'test'
        div.className = 'navs'; //这个特殊用的是className而不是class 
        //（2）element.setAttribute('属性','值')  该方法常常针对元素自定义的属性
        div.setAttribute('index', '2');
        div.setAttribute('class', 'footer');//该方法既可以修改自定义属性又可以修改原先自带的属性
    </script>
</body>

移除属性---->removeAttribute()

语法

element.removeAttribute("属性");

<body>
    <!-- id是元素本身的属性，index是自定义属性（程序员自己添加的属性） -->
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        //3 移除属性
        div.removeAttribute('index');
    </script>
</body>

案例tab栏切换（重点案例）

tab栏切换有两个大的模块
上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变(排他思想)
下面的模块内容，会随着上面选项卡变化。所以下面的模块变化写到点击事件里面
规律：下面模块显示内容和上面的选项卡一一对应，相匹配
问题是怎么知道点击的是哪一个li呢
解决思路：给上面的tab_lis里面所有的小li添加自定义属性，属性值从0开始编号
样式

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    .tab {
         978px;
        margin: 100px auto;
    }
    
    .tab_list {
        height: 39px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    
    .tab_list li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
    }
    
    .tab_list .current {
        background-color: #c81623;
        color: #fff;
    }
    
    .item_info {
        padding: 20px 0 0 20px;
    }
    
    .item {
        display: none;
    }
</style>

结构

<div class="tab">
    <div class="tab_list">
        <ul>
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价（50000）</li>
            <li>手机社区</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">
            商品评价（50000）模块内容
        </div>
        <div class="item">
            手机社区模块内容
        </div>

    </div>
</div>

js脚本之上面的模块

<script>
    //1. 上面的模块选项卡，点击某一个，当前这个底色会是红色，其余不变（排他思想）
    //获取元素
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');

    //for循环绑定点击事件
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            //干掉所有人 其余的li清除 class="current"这个类
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            //留下我自己
            this.className = 'current';
        }
    }
</script>

js脚本之在上面的基础上添加下面的模块

<script>
    //获取元素
    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. 下面的显示内容模块
            //获取当前小li的索引号
            var index = this.getAttribute('index');
            //干掉所有人 让其余的item这些div隐藏
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            //留下我自己
            items[index].style.display = 'block';
        }
    }
</script>

4.7 H5自定义属性

<body>
    <div getTime='20' data-index="2" data-time="30" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getTime); //undefined  该方式无法获取自定义属性
        console.log(div.getAttribute('getTime')); //20
        console.log(div.getAttribute('data-index')); //2
        console.log(div.getAttribute('data-list-name')); //andy

        // H5新增获取自定义属性的方法  它只能获取data-开头的
        //dataset是一个集合，里面存放了所有以data开头的自定义属性
        console.log(div.dataset); //DOMStringMap {index: "2", time: "30", listName: "andy"}
        console.log(div.dataset['index']); //2
        console.log(div.dataset.index); //2
        //如果自定义属性里有多个-连接的单词，我们获取的时候采取驼峰命名法
        console.log(div.dataset.listName); //andy
        console.log(div.dataset['listName']); //andy
    </script>
</body>

getAttribute较为常用，因为兼容性较好

查看全文

相关阅读:
CSS字体和文本
 【操作系统学习】操作系统概念（一）
宜家通信会员管理表结构搭建
 【优化框架】优化断言，断言返回结果是否包含特定字符串
 【Faker库】faker库（随机生成数据）使用总结转载
 Python+selenium 【第七章】Unittest学习
 Python+selenium 【第六章】UI自动化框架操作测试对象
 Python+selenium 【第五章】UI自动化元素等待
 【Jenkins】python项目集成jenkins并配置allure报告 mac/windows方法一致
 Python+selenium 【第八章】开源项目实战

原文地址：https://www.cnblogs.com/deer-cen/p/12230282.html

热门文章
开通博客
 MRC下delegate 野指针问题
 CSS盒子模型
 css的position属性
 css浮动float属性
 HTML表单
 css基础布局
 html表格
 CSS背景和列表
 CSS选择样式