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>