how2j.cn

所谓的常用场景指的是工作中会经常用到的javascript结合HTML DOM运用。

示例 1 : 练习-删除行为前的提示   
示例 2 : 答案-删除行为前的提示   
示例 3 : 练习-登陆时候,验证账号密码是否为空   
示例 4 : 答案-登陆时候,验证账号密码是否为空   
示例 5 : 练习-提交数据,验证长度   
示例 6 : 答案-提交数据,验证长度   
示例 7 : 练习-提交数据,验证年龄是否为数字   
示例 8 : 答案-提交数据,验证年龄是否为数字   
示例 9 : 练习-提交数据,验证年龄是否为整数   
示例 10 : 答案-提交数据,验证年龄是否为整数   
示例 11 : 练习-提交数据,验证email格式是否正确   
示例 12 : 答案-提交数据,验证email格式是否正确   
示例 13 : 练习-隐藏和现实   
示例 14 : 答案-隐藏和现实   

示例 1 :

练习-删除行为前的提示

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
在进行删除操作前,都应该提示用户是否要删除
<script> function deleteRow(link){ var b = confirm("确定删除?") if(!b) return; var table = document.getElementById("heroTable"); var td = link.parentNode; var tr = td.parentNode; var index=tr.rowIndex; table.deleteRow(index); } </script> <table width="100%" border = "1" cellspacing="0" id="heroTable"> <tr > <td width="50%">英雄名称</td> <td> 操作 </td> </tr> <tr > <td>盖伦</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> <tr > <td>提莫</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> <tr > <td>祈求者</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

答案-删除行为前的提示

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<script> function deleteRow(link){ var b = confirm("确定删除?") if(!b) return; var table = document.getElementById("heroTable"); var td = link.parentNode; var tr = td.parentNode; var index=tr.rowIndex; table.deleteRow(index); } </script> <table width="100%" border = "1" cellspacing="0" id="heroTable"> <tr > <td width="50%">英雄名称</td> <td> 操作 </td> </tr> <tr > <td>盖伦</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> <tr > <td>提莫</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> <tr > <td>祈求者</td> <td> <a href="#" onclick="deleteRow(this)">删除</a> </td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

练习-登陆时候,验证账号密码是否为空

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如在登陆的时候,如果账号或者密码为空,弹出提示,并且不提交
<form method="post" action="/study/login.jsp" onsubmit="return login()"> 账号:<input id="name" type="text" name="name"> <br/> 密码:<input id="password" type="password" name="password" > <br/> <input type="submit" value="登陆"> </form> <script> function login(){ var name = document.getElementById("name"); if(name.value.length==0){ alert("用户名不能为空"); return false; } var password = document.getElementById("password"); if(password.value.length==0){ alert("密码不能为空"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

答案-登陆时候,验证账号密码是否为空

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<form method="post" action="/study/login.jsp" onsubmit="return login()"> 账号:<input id="name" type="text" name="name"> <br/> 密码:<input id="password" type="password" name="password" > <br/> <input type="submit" value="登陆"> </form> <script> function login(){ var name = document.getElementById("name"); if(name.value.length==0){ alert("用户名不能为空"); return false; } var password = document.getElementById("password"); if(password.value.length==0){ alert("密码不能为空"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

练习-提交数据,验证长度

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册用户名的时候,用户名至少需要3位长度.
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } return true; } </script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name"> 
<br><br>
<input type="submit" value="注册">
<br>
</form>
   
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
 
   return true;
 
  }
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

答案-提交数据,验证长度

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } return true; } </script>
<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name"> 
<br><br>
<input type="submit" value="注册">
<br>
</form>
   
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
 
   return true;
 
  }
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

练习-提交数据,验证年龄是否为数字

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册的时候,需要提交年龄信息,用户输入的年龄信息必须是数字的。
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(isNaN(age.value)){ alert("年龄必须是数字"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

答案-提交数据,验证年龄是否为数字

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(age.value.length==0){ alert("年龄不能为空"); return false; } if(isNaN(age.value)){ alert("年龄必须是数字"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

练习-提交数据,验证年龄是否为整数

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
上一个练习有个缺陷,即当年龄输入是小数的时候,也能够通过判断。
那么接下来就要求,年龄只能输入整数,小数也不行
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(parseInt(age.value)!=age.value){ alert("年龄必须是整数"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

答案-提交数据,验证年龄是否为整数

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(parseInt(age.value)!=age.value){ alert("年龄必须是整数"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

练习-提交数据,验证email格式是否正确

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册的时候,需要提交email信息,用户输入的email信息必须是电子邮箱格式的。
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> EMail:<input id="email" type="text" name="email"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(isNaN(age.value)){ alert("年龄必须是数字"); return false; } var email = document.getElementById("email"); if(0==email.value.length){ alert("email不能为空"); return false; } var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/; if (!Regex.test(email.value)){ alert("email格式不正确"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

答案-提交数据,验证email格式是否正确

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<form method="post" action="/study/register.jsp" onsubmit="return register()"> 账号:<input id="name" type="text" name="name"> <br><br> 年龄:<input id="age" type="text" name="age"> <br><br> EMail:<input id="email" type="text" name="email"> <br><br> <input type="submit" value="注册"> <br> </form> <script> function register(){ var name = document.getElementById("name"); if(name.value.length<3){ alert("用户名至少需要3位长度"); return false; } var age = document.getElementById("age"); if(isNaN(age.value)){ alert("年龄必须是数字"); return false; } var email = document.getElementById("email"); if(0==email.value.length){ alert("email不能为空"); return false; } var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/; if (!Regex.test(email.value)){ alert("email格式不正确"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

练习-隐藏和现实

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
首先通过document.getElementById 拿到div对应的节点
然后通过修改节点的style.display的值进行隐藏和显示
<button onclick="hide()">隐藏div</button> <button onclick="show()">显示div</button> <br> <br> <div id="d"> 这是一个div </div> <script> function hide(){ var d = document.getElementById("d"); d.style.display="none"; } function show(){ var d = document.getElementById("d"); d.style.display="block"; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 14 :

答案-隐藏和现实

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<button onclick="hide()">隐藏div</button> <button onclick="show()">显示div</button> <br> <br> <div id="d"> 这是一个div </div> <script> function hide(){ var d = document.getElementById("d"); d.style.display="none"; } function show(){ var d = document.getElementById("d"); d.style.display="block"; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-09-13 示例十年龄为负数也可以。。
junxiaoge
如标题




1 个答案

how2j 答案时间:2017-09-14
负数也是数字




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-21 练习1问题
KuroAeon



为什么删除后少了一行,然后闪一下就又回来了?
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	table {
		border-collapse: collapse;
	}
	tr td{
		border:2px solid black;

	}

</style>
<script>
	function del(l) {
		var chk = confirm("真的要删除吗?");
		if (chk == true) {
			var par = l.parentNode.parentNode.parentNode;
			var del = l.parentNode.parentNode;
			par.removeChild(del);
		}
		
	}
</script>
<body>
	<table>
		<tr>
			<td>英雄</td>
			<td>操作</td>
		</tr>
		<tr>
			<td>g</td>
			<td><a href="" onclick="del(this)">删除</a></td>
		</tr>
		<tr>
			<td>t</td>
			<td><a href="" onclick="del(this)">删除</a></td>
		</tr>
		<tr>
			<td>q</td>
			<td><a href="" onclick="del(this)">删除</a></td>
		</tr>
	</table>
</body>
</html>

							


3 个答案

KuroAeon 答案时间:2017-07-24
噢。。原来是因为链接没写导致页面刷新,这样……

how2j 答案时间:2017-07-24
答案不会出现这样的问题,请比较那个一个字符的区别,以及思考为什么会这样

KuroAeon 答案时间:2017-07-21
如果删不了就不会消失吧?既然消失就可以删除,但不是很理解为什么会闪回……




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-06-16 最后一题需要解释
2017-06-16 怎么前面没有讲关于表格对象的操作教程
2017-05-06 正则表达式一脸茫然
2017-04-18 积分不够怎么办,很影响啊!
2017-03-01 积分不足,看不了答案,有点想放弃了
2016-12-23 答案能不能购买呢,积分确实不多,也没有太好的途径获得积分
2016-11-09 示例8年龄为空也可以提交
2016-08-22 示例10的答案不对。




提问之前请登陆
关于 前端基础-HTML DOM-常用场景 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图