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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-10-06 交个作业1
我会努力学JAVA的



笔记:this相当于实参,也就是当前组件,deleteRow(r)的r应该是相当于形参,javascript的类型真他妈操蛋 这里的rowIndex站长都没讲,百度了一下才知道的
<script>
function deleteRow(r){
	var b = confirm("确定删除");
	if(!b)
		return;
	var i = r.parentNode.parentNode.rowIndex
	document.getElementById("heroTable").deleteRow(i);
}
</script>
<table width="100%" border="1" cellspacing="0" id="heroTable">
	<tr>
		<td width="50%">英雄名称</td>
		<td>操作</td>
	</tr>
	<tr id="row1">
		<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 个答案

我会努力学JAVA的 答案时间:2018-10-06
Table、TableHeader、TableRow、TableData 这些对象站长都没说,应该也不重要,javascript内建了好多对象啊




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





2018-08-10 有问题要问
zmz
买了几个教程的答案了 但是实在是积分不够啊




3 个答案

1822318039 答案时间:2018-09-17
binbinyoulima 答案时间:2018-09-15
多申请几个邮箱

binbinyoulima 答案时间:2018-09-15
多申请几个邮箱




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




2018-03-26 关于实例一有疑惑
2017-09-13 示例十年龄为负数也可以。。
2017-07-21 练习1问题
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群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图