how2j.cn


工具版本兼容问题
DOM的事件有很多,下表把工作中常用的事件列出来,并进行讲解


关键字 简介 示例代码
onfocus
onblur
焦点事件
示例代码
onmousedown
onmouseup
onmousemove
onmouseout
鼠标事件
示例代码
onkeydown
onkeypress
onkeyup
键盘事件
示例代码
onclick
ondblclick
点击事件
示例代码
onchange
变化事件
示例代码
onsubmit
提交事件
示例代码
onload
加载事件
示例代码
this
当前组件
示例代码
return false
阻止事件的发生
示例代码
练习-下拉菜单
示例代码
答案-下拉菜单
示例代码
练习-验证账号是否已经存在
示例代码
答案-验证账号是否已经存在
示例代码
练习-选中所有的checkbox
示例代码
答案-选中所有的checkbox
示例代码
示例 1 : 焦点事件   
示例 2 : 鼠标事件   
示例 3 : 键盘事件   
示例 4 : 点击事件   
示例 5 : 变化事件   
示例 6 : 提交事件   
示例 7 : 加载事件   
示例 8 : 当前组件   
示例 9 : 阻止事件的发生   
示例 10 : 练习-下拉菜单   
示例 11 : 答案-下拉菜单   
示例 12 : 练习-验证账号是否已经存在   
示例 13 : 答案-验证账号是否已经存在   
示例 14 : 练习-选中所有的checkbox   
示例 15 : 答案-选中所有的checkbox   

焦点相关的事件,分别有获取焦点和失去焦点
当组件获取焦点的时候,会触发onfocus事件
当组件失去焦点的时候,会触发onblur事件
运行效果
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" > <br> <br> <input type="text" id="input2" placeHolder="输入框2"> <br> <br> <div id="message"></div> <script> function f(){ document.getElementById("message").innerHTML="输入框1获取了焦点"; } function b(){ document.getElementById("message").innerHTML="输入框1丢失了焦点"; } </script>
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>

<script>
function f(){
 document.getElementById("message").innerHTML="输入框1获取了焦点";
}

function b(){
 document.getElementById("message").innerHTML="输入框1丢失了焦点";
}

</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
鼠标事件,由鼠标按下,鼠标弹起,鼠标经过,鼠标进入,鼠标退出几个事件组成
当在组件上鼠标按下的时候,会触发onmousedown事件
当在组件上鼠标弹起的时候,会触发onmouseup事件


当在组件上鼠标经过的时候,会触发onmousemove事件
当在组件上鼠标进入的时候,会触发onmouseover事件
当在组件上鼠标退出的时候,会触发onmouseout事件
注: 当鼠标进入一个组件的时候,onmousemove和onmouseover都会被触发,区别在于无论鼠标在组件上如何移动,onmouseover只会触发一次,onmousemove每次移动都会触发
运行效果
<input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" > <br> <br> <input type="button" onmousemove="move()" value="用于演示鼠标经过" > <br> <br> <input type="button" onmouseover="over()" value="用于演示鼠标进入" > <br> <br> <input type="button" onmouseout="out()" value="用于演示鼠标退出" > <br> <br> <div id="message"></div> <script> var number = 0; function down(){ document.getElementById("message").innerHTML="按下了鼠标"; } function up(){ document.getElementById("message").innerHTML="弹起了鼠标"; } function move(){ document.getElementById("message").innerHTML="鼠标经过次数:"+(++number); } function over(){ document.getElementById("message").innerHTML="鼠标进入次数:"+(++number); } function out(){ document.getElementById("message").innerHTML="鼠标退出"; number = 0; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
键盘事件,由键盘按下keydown,键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候,会触发onkeydown事件
当在组件上键盘按下的时候,也会触发onkeypress事件
当在组件上键盘弹起的时候,会触发onkeyup事件
注: onkeypress 是当按下并弹起的组合动作,这个说法是错误的
都是用于表示键盘按下,onkeydown和onkeypress的区别在什么呢?
onkeydown
可以获取所有键,除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写

但是! 在不同的浏览器上,以上规则是不成立的。说这些都没有卵用,你无法控制用户到底使用哪种浏览器。 所以,只要记得keydown和keypress都表示点下了键。。。即可
运行效果
“记得要先用鼠标选中该组件,然后敲击键盘” <br> <input type="button" onkeydown="down(event)" value="用于演示按下keydown" > <br> <br> <input type="button" onkeypress="press(event)" value="用于演示按下keypress" > <br> <br> <input type="button" onkeyup="up()" value="用于演示弹起" > <br> <br> <div id="message"> </div> <script> var number =0; function down(e){ var text = "按下了键" + e.keyCode; if(e.shiftKey==1) text += " 并且按下了shift键"; document.getElementById("message").innerHTML=text ; } function up(){ document.getElementById("message").innerHTML="弹起了键盘"; } function press(e){ var text = "按下了键" + e.keyCode; if(e.shiftKey==1) text += " 并且按下了shift键"; document.getElementById("message").innerHTML=text ; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
点击事件,由单击,双击按两个事件组成
当在组件上单击的时候,会触发onclick事件
当在组件上双击的时候,会触发ondblclick事件
注1:在组件上,按下空格或则回车键也可以造成单击的效果,但是却不能造成双击的效果
注2: 自定义函数不要使用click(),这是保留函数名。
运行效果
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" > <br> <br> <div id="message"></div> <script> function singleClick(){ document.getElementById("message").innerHTML="单击按钮"; } function doubleClick(){ document.getElementById("message").innerHTML="双击按钮"; } </script>
<input type="button" onclick="singleClick()" ondblclick="doubleClick()"  value="用于演示单击和双击" >

<br>
<br>
<div id="message"></div>
 
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
 
function doubleClick(){

document.getElementById("message").innerHTML="双击按钮";
}
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
当组件的值发生变化的时候,会触发onchange事件
:对于输入框而言,只有在失去焦点的时候,才会触发onchange,所以需要点击一下"按钮" 造成输入框失去焦点
运行效果
<input type="text" id="t1" onchange="change()" value="" > <br> <br> <input type="button" value="令输入框失去焦点的按钮" > <br> <br> <div id="message"></div> <script> function change(){ var message = document.getElementById("message"); var t1 = document.getElementById("t1"); message.innerHTML = "输入框的值变为了: "+ t1.value; } </script>
<input type="text" id="t1" onchange="change()"  value="" >
 
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
  
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
  
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
可以在form元素上,监听提交事件
当form元素@提交的时候,会触发onsubmit事件
本例使用 提交账号密码 来进行演示
运行效果
<form action="/study/login.jsp" onsubmit="login()"> 账号:<input type="text" name="name"> <br/> 密码:<input type="password" name="password" > <br/> <input type="submit" value="登录"> </form> <script> function login(){ alert("提交表单"); } </script>
<form action="/study/login.jsp" onsubmit="login()">
账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>

<script>
  function login(){
      alert("提交表单");
  }
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
当整个文档加载成功,或者一个图片加载成功,会触发加载事件
当body元素或者img@加载的时候,会触发onload事件
运行效果
<script> function loadBody(){ document.getElementById("message1").innerHTML="文档加载成功"; } function loadImg(){ document.getElementById("message2").innerHTML="图片加载成功"; } </script> <body onload="loadBody()"> <div id="message1"></div> <div id="message2"></div> </body> <img onload="loadImg()" src="https://how2j.cn/example.gif"/>
<script>
  function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
  }
  function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
  }

</script>

<body onload="loadBody()">
  <div id="message1"></div>
  <div id="message2"></div>
</body>

<img onload="loadImg()" src="https://how2j.cn/example.gif"/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
this表示触发事件的组件,可以在调用函数的时候,作为参数传进去
运行效果
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" > <input type="button" onclick="singleClick(this)" value="演示this的按钮2" > <br> <br> <div id="message"></div> <script> function singleClick(button){ var s = "被点击的按钮上的文本是: "+button.value; document.getElementById("message").innerHTML=s; } </script>
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >

<br>
<br>
<div id="message"></div>
 
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}

</script>


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

阻止事件的发生

edit
比如在提交一个表单的时候,如果用户名为空,弹出提示,并阻止原本的提交
1. 在调用函数的时候,增加一个return
2. 在函数中,如果发现用户名为空,则返回false
3. 当onSubmit得到的返回值是false的时候,表单的提交功能就被取消了
运行效果
<form method="post" action="/study/login.jsp" onsubmit="return login()"> 账号:<input id="name" type="text" name="name"> <br/> 密码:<input 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; } return true; } </script>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号:<input id="name" type="text" name="name"> <br/>
密码:<input 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;
   }
   return true;
   
  }
</script>


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

练习-下拉菜单

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
改进练习-下拉菜单风格,使得当鼠标移动到不同菜单的时候,显示不同的下拉菜单
<style> a{ font-size:14px; color: CornflowerBlue; text-decoration: none; } div.menuweapon{ position: absolute; left: 10px; top: 20px; } div.menuarmor{ position: absolute; left: 45px; top: 20px; } div.menuhero{ position: absolute; left: 80px; top: 20px; } div.menu { width:80px; border: 1px solid lightgray; margin-top:15px; display:none; } div.menu a{ display:block; font-size:14px; font-family:宋体; color: #888; text-decoration: none; padding:10 0 10 15; } div.menu a:hover { background-color: #f1f1f1; } </style> <script> function showmenu(type){ var menuDivs = document.getElementsByClassName("menu"); for(i=0;i<menuDivs.length;i++){ var d= menuDivs[i]; d.style.display="none"; } var divClassName= "menu"+type; var div = document.getElementsByClassName(divClassName)[0]; div.style.display="block"; } </script> <a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a> <a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a> <a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a> <div class="menu menuweapon" > <a href="#nowhere"> 大剑 </a> <a href="#nowhere"> 屠龙 </a> <a href="#nowhere"> 倚天 </a> <a href="#nowhere"> 七孔砖 </a> </div> <div class="menu menuarmor"> <a href="#nowhere"> 胸甲 </a> <a href="#nowhere"> 护腕 </a> <a href="#nowhere"> 头盔 </a> <a href="#nowhere"> 鞋子 </a> </div> <div class="menu menuhero"> <a href="#nowhere"> 盖伦 </a> <a href="#nowhere"> 提莫 </a> <a href="#nowhere"> 安妮 </a> <a href="#nowhere"> 死哥 </a> </div> <div style="height:200px"></div>


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

答案-下拉菜单

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费4个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
答案-下拉菜单
<style> a{ font-size:14px; color: CornflowerBlue; text-decoration: none; } div.menuweapon{ position: absolute; left: 10px; top: 20px; } div.menuarmor{ position: absolute; left: 45px; top: 20px; } div.menuhero{ position: absolute; left: 80px; top: 20px; } div.menu { width:80px; border: 1px solid lightgray; margin-top:15px; display:none; } div.menu a{ display:block; font-size:14px; font-family:宋体; color: #888; text-decoration: none; padding:10 0 10 15; } div.menu a:hover { background-color: #f1f1f1; } </style> <script> function showmenu(type){ var menuDivs = document.getElementsByClassName("menu"); for(i=0;i<menuDivs.length;i++){ var d= menuDivs[i]; d.style.display="none"; } var divClassName= "menu"+type; var div = document.getElementsByClassName(divClassName)[0]; div.style.display="block"; } </script> <a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a> <a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a> <a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a> <div class="menu menuweapon" > <a href="#nowhere"> 大剑 </a> <a href="#nowhere"> 屠龙 </a> <a href="#nowhere"> 倚天 </a> <a href="#nowhere"> 七孔砖 </a> </div> <div class="menu menuarmor"> <a href="#nowhere"> 胸甲 </a> <a href="#nowhere"> 护腕 </a> <a href="#nowhere"> 头盔 </a> <a href="#nowhere"> 鞋子 </a> </div> <div class="menu menuhero"> <a href="#nowhere"> 盖伦 </a> <a href="#nowhere"> 提莫 </a> <a href="#nowhere"> 安妮 </a> <a href="#nowhere"> 死哥 </a> </div> <div style="height:200px"></div>


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

练习-验证账号是否已经存在

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
改进练习-验证账号是否已经存在,把需要点击按钮进行验证去掉,当用户输入用户名的时候,就自动进行验证
<html> <script> function check(){ var name = document.getElementById("name").value; var noMessage= document.getElementById("noMessage"); var yesMessage= document.getElementById("yesMessage"); noMessage.style.display="none"; yesMessage.style.display="none"; if(0!=name.length){ var firstChar = name.charAt(0); if('a'==firstChar || 'A'==firstChar) noMessage.style.display="inline"; else yesMessage.style.display="inline"; } } </script> <input id="name" placeholder="请输入账号名" onkeyup="check()"> <span id="noMessage" style="color:red;display:none;">账号已经存在</span> <span id="yesMessage" style="color:green;display:none;">账号可以使用</span> </html>


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

答案-验证账号是否已经存在

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<html> <script> function check(){ var name = document.getElementById("name").value; var noMessage= document.getElementById("noMessage"); var yesMessage= document.getElementById("yesMessage"); noMessage.style.display="none"; yesMessage.style.display="none"; if(0!=name.length){ var firstChar = name.charAt(0); if('a'==firstChar || 'A'==firstChar) noMessage.style.display="inline"; else yesMessage.style.display="inline"; } } </script> <input id="name" placeholder="请输入账号名" onkeyup="check()"> <span id="noMessage" style="color:red;display:none;">账号已经存在</span> <span id="yesMessage" style="color:green;display:none;">账号可以使用</span> </html>


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

练习-选中所有的checkbox

edit  姿势不对,事倍功半! 点击查看做练习的正确姿势
有多个复选框
点击选中所有,所有的复选框都选中了
点击反向选择,反选复选框
<script> </script> <style> a{ font-size:12px; font-weight:bold; color:SteelBlue; text-decoration: none; } </style> <script> function selectAll(checkbox){ var checked = checkbox.checked; var checkboxes= document.getElementsByTagName("input"); for(var i in checkboxes){ checkboxes[i].checked=checked?"checked":""; } } function reverse(){ var checkboxes= document.getElementsByTagName("input"); for(var i in checkboxes){ if(0==i) continue; checkboxes[i].checked=checkboxes[i].checked?"":"checked"; } } </script> <input type="checkbox" onclick="selectAll(this)" > 全选<br> <input type="checkbox" > tokyo hot<br> <input type="checkbox" > dota <br> <input type="checkbox" > lol <br> <input type="checkbox" > wow <br> <input type="checkbox" > warcraft <br> <input type="checkbox" > diablo <br> <a href="#nowhere" onclick="reverse()">反选</a>


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

答案-选中所有的checkbox

edit
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
查看本答案会花费3个积分,您目前总共有点积分。查看相同答案不会花费额外积分。 积分增加办法
账号未激活 账号未激活,功能受限。 请点击激活
运行效果
<script> </script> <style> a{ font-size:12px; font-weight:bold; color:SteelBlue; text-decoration: none; } </style> <script> function selectAll(checkbox){ var checked = checkbox.checked; var checkboxes= document.getElementsByTagName("input"); for(var i in checkboxes){ checkboxes[i].checked=checked?"checked":""; } } function reverse(){ var checkboxes= document.getElementsByTagName("input"); for(var i in checkboxes){ if(0==i) continue; checkboxes[i].checked=checkboxes[i].checked?"":"checked"; } } </script> <input type="checkbox" onclick="selectAll(this)" > 全选<br> <input type="checkbox" > tokyo hot<br> <input type="checkbox" > dota <br> <input type="checkbox" > lol <br> <input type="checkbox" > wow <br> <input type="checkbox" > warcraft <br> <input type="checkbox" > diablo <br> <a href="#nowhere" onclick="reverse()">反选</a>


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


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


问答区域    
2024-03-14 三个问题的答案
莫諾




1 : 练习-下拉菜单 改进练习-下拉菜单风格,使得当鼠标移动到不同菜单的时候,显示不同的下拉菜单 2 : 练习-验证账号是否已经存在 改进练习-验证账号是否已经存在,把需要点击按钮进行验证去掉,当用户输入用户名的时候,就自动进行验证 3 : 练习-选中所有的checkbox 有多个复选框 点击选中所有,所有的复选框都选中了 点击反向选择,反选复选框
//练习-下拉菜单
<style>
    a{
        text-decoration:none;
        font-size:16px;
    }
    div.drop-a,div.drop-b,div.drop-c{
        border:1px solid gray;
        width:60px;
        margin-top:4px;
    }
    div.drop-a{
        margin-left:10px;
        display:none;
    }
    div.drop-b{
        margin-left:40px;
        display:none;
    }
    div.drop-c{
        margin-left:70px;
        display:none;
    }
    a.h1,a.h2,a.h3{
        padding:1px 3px 2px 3px;
        margin: 2px 4px 2px 0px;
        line-height:200%;
        color:gray; 
        display:block;
    }
    a.h1:hover,a.h2:hover,a.h3:hover{
        background-color:GhostWhite;
    }
</style>
 
<a class="weapon" onmousemove="move1()" href="">武器</a>
<a class="armor" onmousemove="move2()" href="">护甲</a> 
<a class="hero" onmousemove="move3()" href="">英雄</a>
<div class="drop-a" id="da">
    <a class="h1" href="">长斫</br></a>
    <a class="h1" href="">申屠</br></a>
    <a class="h1" href="">拟天</br></a>
    <a class="h1" href="">七眼石</br></a>
</div>
<div class="drop-b" id="db">
    <a class="h2" href="">护甲</br></a>
    <a class="h2" href="">护腕</br></a>
    <a class="h2" href="">头盔</br></a>
    <a class="h2" href="">鞋子</br></a>
</div>
<div class="drop-c" id="dc">
    <a class="h3" href="">盖伦</br></a>
    <a class="h3" href="">提莫</br></a>
    <a class="h3" href="">安妮</br></a>
    <a class="h3" href="">死歌</br></a>
</div>
 
<script>
    function move1(){
        var dra = document.getElementById("da");
        dra.style.display = "block";
        out2();
        out3();
    }
    function move2(){
        var drb = document.getElementById("db");
        drb.style.display = "block";
        out1();
        out3();
    }
    function move3(){
        var drc = document.getElementById("dc");
        drc.style.display = "block";
        out1();
        out2();
    }
    function out1(){
        var doa = document.getElementById("da");
        doa.style.display = "none";
    }
    function out2(){
        var dob = document.getElementById("db");
        dob.style.display = "none";
    }
    function out3(){
        var doc = document.getElementById("dc");
        doc.style.display = "none";
    }
</script>
 
//练习-验证账号是否已经存在
<div id="dxxx">verify the account</div>
     
<input id="input1" type="text" onfocus="f()" onblur="b()" onchange="change()" value ="">
<br>
<div id ="message" style="height:30px"></div>
<script>
    function showHello(){
        //alert("账号已经存在");
        document.getElementById("dxxx").innerHTML = "账号已经存在";
    }
    function showHello1(){
        //alert("账号不存在");
        document.getElementById("dxxx").innerHTML = "账号不存在";
    }
    function f(){
        document.getElementById("message").innerHTML="输入框1获取了焦点";
    }
 
    function b(){
        change();
    }
    function change(){
        var message = document.getElementById("message");
        var t1 = document.getElementById("input1");
        message.innerHTML = "输入框的值变为了: "+ t1.value;
        var chvl = t1.value;
        if(chvl[0] == "a" || chvl[0] == "A")
            showHello();
        else
            showHello1();
    }       
</script>
     
//练习-选中所有的checkbox
<p>多个复选框都有哪些?</p>
   
<input type="checkbox" id="check1" onclick="singleClick(this)" value="全选" > 全选<br/>
<input class="checkb" type="checkbox" id="check2" checked="checked" name="activity" value="tokyohot" >tokyohot <br/>
<input class="checkb" type="checkbox" id="check3" value="dota" >dota <br/>
<input class="checkb" type="checkbox" id="check4" value="lol">lol <br/>
<input class="checkb" type="checkbox" id="check5" value="wow">wow <br/>
<input class="checkb" type="checkbox" id="check6" value="warcraft">warcraft <br/>
<input class="checkb" type="checkbox" id="check7" value="diablo">diablo <br/>
<a href="#nowhere" onclick="reverse()">反选</a> 
 
<script>
    function singleClick(checkbox){
        var check = document.getElementById("check1").checked;
        var checks = document.getElementsByClassName("checkb");
        for(var i = 0;i < checks.length; i++){
            if(check==true)
                document.getElementById(checks[i].id).checked=true;
            else{
                check=false; 
                document.getElementById(checks[i].id).checked=false;
            }   
        }   
    }
    function reverse(){
        var checks = document.getElementsByClassName("checkb");
        var nums1 = new Array();
        var nums2 = new Array();
        for(var i = 0;i < checks.length; i++){
            var tg = document.getElementById(checks[i].id).checked;
            if(tg==true)
                nums1.push(checks[i].id);
            else
                nums2.push(checks[i].id);
        }
        for(var i = 0;i < checks.length; i++){
            var tg = document.getElementById(checks[i].id).checked;
            if(tg==true){
                for(var j = 0;j < nums1.length; j++){
                    document.getElementById(nums1[j]).checked=false;
                }
            }
            else{
                for(var j = 0;j < nums2.length; j++){
                    document.getElementById(nums2[j]).checked=true;
                }
            }   
        }
    }
</script>

							





回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2022-07-17 想知道表单提交成功后是怎么实现用户信息显示的,正确提交完后会跳转到空白页面欸?
AnomyIris

想知道表单提交成功后是怎么实现用户信息显示的,正确提交完后会跳转到空白页面欸?




2 个答案

wrj14
答案时间:2023-02-24
能运行,但是看的好不爽,啊啊啊,太气人了,好多基本的错误啊

54Mozu
答案时间:2022-12-15
第一题



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2022-06-08 例14
2021-05-06 href="#nowhere" 的作用是什么啊?为什么要写这个?
2021-04-21 下拉菜单为什么这样不行?


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 60 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-HTML DOM-事件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图