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>