js哈哈哈哈哈哈哈哈哈哈
day4_javascript2
1js事件
输入框事件 onkeyup
注意:校验时通常使用onkeyup
event.keyCode 获得键盘的键值(键盘码)
输入框校验效果1 需要正则表达式2 通过onkeyup 获取的用户最新输入的内容3 phoneReg.test(PhoneText) 检测的结果 控制页面元素的变化
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><style>img{vertical-align: middle;width: 20px;height: 20px;display: none;}</style>
</head>
<body><!-- 键盘事件 主要与输入框结合使用 keydown 键盘按下keyup 键盘抬起 (交互效果主要使用这个 可以获得最新输入的内容)event.keyCode 获取键盘的键值--><!-- 键盘交互1.输入框校验效果 用户一遍输入 一边用户提示信息/*输入框校验效果1 需要正则表达式2 通过onkeyup 获取的用户最新输入的内容3 phoneReg.test(PhoneText) 检测的结果 控制页面元素的变化*/-->
<input type="text" name="phone" id="phone" onkeyup="myPhone()"/><img id="phoneImg" src="imgs/wrong.png"/><br></body>
<script>
function myPhone(){//console.log(document.getElementById("txt").value);// console.log(event.keyCode);
// 手机号正则表达式let phoneReg = /^1(3|4|5|7|8)\d{9}$///当前用户输入的内容let PhoneText = document.getElementById("phone").value// console.log(document.getElementById("txt").value);//console.log( phoneReg.test(PhoneText));let regRes = phoneReg.test(PhoneText)if(regRes){//换图片document.getElementById("phoneImg").src = "imgs/ok.png"// document.getElementById("phoneSpan").innerHTML = "手机号正确"// document.getElementById("phoneSpan").style.color = "green"}else{document.getElementById("phoneImg").src = "imgs/wrong.png"// document.getElementById("phoneSpan").innerHTML = "手机号错误"// document.getElementById("phoneSpan").style.color = "red"}document.getElementById("phoneImg").style.display = "inline";return regRes;}
</script>
</script>
</html>表单提交事件 onsubmit
注意: 表单提交 结合输入框校验一起使用
/**表单校验1.onsubmit="return myAllReg()" form上配置onsubmit事件 通过bol值控制是否提交2.配置统一的校验函数 把其他的输入框校验 连接起来 myAllReg()3.每个输入框校验 单独编写校验效果和结果*/
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title><style>img{vertical-align: middle;width: 20px;height: 20px;display: none;}</style>
</head>
<body><!-- 键盘事件 主要与输入框结合使用 keydown 键盘按下keyup 键盘抬起 (交互效果主要使用这个 可以获得最新输入的内容)event.keyCode 获取键盘的键值--><!-- 键盘交互1.输入框校验效果 用户一遍输入 一边用户提示信息/*输入框校验效果1 需要正则表达式2 通过onkeyup 获取的用户最新输入的内容3 phoneReg.test(PhoneText) 检测的结果 控制页面元素的变化*/-->
<!-- <span id="phoneSpan"></span> --><form action="/myServer" onsubmit="return myAllReg()"><input type="text" name="phone" id="phone" onkeyup="myPhone()"/><img id="phoneImg" src="imgs/wrong.png"/><br><input type="text" name="mail" id="mail" onkeyup="myMail()"/><img id="mailImg" src="imgs/wrong.png"/><br><button type="submit">注册</button></form> </body>
<script>
/**表单校验1.onsubmit="return myAllReg()" form上配置onsubmit事件 通过bol值控制是否提交2.配置统一的校验函数 把其他的输入框校验 连接起来 myAllReg()3.每个输入框校验 单独编写校验效果和结果*/
//统一调用所有校验//再包校验结果&&起来function myAllReg(){ let mailRes = myMail();let phoneRes = myPhone();return mailRes && phoneRes;}
//js中的正则表达式// /^1(3|4|5|7|8)\d{9}$/
function myMail(){// 邮箱正则表达式let mailReg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$///当前用户输入的内容let mailText = document.getElementById("mail").value//邮箱校验let regRes = mailReg.test(mailText)//显示效果if(regRes){document.getElementById("mailImg").src = "imgs/ok.png"}else{document.getElementById("mailImg").src = "imgs/wrong.png"}document.getElementById("mailImg").style.display = "inline"//返回校验结果return regRes}
function myPhone(){//console.log(document.getElementById("txt").value);// console.log(event.keyCode);
// 手机号正则表达式let phoneReg = /^1(3|4|5|7|8)\d{9}$///当前用户输入的内容let PhoneText = document.getElementById("phone").value// console.log(document.getElementById("txt").value);//console.log( phoneReg.test(PhoneText));let regRes = phoneReg.test(PhoneText)if(regRes){//换图片document.getElementById("phoneImg").src = "imgs/ok.png"// document.getElementById("phoneSpan").innerHTML = "手机号正确"// document.getElementById("phoneSpan").style.color = "green"}else{document.getElementById("phoneImg").src = "imgs/wrong.png"// document.getElementById("phoneSpan").innerHTML = "手机号错误"// document.getElementById("phoneSpan").style.color = "red"}document.getElementById("phoneImg").style.display = "inline";return regRes;}
</script>
</script>
</html>2BOM浏览器对象模型
1.window对象
<!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>title</title> </head> <body></body> <script> // window对象 全局对象// 包含其他的对象 可以省略不写 console.log(window);console.log(this);//会阻塞页面加载 不要使用//alert(111)//confirm(222)//prompt(333) </script> </html>
2.history对象
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><button onclick="myBack()">回退</button><button onclick="myForward()">前进</button><button onclick="myGo()">跳记录</button>
</body><script>//history对象//表示浏览的历史记录function myBack(){//回退到上一个历史文档history.back();}function myForward(){//前进到下一个历史文档history.forward()}//浏览器中 -2 -1 0 1 2//history.go(-2);//history.go(0); 相当于刷新页面function myGo(){//前进到下一个历史文档history.go(0);}
</script>
</html>3location对象(*)
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><div onclick="myHref()" style="width: 100px;height: 100px; border: 1px solid black;"></div><button onclick="myReload()">刷新页面</button>
</body>
<script>
//locaion对象(*)
// 浏览器地址栏对象
//href属性 设置当前页面的URL
//可以搭配任意元素 做页面跳转
//reload() 函数 刷新当前页面function myHref(){//三种路径//相对路径 相对根路径 绝对路径location.href = "https://www.baidu.com"
}function myReload(){location.reload()}
</script>
</html>4document对象 DOM树
获取元素
//1函数获取元素/*document.getElementById("txt") 通过id获取document.getElementsByTagName("input") 通过标签名获取 带s 元素集合document.getElementsByClassName("mycls") 通过class值获取 元素集合*///2属性获取元素/*通过dom树的关系获取同级nextElementSibling 下一个兄弟(同级)节点 previousElementSibling 上一个兄弟(同级)节点 父级parentElement 父元素子级children 子元素 HTMLCollectionfirstElementChild 第一个子元素lastElementChild 最后一个子元素知道即可childNodes 子节点 NodeList 带之间的文本(少用)*/
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><input class="mycls" type="text" id="txt1"><input type="text" id="txt2"><input class="mycls" type="text" id="txt3"><hr><ul id="myUl"><li>1</li><li>2</li><li id="myLi">3</li><li>4</li><li>5</li></ul>
</body>
<script>//DOM 当前页面文档的dom树//元素 html标签//1函数获取元素/*document.getElementById("txt") 通过id获取document.getElementsByTagName("input") 通过标签名获取 带s 元素集合document.getElementsByClassName("mycls") 通过class值获取 元素集合*///2属性获取元素/*通过dom树的关系获取同级nextElementSibling 下一个兄弟(同级)节点 previousElementSibling 上一个兄弟(同级)节点 父级parentElement 父元素子级children 子元素 HTMLCollectionfirstElementChild 第一个子元素lastElementChild 最后一个子元素知道即可childNodes 子节点 NodeList 带之间的文本(少用)*///属性 html标签的属性////document.getElementById("txt").value = "hello world"//console.log(document.getElementsByTagName("input"));//Prototype 可以扩展属性和方法//document.getElementsByTagName("input")[0].value = "hello world"//console.log(document.getElementsByClassName("mycls"))//使用元素类的// console.log(document.getElementById("myLi").previousElementSibling);// console.log(document.getElementById("myLi").nextSibling.nextSibling);// console.log(document.getElementById("myLi").parentElement);console.log(document.getElementById("myUl").children);console.log(document.getElementById("myUl").childNodes);console.log(document.getElementById("myUl").firstElementChild);console.log(document.getElementById("myUl").lastElementChild);
</script>
</html>操作属性
//属性方式 操作属性 /*读属性 元素.属性 写属性 元素.属性= 值 */
//函数方式 操作属性
/*读属性 元素.getAttribute("属性名")写属性 元素.setAttribute("属性名","属性值")*/
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><input type="text" id="myText">
</body>
<script>//document.getElementById("myText").value = "hello world"//document.getElementById("myText").setAttribute("value","hello world2")//console.log(document.getElementById("myText").getAttribute("type"));</script>
</html>5常用方法
打开关闭窗口
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><button onclick="openBaiDu()">打开百度</button><button onclick="closeWin()">关闭网页</button>
</body>
<script>//提升为全局变量let newWin;function openBaiDu() {//给全局变量赋值newWin = open('http://www.baidu.com');}function closeWin(){//关闭窗口newWin.close()}//open('http://www.baidu.com');
</script></script>
</html>定时函数
//定时函数//1.反复执行// setInterval("执行的函数",间隔的时间)// clearInterval(taskid) 停止定时执行 taskid通过setInterval返回值获取//2.执行一次(延时执行)//setTimeout("执行的函数",间隔的时间)// clearTimeout(taskid) 停止定时执行 taskid通过setTimeout返回值获取三种写法
写法1setInterval("myTest()",1000)写法2setInterval(myTest,1000)写法3(推荐写法)setInterval(function(){console.log(222222);},1000)定时函数使用
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><button onclick="startTask()">开定时</button><button onclick="stopTask()">关定时</button>
</body>
<script>//定时函数//1.反复执行// setInterval("执行的函数",间隔的时间)// clearInterval(taskid) 停止定时执行 taskid通过setInterval返回值获取//2.执行一次(延时执行)//setTimeout("执行的函数",间隔的时间)// clearTimeout(taskid) 停止定时执行 taskid通过setTimeout返回值获取/*写法1setInterval("myTest()",1000)写法2setInterval(myTest,1000)写法3(推荐写法)setInterval(function(){console.log(222222);},1000)*/function myTest(){console.log(11111);}//开启定时//setInterval(myTest(),1000)// myTest()
// setInterval(function(){
// console.log(222222);
// },1000)// setTimeout(function(){// console.log(3333333);// },2000)//单值变量let taskId;//集合变量let taskIds = [];function startTask(){taskId = setInterval(function(){console.log("定时执行了");},1000)taskIds.push(taskId)}function stopTask(){console.log(taskIds);for(let x of taskIds){clearInterval(x)}//clearInterval(taskId)}
</script>
</html>定时函数课堂练习
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title>
</head>
<body><span id="timeSpan">3</span>秒后跳转<span id="dotSpan">.</span>
</body>
<script>// 定时函数比较消耗内存 // 每个页面不要超过6个定时//3秒后跳转setTimeout(function(){location.href="https://www.baidu.com"},3000)//每隔1秒减少秒数setInterval(function(){//获取span标签的值let oldTime = parseInt(document.getElementById("timeSpan").innerHTML) ;//减一oldTime--;//再设置span标签的值document.getElementById("timeSpan").innerHTML = oldTime;},1000)//定时改变.的数量setInterval(function(){//获取span标签的值let dotStr = document.getElementById("dotSpan").innerHTML;//控制最大.数量if(dotStr.length == 5){dotStr = "";}//拼接字符串dotStr+=".";document.getElementById("dotSpan").innerHTML = dotStr;},50)</script>
</html>3es6新语法
es ECMAScript
ES6 箭头函数 替代匿名函数
// 箭头函数// (形参)=>{// 执行的代码// return 返回值// }//可以直接替代匿名函数语法
//替代匿名函数 // setInterval(()=>{// console.log('1秒执行一次');// },1000)
//定义函数的主流写法const myFun = (a,b)=>{//debuggerconsole.log('箭头函数');console.log(a+b);}改变语法的例子
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>title</title></head>
<body><img id="myImg" src="imgs/pic1.png"/><br><div id="btns"><button id="firstBtn" onclick="changePic('first')">第一张</button><button id="prevBtn" onclick="changePic('prev')">上一张</button><button id="nextBtn" onclick="changePic('next')">下一张</button><button id="lastBtn" onclick="changePic('last')">最后一张</button></div></body>
<script>let ImgIdx = 1;// 实现图片切换功能const changePic = (pos)=>{//按照按钮 切换索引switch (pos) {case 'first':ImgIdx = 1;break;case 'prev': ImgIdx--;break;case 'next': ImgIdx++;break;case 'last': ImgIdx = 8;break;}console.log(ImgIdx);document.getElementById("myImg").src = `imgs/pic${ImgIdx}.png` // 设置按钮状态setBtnStatus()}const setBtnStatus = ()=>{//按钮状态还原let eles = document.getElementById("btns").children// 遍历启用所有按钮for(let btn of eles){btn.disabled = false}//根据临界值 禁用按钮if(ImgIdx == 1){eles[0].disabled = true eles[1].disabled = true}if(ImgIdx == 8){eles[2].disabled = trueeles[3].disabled = true}}//初始化setBtnStatus()</script>
</html>4作业
1 表单校验 需要独立完成
2.tab页切换 小div跟大div对应 大div同时只显示一个（只显示与小div对应的div）
3.全选按钮 反选按钮 操作checkbox的checked属性
4.轮播图 小人奔跑 可以开始和停止