day4_javascript2
1加载事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>/*整个html文档都是从上到下加载 解释执行script尽量写在页面最下边 保证html元素加载完毕 再处理jsonload 加载结束*/// debuggerfunction myInit(){document.getElementById("myText").value = "蔡徐坤..."}</script>
</head>
<body onload="myInit()"><input id="myText" type="text"/>
</body></html>
注意:
script标签 尽量写在页面最下边 保证html元素加载完毕 再处理js
2键盘事件
用户通过键盘输入之后 做交互效果
onkeyup 键盘弹起 生效之后
onkeydown 键盘按下 生效之前
特殊情况:
可以通过内置事件对象 获得键盘码表
<input type="text" onkeyup="myTest(event)"/>function myTest(event){console.log(event.keyCode);}
2.1输入框校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{vertical-align: middle;display: none;}</style>
</head>
<body><input id="myPhone" type="text" onkeyup="checkPhone()"><img id="phoneImg" src="./imgs/nook.png"/><br><!-- <span id="phoneSpan"></span> --></body>
<script>/*
1 正则怎么表示/^1(3|4|5|7|8)\d{9}$/正则对象.test("字符串")/^1(3|4|5|7|8)\d{9}$/.test("13333333333")*//*
键盘输入 经常做 输入校验效果*/function checkPhone(){//正则对象let phoneReg = /^1(3|4|5|7|8)\d{9}$///phone框的内容let phoneTextVal = document.getElementById("myPhone").value// console.log(phoneReg.test(phoneTextVal));if(phoneReg.test(phoneTextVal)){// document.getElementById("phoneSpan").innerHTML = "格式正确"// document.getElementById("phoneSpan").style.color = "green"document.getElementById("phoneImg").src="./imgs/ok.png"}else{// document.getElementById("phoneSpan").innerHTML = "格式错误"// document.getElementById("phoneSpan").style.color = "red"document.getElementById("phoneImg").src="./imgs/nook.png"}document.getElementById("phoneImg").style.display = "inline-block"}</script>
</html>
2.2表单校验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{vertical-align: middle;display: none;}</style>
</head>
<body><form action="/myserver" method="get" onsubmit="return checkAll()"><input id="myPhone" type="text" name="phone" onkeyup="checkPhone()"><img id="phoneImg" src="./imgs/nook.png"/><br><input id="myMail" type="text" name="mail" onkeyup="checkMail()"><img id="mailImg" src="./imgs/nook.png"/><br><button type="submit">注册</button></form></body><script>/*表单校验效果:1.每个输入框 需要单独配正则表式 做校验2.表单提交时 调用每个单独校验 根据&&关系 所有都正确才能提交*/function checkPhone(){//正则对象let phoneReg = /^1(3|4|5|7|8)\d{9}$///phone框的内容let phoneTextVal = document.getElementById("myPhone").value// console.log(phoneReg.test(phoneTextVal));let flag = false;if(phoneReg.test(phoneTextVal)){// document.getElementById("phoneSpan").innerHTML = "格式正确"// document.getElementById("phoneSpan").style.color = "green"document.getElementById("phoneImg").src="./imgs/ok.png"flag = true}else{// document.getElementById("phoneSpan").innerHTML = "格式错误"// document.getElementById("phoneSpan").style.color = "red"document.getElementById("phoneImg").src="./imgs/nook.png"flag = false}document.getElementById("phoneImg").style.display = "inline-block"return flag
}function checkMail(){//正则对象let mailReg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$///phone框的内容let mailTextVal = document.getElementById("myMail").value// console.log(phoneReg.test(phoneTextVal));let flag = false;if(mailReg.test(mailTextVal)){// document.getElementById("phoneSpan").innerHTML = "格式正确"// document.getElementById("phoneSpan").style.color = "green"document.getElementById("mailImg").src="./imgs/ok.png"flag = true}else{// document.getElementById("phoneSpan").innerHTML = "格式错误"// document.getElementById("phoneSpan").style.color = "red"document.getElementById("mailImg").src="./imgs/nook.png"flag = false}document.getElementById("mailImg").style.display = "inline-block"return flag
}//调用所有校验效果
function checkAll(){let mailRes = checkMail();let phoneRes = checkPhone();return mailRes&&phoneRes
}</script></html>
3BOM浏览器对象模型
通过浏览器控制浏览器的按钮和功能
3.1window对象
当前窗口对象 当前的html文档 js对当前文档生效
//系统自带的弹窗//1window可以忽略不写//2js解析器(js执行引擎) 单线程的 alert会阻塞线程//alert("弹窗")//confirm("确定离开么...")//prompt("请输入")
3.2history对象
历史记录对象
history.back() 后退一个文档
history.forward() 前进一个文档
history.go(-2); 跳文档
在历史记录中 通过编号跳转 -2 -1 0 1 2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="myBack()">回退</button><button onclick="myForward()">前进</button><button onclick="myGo()">跳记录</button>
</body>
<!--
history 历史记录对象可以搭配js中的 各种事件 做不同的触发 不一定限定用按钮history.back() 后退一个文档
history.forward() 前进一个文档
history.go(-2); 跳文档
在历史记录中 通过编号跳转 -2 -1 0 1 2--><script>function myBack(){history.back() }function myForward(){history.forward()}function myGo(){history.go(0);}</script>
</html>
3.3location地址对象
可以不同元素 在不同事件中做页面跳转
location.href href属性
location.reload() reload()函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="toBaidu()" >跳转到百度</button><div style="width: 100px;height: 100px;border: 1px solid black;" onmouseover="toBaidu()">王美丽王美丽 我们爱你!!!!!</div><button onclick="myReload()" >刷新页面</button>
</body>
<script>/*功能简单 但是意义重大location.href href属性location.reload() reload()函数*/ function toBaidu(){/*三种路径1相对路径2相对根路径3绝对路径*/location.href="https://www.baidu.com/s?wd=王美丽"}function myReload(){location.reload()}</script>
</html>
3.4document对象
当前文档对象
可以在当前文档中 根据特征获取各种元素
getElementById 通过id查找元素 html标签返回指定id的第一个元素id值不要重复 不然容易获取不到
getElementsByClassName 通过class值 找元素 获得元素集合想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用getElementsByTagName 通过标签名 找元素 获得元素集合想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input class="mycls" id="myEle2" value="bbbb"/><button class="mycls" id="myEle">aaa</button><button >ccc</button>
</body><script>console.log(document);//找元素改属性/*getElementById 通过id查找元素 html标签返回指定id的第一个元素id值不要重复 不然容易获取不到getElementsByClassName 通过class值 找元素 获得元素集合想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用getElementsByTagName 通过标签名 找元素 获得元素集合想控制元素的属性时 需要先取到元素再操作 经常搭配遍历使用 Cannot set properties of undefinedCannot set properties of null类似于空指针报错*///console.log(document.getElementById("myEle"));console.log(document.getElementsByClassName("mycls"));// document.getElementsByClassName("mycls")[0].style.color="red"// debugger// let eles = document.getElementsByClassName("mycls")// //js中 可以自由扩展属性和函数// eles.style = "red"// console.log(eles);let eles = document.getElementsByClassName("mycls");for(let ele of eles){ele.style.color="red"}console.log(document.getElementsByTagName("button"));</script></html>
4BOM常用方法
打开关闭窗口
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button onclick="newWin()" >打开新窗口</button><button onclick="closeWin()" >关闭窗口</button>
</body>
<script>/*open返回值 得到新窗口对象如果要跨函数使用对象 可以使用全局变量*/ //提升作用域范围let newWinObj;function newWin(){newWinObj = open("/day4_javascript2/1加载事件.html")}function closeWin(){newWinObj.close()}// open("/day4_javascript2/1加载事件.html")</script>
</html>
定时函数
三种语法:
1. setInterval("myFun()",1000)2. setInterval(myFun,1000)3. setInterval(function(){},1000)
建议使用匿名函数
注意:
匿名函数 function(){}
箭头函数 替代 ()=>{}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="startBtn" onclick="startInterval()">开启定时</button><button id="stopBtn" onclick="stopInterval()">停止定时</button>
</body>
<script>/**///每隔一定事件 执行指定的函数/*1. setInterval("myFun()",1000)2. setInterval(myFun,1000)3. setInterval(function(){},1000)匿名函数箭头函数 替代()=>{}setInterval 定时反复执行setTimeout 定时执行一次(延时执行)clearInterval(taskId) 停止定时clearTimeout(taskId) 停止延时执行 (需要在执行前调用)主要用来做页面定时切换或者改变的效果1可以开启多任务时 通过数组记录任务号 关闭时 可以统一关闭2只开启一个任务 通过控制按钮的启用禁用 限制用户开启数量*/// function myFun(){// console.log(1);// }// setInterval("myFun()",1000)// setInterval(myFun,1000)// setTimeout(()=>{// console.log("执行了....");// },2000)/*单个数据 用单个变量多个数据 用集合存*///let taskId;// let taskArr = [];// function startInterval(){// let taskId = setInterval(()=>{// console.log("执行了.....");// },1000)// taskArr.push(taskId)// }// function stopInterval(){// console.log(taskArr);// for(let tid of taskArr){// clearInterval(tid)// }// //clearInterval(taskId)// }let taskId;function startInterval(){document.getElementById("startBtn").disabled = truetaskId = setInterval(()=>{console.log("执行了.....");},1000)}function stopInterval(){document.getElementById("startBtn").disabled = falseclearInterval(taskId)}</script>
</html>