15.JS_DOM

32w’s’zcss

id: 100 class;10 tag:1

!important:最高

1. 客户端存储：

locaStorage: 必须手动清除。登录之后再不用登录，存个令牌token
sessionStorage: 只活在当前页面（当前选项卡）
cookie: 可以设置超时时间。浏览器不关闭，不超时就不会清空
- 登录之后，个半个小时未操作，提升重新登录
indexedDB: 非关系型数据库
WebSQL: ORDBMS

2. Form对象

document.forms[0]; 获取文档中第一个form
document.forms[‘id’];

document.forms.id;

属性可以用【】

    <form action="abc.do" id="form0" onsubmit="return true;">
        <input name="ename" />
        <button>提交</button>
        <input type="submit" value="提交" />
        <input type="button" value="普通按钮" />
        <input type="image" src="/imgs/a.webp" />
        
    </form>
    <button form="form0">外面的按钮提交表单</button>
    <script>
        console.info(document.forms[0])
        console.info(document.forms["form0"])
        console.info(document.forms.form0)
        var a = {ename: "tom", age: 10}
        for (let prop in a) {
            console.info(a[prop])//  a.ename a.age
        }
        var b = [1, 3, 5]
        for (let index in b) {
            console.info(b[index]);
        }
    </script>

h5标签form属性指定属于的表单

checkbox:

   <input type="checkbox" id="qx"  >全选
    <br />
    disabled(表单不提交type="hidden")
    readonly
    checked
    selected
    <input type="checkbox" name="like" value="LOL" checked >LOL
    <input type="checkbox" name="like" value="LOL">WOW
    <input type="checkbox" name="like" value="DNF">DNF
    <script>
        // 全选全取消
        document.getElementById("qx").onchange = function() {
            var eles = document.querySelectorAll("[name='like']")
            for (let i = 0; i < eles.length; i++) {
                eles[i].checked = this.checked;
            }
        }
        // 判断是否全选全取消
        var eles = document.querySelectorAll("[name='like']")
        for (let i = 0; i < eles.length; i++) {
            let count = 0;
            eles[i].onchange = function() { // 每个checkebox绑定事件
                let count = 0;
                for (let j = 0; j < eles.length; j++) {
  
                    if (eles[j].checked) {
                        count++;
                    }
                }
                if (count == eles.length) {
                    document.getElementById("qx").checked = true;
                } else {
                    document.getElementById("qx").checked = false;
                }
            }
        }

    </script>

hidden：看不见又要提交

    <form action="abc.do">
        <input type="text" name="ename" disabled value="1234" />
        <input type="hidden" name="ename" value="1234" />
        <input type="text" name="job" readonly value="1234" />
        <input type="submit" />
        update emp set deptno = 30 where empno = ?
    </form>

3. 事件：冒泡，捕获，委托

冒泡：从里到外

阻止冒泡：event.stopPropagation();

    
    <div id="a1" onclick="outerclick()">
        1
        <div id="a2" onclick="innerclick()">2</div>
        3
    </div>
    <script>
        function outerclick() {
            alert(1)
        }
        function innerclick() {
            event.stopPropagation(); // 组织冒泡
            alert(2)
            return false; // jquery
        }
    </script>

捕获：从外到里

<div id="a1">
    1
    <div id="a2">2</div>
    3
</div>
// addEventListener添加事件  最后的boolean： 冒泡false还是捕获true
    document.getElementById("a1").addEventListener("click", function(){alert(1)}, true)
    document.getElementById("a2").addEventListener("click", function(){alert(2)}, true)

委托：代理：马爸爸

子不写事件，把事件写在父上，用事件源event.target
- 效率高。一个个事件代替了所有子的事件
- 后生成子也可以用

<ul id="mababa">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
<button onclick="add(this)">填一个</button><input />
<script>
    var add = function(ele) {
        console.info()
        document.getElementById("mababa").innerHTML += `<li>${ele.nextElementSibling.value}</li>`
        ele.nextElementSibling.value = ""
    }

    // var a1 = document.getElementsByTagName("li");
    // for (let i = 0; i < a1.length; i++) {
    //     a1[i].onclick = function() {
    //         alert(this.innerText)
    //     }
    // }

    document.getElementById("mababa").onclick = function() {
            if (event.target.tagName != 'UL')
            alert(event.target.innerHTML)
    }

4. js中的正则

Regex对象的方法
- g:全局； i:忽略大小写； m:多行匹配
- test(); 返回boolean 是否匹配
- exec(); null或数组
String的方法
- match(); null或数组

    <style>
    .green {color: green}
    .red {color: red}
    </style>
    <script>
        var a = "jlk12j3lk21j3kl12j312lk34jl2k1j4";
        console.info(/w/.exec(1)) // null或者配的数组  str.match(regex)
        console.info(a.split("").reverse().join("-")) // 小技巧
        function abc() {
            // var reg = /^\d{11}$/
            var reg = new RegExp("^\\d{11}$")
            event.target.nextElementSibling.className=""
            // if (reg.test(event.target.value)) {
            if (reg.exec(event.target.value)) {                
                event.target.nextElementSibling.classList.add("green")
                event.target.nextElementSibling.innerHTML="成功"
            } else {                
                event.target.nextElementSibling.classList.add("red")
                event.target.nextElementSibling.innerHTML="失败"
            }            
        }
    </script>
</head>
<body>
    <input onchange="abc()" /><span></span>
</body>