DOM【事件、操作节点、DOM案例】--学习JavaEE的day49

day49

JS核心技术

DOM

继day48

事件

键盘事件

监听器：onkeydown、onkeypress、onkeyup

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");}			</script></body>
</html>

运行：注意Tab只触发了一个事件，回车与其他功能键不同
键盘事件

案例

设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。

注：键盘按下字母为小写，松开字母变为大写，可见我们设置的监听器onkeyup

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeyup="myUp(this)"/><script type="text/javascript">function myUp(obj){//获取value属性var v = obj.value;//转大写v = v.toUpperCase();//设置value属性obj.value = v;}			</script></body>
</html>

鼠标事件

onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/波多野结衣.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script></body>
</html>

运行：鼠标移入–鼠标移动–鼠标按下–鼠标松开–鼠标移动–鼠标移出
鼠标事件

案例

一个类似游戏选英雄，选中深色，未选中灰色；鼠标移入移出事件加cs样式来简单实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/波多野结衣.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/星空一花.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/樱井步.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><script type="text/javascript">function myOver(obj){//鼠标移入事件obj.style.opacity = 1;}function myOut(obj){//鼠标移出事件obj.style.opacity = 0.3;}</script></body>
</html>

运行：
鼠标事件案例

案例优化

动态绑定事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/波多野结衣.jpg" /><img src="../../img/game01.jpg" /><img src="../../img/星空一花.jpg" /><img src="../../img/tx1.jpg" /><img src="../../img/tx2.jpg" /><img src="../../img/tx3.jpg" /><script type="text/javascript">//动态绑定事件var imgArr = document.getElementsByTagName("img");for(var i = 0;i<imgArr.length;i++){var img = imgArr[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body>
</html>

焦点事件

onfocus获取焦点事件

onblur失去焦点事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onfocus="myFocus()"onblur="myBlur()"	/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}</script></body>
</html>

运行：点进去–退出来
焦点事件

案例

写一个注册账号的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉

注意：这里的条件判断和正则表达式是优化，浏览器老版本不支持trim【trim表获取该函数里代码，trim()表调用】，js使用正则表达式很普遍

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"value="请输入账号..."onfocus="myFocus(this)"onblur="myBlur(this)"	/><script type="text/javascript">function myFocus(obj){//获取焦点事件if(obj.value == "请输入账号..."){obj.value = "";}}function myBlur(obj){//失去焦点事件//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined//alert(obj.value.trim);//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() == ""){obj.value = "请输入账号...";}}else{//注意：IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){obj.value = "请输入账号...";}}}</script></body>
</html>

运行：
焦点事件案例

操作节点

添加节点

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

删除节点

如需删除 HTML 元素，必须首先获得该元素的父元素

注意：对于删除节点观察，这里查的元素是id为manager的标签div，如果在此标签外有换行之类的标签会出现删除不到，也可以说是查不到

addP()方便理解，简单添加标签使用innerHTML可简化

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="addP()">添加p标签</button><button onclick="addImg()">添加img标签</button><button onclick="deleteImg()">删除img标签</button><div id="manager"></div><script type="text/javascript">var manager = document.getElementById("manager");function addP(){//创建节点 - <p></p>var p = document.createElement("p");//创建文本内容 - 用良心做教育var text = document.createTextNode("用良心做教育");//将文本内容添加到节点里 - <p>用良心做教育</p>p.appendChild(text);//将节点添加到div中manager.appendChild(p);}function addImg(){//创建节点 - <img />var img = document.createElement("img");//设置属性img.setAttribute("src","../../img/tx2.jpg");img.setAttribute("width","100px");img.setAttribute("height","100px");//创建节点 - <br/>var br = document.createElement("br");//将节点添加到div中manager.appendChild(img);manager.appendChild(br);}function deleteImg(){//删除思路：由父节点删除子节点//查询需要删除的节点var img = document.getElementsByTagName("img")[0];var br = document.getElementsByTagName("br")[0];manager.removeChild(img);manager.removeChild(br);}</script></body>
</html>

运行：
操作节点

案例

删除学生信息

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr><td>小希</td><td>女</td><td>27</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小阳</td><td>女</td><td>23</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小西</td><td>女</td><td>25</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小香</td><td>女</td><td>24</td><td><button onclick="myDelete(this)">删除</button></td></tr></table><script type="text/javascript">function myDelete(obj){var tr = obj.parentNode.parentNode;var table = tr.parentNode;table.removeChild(tr);}</script></body>
</html>

运行：
节点案例

案例

计算器案例

计算器案例：获取元素值不用查询的方法，过于繁琐，text01.value；

注意获取值需要将文本框String类型转Int类型

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="text01"/>+<input type="text" id="text02"/><button onclick="add()">=</button><input type="text" id="text03"/><script type="text/javascript">function add(){//获取到输入框的value是string类型var result = parseInt(text01.value) + parseInt(text02.value);text03.value = result;}</script></body>
</html>

做级联下拉列表— 二级联动（省市）

首先编写两个下拉列表

获取其中一个下拉列表

并为其绑定onchange事件

并获取其选中的值：var optionVal = select.value;

然后根据选中的值，重新设置另一个下拉列表的innerHTML

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){city.innerHTML = "<option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option>";}else if(this.value == "hn"){city.innerHTML = "<option>长沙</option><option>永州</option><option>娄底</option><option>益阳</option><option>张家界</option>";}else if(this.value == "hb"){city.innerHTML = "<option>武汉</option><option>黄冈</option><option>仙桃</option><option>咸宁</option><option>孝感</option>";}}</script></body>
</html>

运行：
二级联动案例

案例优化

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);}else if(this.value == "hn"){updateCity(["长沙","永州","娄底","益阳","张家界"]);}else if(this.value == "hb"){updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);}}function updateCity(arr){//清空city列表city.length = 0;for(var i = 0;i<arr.length;i++){var option = document.createElement("option");option.innerText = arr[i];city.appendChild(option);}}</script></body>
</html>

提交案例–表单验证

用户名不能为空

密码和确认密码是否一致

表单项不符合条件不能提交表单

表单的提交事件—onsubmit

通过返回值判断是否提交，再设置条件，还进行提示优化，调用函数注意返回值【onsubmit】

方式1：有id

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form id="registerForm" action="#" method="post">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];//给表单绑定提交事件registerForm.onsubmit = function(){span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>

运行：
提交案例

方式2：无id，直接是函数

注意：οnsubmit=“return fun01()”，要写return，因为返回值要返回给事件，不然会出现直接就可以提交的问题

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form action="#" method="post" onsubmit="return fun01()">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];function fun01(){span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>