前端学习day16-DOM：实现tab选项卡的几种写法，window事件，input事件，表单提交获取单选框中的值

拾歡

已于 2022-07-05 11:43:03 修改

阅读量328

点赞数

文章标签：前端 html javascript

于 2022-07-04 22:25:57 首次发布

本文链接：https://blog.csdn.net/qq_45926448/article/details/125608697

版权

1.tab选项卡

页面结构

<style>
        ul,li{
            overflow: hidden;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        li{
            float: left;
            width: 100px;
            line-height: 30px;
            text-align: center;
            border: solid 1px red;
        }
        .content {
            width: 500px;
            height: 400px;
            background: lightblue;
        }
        .content div {
            display: none;
        }
        .content .show {
            display: block;
        }
        .active {
            background: red;
        }
    </style>
<nav>
        <ul>
            <li class="active">体育</li>
            <li>财经</li>
            <li>美女</li>
        </ul>
    </nav>
    <div class="content">
        <div class="show">
            篮球  足球 乒乓其
        </div>
        <div>
            我今天又亏了5000块
        </div>
        <div>
            哈哈哈哈哈哈
        </div>
    </div>

dom：

1.1给JS对象添加自定义属性

li.num=i;

 <script>
        var lis = document.querySelectorAll("li");
        var contents = document.querySelectorAll(".content div");

        for(var i = 0;i < lis.length;i++){
            var li = lis[i];
            // 给js对象添加属性
            // 添加自定义属性
            li.num = i;
            console.dir(li);
            li.onclick = function () {
                // 把所有的kill掉
                lis.forEach(function (el) {
                    el.classList.remove("active");
                })
                // 让点击的元素处于激活状态  this
                this.classList.add("active");
                console.log(" ===== ",this.num);        
                // 先kill所有的
                contents.forEach(function (el) {
                    el.classList.remove("show");
                })
                 // this.num 当前点击对象所对应的自定义属性值
                 contents[this.num].classList.add("show");
            }
        }

    </script>

1.2 通过setAttribute添加自定义属性

li.setAttribute("num",i);

  <script>
        var lis = document.querySelectorAll("li");
        var contents = document.querySelectorAll(".content div");

        for(var i = 0;i < lis.length;i++){
            var li = lis[i];     
            // 添加自定义属性
            li.setAttribute("num",i);
            console.dir(li);
            li.onclick = function () {
                // 把所有的kill掉
                lis.forEach(function (el) {
                    el.classList.remove("active");
                })
                // 让点击的元素处于激活状态  this
                this.classList.add("active");  
                // 先kill所有的
                contents.forEach(function (el) {
                    el.classList.remove("show");
                })
                 // this.num 当前点击对象所对应的自定义属性值
                 contents[this.getAttribute("num")].classList.add("show");
            }
        }
    </script>

1.3 通过dateset添加自定义属性

li.dataset.num = i;

 <script>
        var lis = document.querySelectorAll("li");
        var contents = document.querySelectorAll(".content div");

        for(var i = 0;i < lis.length;i++){
            var li = lis[i];
            
            li.dataset.num = i;
            console.dir(li);
            li.onclick = function () {
                // 把所有的kill掉
                lis.forEach(function (el) {
                    el.classList.remove("active");
                })
                // 让点击的元素处于激活状态  this
                this.classList.add("active");                              
                // 先kill所有的
                contents.forEach(function (el) {
                    el.classList.remove("show");
                })
                 // this.num 当前点击对象所对应的自定义属性值
                 contents[this.dataset.num].classList.add("show");
            }
        }

    </script>

1.4 for循环遍历时将i设为局部变量

 for(let i = 0;i < lis.length;i++){
            var li = lis[i];
        
            li.onclick = function () {
                // 把所有的kill掉
                lis.forEach(function (el) {
                    el.classList.remove("active");
                })
                // 让点击的元素处于激活状态  this
                this.classList.add("active");
                // 先kill所有的
                contents.forEach(function (el) {
                    el.classList.remove("show");
                })
                 // this.num 当前点击对象所对应的自定义属性值
                 contents[i].classList.add("show");
            }
        }

1.5用中间变量来改变记录的值，i也为局部变量

// 用中间变量来记录 高亮的状态元素
        var previousLi = lis[0];
        var previousDiv = contents[0];

        for (let i = 0; i < lis.length; i++) {
            var li = lis[i];
            li.onclick = function () {
                previousLi.classList.remove("active");
                this.classList.add("active");
                previousLi = this;// 改变记录的值

                previousDiv.classList.remove("show");
                contents[i].classList.add("show");
                previousDiv = contents[i];// 改变记录的值
            }
        }

1.6 利用数组的foreach方法的索引值来将点击事件和所要展示的内容相对应

var lis = document.querySelectorAll("li");
        var contents = document.querySelectorAll(".content div");
        for (let i = 0; i < lis.length; i++) {
            var li = lis[i];
            li.onclick = function () {
              lis.forEach(function (el,index) {
                index == i ? el.classList.add("active") :  el.classList.remove("active");
              })

              contents.forEach(function (el,index) {
                index == i ? el.classList.add("show") :  el.classList.remove("show");
              })
            }
        }

2.window事件

script应作为body的最后一个节点来执行代码

2.1 window.onload

等待所有资源文件（音视频文件图片）和dom结构加载完毕后执行

window.onload = function () {

var div = document.querySelector("div");

console.log(div.innerText);

}

2.2 DOMContentLoaded

只等待dom结构加载完毕后执行

document.addEventListener("DOMContentLoaded", function () {

var div = document.querySelector("div");

console.log(div.innerText);

})

2.3 window.onresize

当窗口大小发生变化后执行

document.addEventListener("DOMContentLoaded", function () {

var div = document.querySelector("div");

console.log(div.innerText);

})

3.input事件

  <!-- 文本域  最留言板使用  和 input 为text 类型 相同   value 来获取值-->
    <textarea name="" id="" cols="30" rows="10"></textarea>

获取焦点：

document.querySelector('input').onfocus = function () {

console.log("获取焦点");

this.style.background = "red";

}

失去焦点：

// blur 模糊

input.onblur = function () {

console.log("失去焦点");

this.style.background = "";

}

获取实时输入内容：

input.oninput = function (e) {

// console.log(e.target.value);

}

内容发生变化且失去焦点时执行

input.onchange = function () {

console.log("内容发生变化且失去焦点时执行");

}

// ------------ radio ------------------------

radio.onclick = function () {

console.log("click 事件",this.value);

}

radio.onchange = function () {

console.log("change 事件",this.value);

}

// ------------ checkbox ------------------------

checkbox.onclick = function () {

console.log("checkbox ",this.value);

}

checkbox.onchange = function () {

console.log("checkbox change",this.value);

}

// ---------- select --------------------

select.onclick = function () {

// console.log("select === ");

}

select.onchange = function () {

console.log("select === ",this.value);

}

4.表单提交获取单选框中的值

判断是否选中再获取value值

var radios = document.querySelectorAll('.sex');
        
        btn.onclick = function () {
            var sex = "";
            for (const input of radios) {
                if(input.checked){
                    sex = input.value;
                }
            }
            console.log("sex === ",sex);
        }