JS DOM操作案例

显示隐藏表单文本内容

<input type="text" value="手机">

        var text = document.querySelector("input")
        // 获取焦点
        text.onfocus = function () {
            if (this.value === '手机') {
                this.value = ''
            }
        }
        // 失去焦点
        text.onblur = function () {
            if (this.value === '') {
                this.value = '手机'
            }
        }

通过element.className获取修改元素样式

 <div class="first" id="conter">文本</div>

var conter = document.getElementById("conter")
        conter.onclick = function () {
            // 通过修改元素的ClassName更改元素的样式适用于样式多或者繁杂的情况下
            this.className = 'change'
            // 如果想要保留之前的class
            this.className = 'first change'
        }

效果图

 

密码框错误提示

<div class="register">
        <input type="password" id="ipt">
        <p class="message" id="message">请输入6-12位密码</p>
    </div>

  var ipt = document.getElementById("ipt")
        var message = document.getElementById("message")
        ipt.onblur = function () {
            // 根据ipt.value长度判断
            if (this.value.length < 6 || this.value.length > 12) {
                message.className = 'message wrong'
                message.innerHTML = '您输入的位数不对要求6~12位'
            } else {
                message.className = 'message right'
                message.innerHTML = '您输入的正确'
            }
        }

效果图

css代码:

<style>
        .box {
            background-image: url(../imges/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);
            background-repeat: no-repeat;
        }

        .change {
            font-size: 203px;
        }

        .register {
            width: 600px;
            margin: 100px auto;
        }

        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            padding-left: 20px;
        }

        .wrong {
            color: red;
        }

        .right {
            color: green;

        }
    </style>

 

 

 

 

 

 

百度换肤效果

      <ul class="baidu">
          <li><img src="../imges/business-pic3.jpg" alt=""></li>
          <li><img src="../imges/business-pic4.jpg" alt=""></li>
      </ul>

          var imgs = document.querySelector(".baidu").querySelectorAll("img")
          // 给每个可以换肤的图片循环注册点击事件
          for (var i = 0; i < imgs.length; i++) {
             imgs[i].onclick = function () {
                 // 点击图片的路径
                 // 把这个路径给body就可以了
                 document.body.style.backgroundImage = 'url(' + this.src + ')'
             }
         }

 效果图

表格

<table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll"></th>
                <th>2</th>
                <th>1</th>
                <th>2</th>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
                <td>c</td>
            </tr>
        </tbody>
    </table>

 

表格隔行变色

  // 获取的是tbody中的行
        var trs = document.querySelector("tbody").querySelectorAll("tr")
        for (var i = 0; i < trs.length; i++) {
            // 鼠标经过
            trs[i].onmousemove = function () {
                this.className = 'bg'
            }
            // 鼠标离开
            trs[i].onmouseout = function () {
                this.className = ''
            }
        }

 

 

表格全选

var j_cbAll = document.getElementById("j_cbAll")
        var ipt = document.getElementById("j_tb").getElementsByTagName("input")
        j_cbAll.onclick = function () {
            // 得到当前复选框的状态
            console.log(this.checked);
            for (var i = 0; i < ipt.length; i++) {
                ipt[i].checked = this.checked
            }
        }
        // 下面按钮影响上面按钮
        for (var j = 0; j < ipt.length; j++) {
            ipt[j].onclick = function () {
                // flag控制全选按钮是否选中
                var flag = true;
                // 每次发生点击都要检查是否全选中
                for (var a = 0; a < ipt.length; a++) {
                    if (!ipt[a].checked) {
                        flag = false;
                        break; //退出for循环 可以提高效率 只要有一个没有选中剩下的就不需要循环判断了
                    }
                }
                j_cbAll.checked = flag
            }
        }

效果图

css代码:

        body {
            background-image: url(../imges/erwm.jfif);
            background-repeat: no-repeat;
        }

        .baidu {
            width: 200px;
            height: 100px;
            margin: 0 auto;
            list-style: none;

        }

        .baidu img {
            width: 100px;
            height: 100px;
            float: left;
        }

        .bg {
            background-color: pink;
        }