JavaWeb-10-JavaScript高级学习笔记
JavaWeb-10-JavaScript高级
- 1.BOM
- 1.1概念
- 1.2组成
- 1.2.1 Window:窗口对象
- 1.2.2Location:地址栏对象
- 1.2.3History:历史记录对象
- 2.DOM
- 2.1概念: Document Object Model 文档对象模型
- 2.2核心DOM模型
- 2.2.1Document:文档对象
- 2.2.2Element:元素对象
- 2.2.3Node:节点对象,其他5个的父对象
- 2.3HTML DOM
- 2.4DOM简单学习:为了满足案例要求
- 2.4.1 功能:控制==html文档==的内容
- 2.4.2获取页面标签(元素)对象:Element
- 3事件
- 3.1事件简单学习
- 3.1.1功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 3.1.2如何绑定事件
- 3.1.3案例1:电灯开关
- 3.2事件监听机制
- 3.2.1概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 3.2.2常见的事件:
- 3.2.3代码示例
- 3.2.4案例1
- 3.2.5案例2
1.BOM
1.1概念
Browser Object Model 浏览器对象模型。 将浏览器的各个组成部分封装成对象。
1.2组成
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
1.2.1 Window:窗口对象
1. 创建
2. 方法
与弹出框有关的方法:
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮,则方法返回true
- 如果用户点击取消按钮,则方法返回falseprompt() 显示可提示用户输入的对话框。
返回值:获取用户输入的值与打开关闭有关的方法:
close() 关闭浏览器窗口。
* 谁调用我 ,我关谁open() 打开一个新的浏览器窗口
* 返回新的Window对象与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。- 参数:
1. js代码或者方法对象
2. 毫秒值- 返回值:唯一标识,用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。4.代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Window对象</title></head> <body><input id="openBtn" type="button" value="打开窗口"><input id="closeBtn" type="button" value="关闭窗口"><script>alert("hello window");window.alert("hello a")//确认框var flag = confirm("您确定要退出吗?");if(flag){//退出操作alert("欢迎再次光临!");}else{//提示:手别抖...alert("手别抖...");}//输入框var result = prompt("请输入用户名");alert(result);//打开新窗口var openBtn = document.getElementById("openBtn");var newWindow;openBtn.onclick = function(){//打开新窗口newWindow = open("https://www.baidu.com");}//关闭新窗口var closeBtn = document.getElementById("closeBtn");closeBtn.onclick = function(){// 关闭新窗口newWindow.close();}//一次性定时器//setTimeout("fun();",2000);var id = setTimeout(fun,2000);//clearTimeout(id);function fun(){alert('boom~~');}//循环定时器var id = setInterval(fun,2000);//clearInterval(id);//获取historyvar h1 = window.history;var h2 = history;alert(h1);alert(h2);var openBtn = window.document.getElementById("openBtn");alert(openBtn);/*document.getElementById("");*/</script> </body> </html>
- 轮播图代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>轮播图</title> </head> <body><img id="img" src="img/banner_1.jpg" width="100%"><script>//修改图片src属性var number=1;function fun(){number++;//判断number是否大于3if (number>3){number=1;}var img=document.getElementById("img");img.src="img/banner_"+number+".jpg"}//定义定时器setInterval(fun,3000);</script> </body> </html>
- 参数:
属性:
- 获取其他BOM对象:
history
location
Navigator
Screen: - 获取DOM对象
document
- 获取其他BOM对象:
特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
1.2.2Location:地址栏对象
创建(获取):
- window.location
- location
方法:
- reload() 重新加载当前文档。刷新
属性
- href 设置或返回完整的 URL。
代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Location对象</title></head> <body><input type="button" id="btn" value="刷新"><input type="button" id="goItcast" value="去百度"><script>//reload方法,定义一个按钮,点击按钮,刷新当前页面//1.获取按钮var btn = document.getElementById("btn");//2.绑定单击事件btn.onclick = function(){//3.刷新页面location.reload();}//获取hrefvar href = location.href ;//alert(href);//点击按钮,去访问www.itcast.cn官网//1.获取按钮var goItcast = document.getElementById("goItcast");//2.绑定单击事件goItcast.onclick = function(){//3.去访问www.itcast.cn官网location.href = "https://www.baidu.com";}</script> </body> </html>
代码练习
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>自动跳转</title><style>p{text-align: center;}span{color:red;}</style></head> <body><p><span id="time">5</span>秒之后,自动跳转到首页...</p><script>/*分析:1.显示页面效果 <p>2.倒计时读秒效果实现2.1 定义一个方法,获取span标签,修改span标签体内容,时间--2.2 定义一个定时器,1秒执行一次该方法3.在方法中判断时间如果<= 0 ,则跳转到首页*/// 2.倒计时读秒效果实现var second = 5;var time = document.getElementById("time");//定义一个方法,获取span标签,修改span标签体内容,时间--function showTime(){second -- ;//判断时间如果<= 0 ,则跳转到首页if(second <= 0){//跳转到首页location.href = "https://www.baidu.com";}time.innerHTML = second +"";}//设置定时器,1秒执行一次该方法setInterval(showTime,1000);</script> </body> </html>
1.2.3History:历史记录对象
创建(获取):
1. window.history
2. history方法:
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
- 参数:
- 正数:前进几个历史记录
- 负数:后退几个历史记录
- 参数:
属性:
length 返回当前窗口历史列表中的 URL 数量。代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>History对象</title> </head> <body><input type="button" id="btn" value="获取历史记录个数"><a href="09_History对象2.html">09页面</a><input type="button" id="forward" value="前进"> <script>//1.获取按钮var btn = document.getElementById("btn");//2.绑定单机事件btn.onclick = function(){//3.获取当前窗口历史记录个数var length = history.length;alert(length);}//1.获取按钮var forward = document.getElementById("forward");//2.绑定单机事件forward.onclick = function(){//前进// history.forward();history.go(1);}</script></body> </html>
2.DOM
2.1概念: Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
2.2核心DOM模型
2.2.1Document:文档对象
- 创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法:
获取Element对象:
- getElementById() : 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
创建其他DOM对象:
createAttribute(name)
createComment()
createElement()
createTextNode()
- 属性
- 代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document对象</title></head> <body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username"><script>//2.根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");//alert(divs.length);//3.根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");// alert(div_cls.length);//4.根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");//alert(ele_username.length);var table = document.createElement("table");alert(table);</script> </body> </html>
2.2.2Element:元素对象
获取/创建:通过document来获取和创建
方法:
- removeAttribute():删除属性
- setAttribute():设置属性
代码示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Element对象</title> </head> <body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性"><script>//获取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}//获取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script> </body> </html>
2.2.3Node:节点对象,其他5个的父对象
- 特点:所有dom对象都可以被认为是一个节点
- 方法:
- CRUD dom树:
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild() :删除(并返回)当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
- CRUD dom树:
- 属性:
- parentNode 返回节点的父节点。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head>
<body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">添加子节点</a><!--<input type="button" id="del" value="删除子节点">-->
<script>//1.获取超链接var element_a = document.getElementById("del");//2.绑定单击事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.获取超链接var element_add = document.getElementById("add");//2.绑定单击事件element_add.onclick = function(){var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}/*超链接功能:1.可以被点击:样式2.点击后跳转到href指定的url需求:保留1功能,去掉2功能实现:href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script>
</body>
</html>
2.3HTML DOM
标签体的设置和获取:innerHTML
使用html元素对象的属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>HTMLDOM</title> </head> <body><div id="div1">div</div><script >var div = document.getElementById("div1");var innerHTML = div.innerHTML;//alert(innerHTML);//div标签中替换一个文本输入框// div.innerHTML = "<input type='text'>";//div标签中追加一个文本输入框div.innerHTML += "<input type='text'>";</script> </body> </html>
控制元素样式
- 使用元素的style属性来设置
如://修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";
- 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>控制样式</title><style>.d1{border: 1px solid red;width: 100px;height: 100px;}.d2{border: 1px solid blue;width: 200px;height: 200px;}</style> </head> <body><div id="div1">div1</div><div id="div2">div2</div><script>var div1 = document.getElementById("div1");div1.onclick = function(){//修改样式方式1div1.style.border = "1px solid red";div1.style.width = "200px";//font-size--> fontSizediv1.style.fontSize = "20px";}var div2 = document.getElementById("div2");div2.onclick = function(){div2.className = "d1";}</script></body> </html>
- 使用元素的style属性来设置
代码练习
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>动态表格</title><style>table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style></head> <body><div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name" placeholder="请输入姓名"><input type="text" id="gender" placeholder="请输入性别"><input type="button" value="添加" id="btn_add"></div><table><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td></tr></table><script>//使用innerHTML添加document.getElementById("btn_add").onclick = function() {//2.获取文本框的内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取tablevar table = document.getElementsByTagName("table")[0];//追加一行table.innerHTML += "<tr>\n" +" <td>"+id+"</td>\n" +" <td>"+name+"</td>\n" +" <td>"+gender+"</td>\n" +" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\" >删除</a></td>\n" +" </tr>";}//删除方法function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script></body> </html>
2.4DOM简单学习:为了满足案例要求
2.4.1 功能:控制html文档的内容
2.4.2获取页面标签(元素)对象:Element
document.getElementById(“id值”):通过元素的id获取元素对象
- 操作Element对象:
- 修改属性值:
- 明确获取的对象是哪一个?
- 查看API文档,找其中有哪些属性可以设置
- 修改标签体内容:
- 属性:innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><img id="light" src="img/off.gif"><h1 id="title">悔创阿里杰克马</h1><script>//通过id获取元素对象var light = document.getElementById("light");alert("我要换图片了。。。");light.src = "img/on.gif";//1.获取h1标签对象var title = document.getElementById("title");alert("我要换内容了。。。");//2.修改内容title.innerHTML = "不识美东";</script>
</body>
</html>
3事件
3.1事件简单学习
3.1.1功能: 某些组件被执行了某些操作后,触发某些代码的执行。
- 造句: xxx被xxx,我就xxx
- 我方水晶被摧毁后,我就责备对友。
- 敌方水晶被摧毁后,我就夸奖自己。
3.1.2如何绑定事件
直接在html标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick— 单击事件通过js获取元素对象,指定事件属性,设置一个函数
- 代码:
<body><img id="light" src="img/off.gif" onclick="fun();"><img id="light2" src="img/off.gif"><script>function fun(){alert('我被点了');alert('我又被点了');}function fun2(){alert('咋老点我?');}//1.获取light2对象var light2 = document.getElementById("light2");//2.绑定事件light2.onclick = fun2;</script></body>
3.1.3案例1:电灯开关
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>电灯开关</title></head><body><img id="light" src="img/off.gif"><script>/*分析:1.获取图片对象2.绑定单击事件3.每次点击切换图片* 规则:* 如果灯是开的 on,切换图片为 off* 如果灯是关的 off,切换图片为 on* 使用标记flag来完成*///1.获取图片对象var light = document.getElementById("light");var flag = false;//代表灯是灭的。 off图片//2.绑定单击事件light.onclick = function(){if(flag){//判断如果灯是开的,则灭掉light.src = "img/off.gif";flag = false;}else{//如果灯是灭的,则打开light.src = "img/on.gif";flag = true;}}</script></body></html>
3.2事件监听机制
3.2.1概念:某些组件被执行了某些操作后,触发某些代码的执行。
- 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如: 按钮 文本输入框…
- 监听器:代码。
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
3.2.2常见的事件:
点击事件:
1. onclick:单击事件
2. ondblclick:双击事件焦点事件
- onblur:失去焦点。
- 一般用于表单验证
- onfocus:元素获得焦点。
- onblur:失去焦点。
加载事件:
1. onload:一张页面或一幅图像完成加载。鼠标事件:
- onmousedown 鼠标按钮被按下。
- 定义方法时,定义一个形参,接受event对象。
- event对象的button属性可以获取鼠标按钮键被点击了。
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
- onmousedown 鼠标按钮被按下。
键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。表单事件:
- onsubmit 确认按钮被点击。
- 可以阻止表单的提交
- 方法返回false则表单被阻止提交。
- 可以阻止表单的提交
- onreset 重置按钮被点击。
- onsubmit 确认按钮被点击。
3.2.3代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>常见事件</title><script>//2.加载完成事件 onloadwindow.onload = function(){//1.失去焦点事件document.getElementById("username").onblur = function(){alert("失去焦点了...");}///3.绑定鼠标移动到元素之上事件document.getElementById("username").onmouseover = function(){alert("鼠标来了....");}//3.绑定鼠标点击事件document.getElementById("username").onmousedown = function(event){// alert("鼠标点击了....");alert(event.button);}document.getElementById("username").onkeydown = function(event){// alert("鼠标点击了....");// alert(event.button);if(event.keyCode == 13){alert("提交表单");}}document.getElementById("username").onchange = function(event){alert("改变了...")}document.getElementById("city").onchange = function(event){alert("改变了...")}document.getElementById("form").onsubmit = function(){//校验用户名格式是否正确var flag = false;return flag;}}function checkForm(){return true;}</script></head>
<body><!--function fun(){return checkForm();}--><form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username"><select id="city"><option>--请选择--</option><option>北京</option><option>上海</option><option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
3.2.4案例1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格全选</title><style>table{border: 1px solid;width: 500px;margin-left: 30%;}td,th{text-align: center;border: 1px solid;}div{margin-top: 10px;margin-left: 30%;}.out{background-color: white;}.over{background-color: pink;}</style><script>/*分析:1.全选:* 获取所有的checkbox* 遍历cb,设置每一个cb的状态为选中 checked*///1.在页面加载完后绑定事件window.onload = function(){//2.给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function(){//全选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为选中 checkedcbs[i].checked = true;}}document.getElementById("unSelectAll").onclick = function(){//全不选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为未选中 checkedcbs[i].checked = false;}}document.getElementById("selectRev").onclick = function(){//反选//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态为相反cbs[i].checked = !cbs[i].checked;}}document.getElementById("firstCb").onclick = function(){//第一个cb点击//1.获取所有的checkboxvar cbs = document.getElementsByName("cb");//获取第一个cb//2.遍历for (var i = 0; i < cbs.length; i++) {//3.设置每一个cb的状态和第一个cb的状态一样cbs[i].checked = this.checked;}}//给所有tr绑定鼠标移到元素之上和移出元素事件var trs = document.getElementsByTagName("tr");//2.遍历for (var i = 0; i < trs.length; i++) {//移到元素之上trs[i].onmouseover = function(){this.className = "over";}//移出元素trs[i].onmouseout = function(){this.className = "out";}}}</script></head>
<body><table><caption>学生信息表</caption><tr><th><input type="checkbox" name="cb" id="firstCb"></th><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb" ></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb" ></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);">删除</a></td></tr><tr><td><input type="checkbox" name="cb" ></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);">删除</a></td></tr></table>
<div><input type="button" id="selectAll" value="全选"><input type="button" id="unSelectAll" value="全不选"><input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
3.2.5案例2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title>
<style>*{margin: 0px;padding: 0px;box-sizing: border-box;}body{background: url("img/register_bg.png") no-repeat center;padding-top: 25px;}.rg_layout{width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;/*让div水平居中*/margin: auto;}.rg_left{/*border: 1px solid red;*/float: left;margin: 15px;}.rg_left > p:first-child{color:#FFD026;font-size: 20px;}.rg_left > p:last-child{color:#A6A6A6;font-size: 20px;}.rg_center{float: left;/* border: 1px solid red;*/}.rg_right{/*border: 1px solid red;*/float: right;margin: 15px;}.rg_right > p:first-child{font-size: 15px;}.rg_right p a {color:pink;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 50px ;}#username,#password,#email,#name,#tel,#birthday,#checkcode{width: 251px;height: 32px;border: 1px solid #A6A6A6 ;/*设置边框圆角*/border-radius: 5px;padding-left: 10px;}#checkcode{width: 110px;}#img_check{height: 32px;vertical-align: middle;}#btn_sub{width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026 ;}.error{color:red;}#td_sub{padding-left: 150px;}</style>
<script>/*分析:1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。如果都为true,则监听器方法返回true如果有一个为false,则监听器方法返回false2.定义一些方法分别校验各个表单项。3.给各个表单项绑定onblur事件。*/window.onload = function(){//1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function(){//调用用户校验方法 chekUsername();//调用密码校验方法 chekPassword();//return checkUsername() && checkPassword();return checkUsername() && checkPassword();}//给用户名和密码框分别绑定离焦事件document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;}//校验用户名function checkUsername(){//1.获取用户名的值var username = document.getElementById("username").value;//2.定义正则表达式var reg_username = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_username.test(username);//4.提示信息var s_username = document.getElementById("s_username");if(flag){//提示绿色对勾s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示红色用户名有误s_username.innerHTML = "用户名格式有误";}return flag;}//校验密码function checkPassword(){//1.获取用户名的值var password = document.getElementById("password").value;//2.定义正则表达式var reg_password = /^\w{6,12}$/;//3.判断值是否符合正则的规则var flag = reg_password.test(password);//4.提示信息var s_password = document.getElementById("s_password");if(flag){//提示绿色对勾s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";}else{//提示红色用户名有误s_password.innerHTML = "密码格式有误";}return flag;}</script>
</head>
<body><div class="rg_layout"><div class="rg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="rg_center"><div class="rg_form"><!--定义表单 form--><form action="#" id="form" method="get"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"><span id="s_username" class="error"></span></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="email">Email</label></td><td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td></tr><tr><td class="td_left"><label for="tel">手机号</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode" >验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"><img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td></tr></table></form></div></div><div class="rg_right"><p>已有账号?<a href="#">立即登录</a></p></div></div></body>
</html>
JavaWeb-10-JavaScript高级学习笔记相关推荐
- JavaScript高级学习笔记(附md文件下载链接)
百度网盘提取码 链接:https://pan.baidu.com/s/1fY89tq2OTfSf1O-nHonlOg 提取码:vdqr JS回顾 重新介绍javaScript javaScript是什 ...
- JavaWeb黑马旅游网-学习笔记10【项目代码】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记08【旅游线路详情】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记06【旅游线路分页展示分页展示】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记03【登陆和退出功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记07【旅游线路查询】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- 尚学堂JAVA高级学习笔记_1/2
尚学堂JAVA高级学习笔记 文章目录 尚学堂JAVA高级学习笔记 写在前面 第1章 手写webserver 1. 灵魂反射 2. 高效解析xml 3. 解析webxml 4. 反射webxml 5. ...
- JavaWeb黑马旅游网-学习笔记09【旅游线路收藏】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaWeb黑马旅游网-学习笔记04【BaseServlet抽取】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
最新文章
- CentOS7安装Python3详细步骤与Python2共用方法
- 技术硬核还不够?互联网企业出海指南来了!
- RHEL环境下调试Shell脚本时遇到字符串转换整数的问题
- 图形结构:安排课程,图的遍历策略
- Linux MySQL5.5的安装
- 利用 Angular Directive 和 @HostBinding 实现输入文本框随着键盘输入自动变色效果
- c++ ea 代码 生成_看EA如何生成代码框架
- pythonweb快速开发平台_30分钟快速搭建Web CRUD的管理平台--django神奇魔法
- 蓝牙模块HC-06的基本设置和他的AT指令集
- Pytorch实现基于卷积神经网络的面部表情识别(详细步骤)
- ubuntu16.04+七彩虹GTX1060的NVIDIA驱动+Cuda8.0+cudnn5.1+tensorflow+keras搭建深度学习环境【学习笔记】【原创】
- docker配置mysql 中间件 ProxySQL
- 网易云音乐小程序登录接口显示400,拥挤问题解决
- 思科下一代模拟器EVE-NG安装
- AS608指纹模块开发教程
- 机器学习并没有那么深奥,它很有趣(2)
- 地块电力监控系统的设计和应用
- android 心跳 简书,如何高效维持网络长连接:手把手教你实现 自适应的心跳保活机制...
- 没有观众没有新片:美国电影院的悲情寒冬
- 射影几何----帕普斯定理和帕斯卡定理证明对比版
热门文章
- scratch3.0键盘无法输入文字或修改指令中的数字的快速解决办法
- COB制作工艺流程简介
- 不可错过的 7 个JS 小技巧,一定要进来瞧瞧哦
- 论文笔记32 -- Conformer: Local Features Coupling Global Representations for Visual Recognition
- 微信小程序-组件样式覆盖
- ubuntu运行Openvino出现 ModuleNotFoundError: No module named ‘openvino.model_zoo.model_api‘解决
- python pdf删除图片_python-删除PDF空白页
- 学习笔记:PIE-Engine监督分类
- PTA】{10-1 结构拓展实验,函数}6-3 求某学生8门课的平均分 (10 分)
- java atm程序设计_Java ATM机操作界面程序哦