DOM学习笔记六
来源：互联网 发布：苹果电脑mac怎么下游戏 编辑：程序博客网 时间：2024/06/01 09:23
示例：邮件列表
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title><link rel="stylesheet" type="text/css" href="table.css" /> <style type="text/css"> .one { background-color: #249BDB; } .two { background-color: #F8981D; } .high{ background-color: #cc0000; } </style> <script type="text/javascript"> //行颜色间隔显示功能function trColor(){//1.获取表格对象var oTableNode = document.getElementById("mailtable");//获取行对象var oTrNodes = oTableNode.rows;//3.对所有需要设置背景的行对象进行遍历 var name; for(var i = 1;i<oTrNodes.length-1;i++){ oTrNodes[i].className=(i&1)?"one":"two"; oTrNodes[i].onmouseover=function(){ name = this.className; this.className = "high"; } oTrNodes[i].onmouseout=function(){ this.className = name; } }} onload = function(){ trColor(); } //复选框的全选动作 function checkAll(node){ //获取所有的mail复选框 var omailNodes = document.getElementsByName("mail"); // alert(omailNodes.length); for(var i = 0;i<omailNodes.length;i++){ omailNodes[i].checked = node.checked; } } //定义操作操作复选框按钮的方法 function chcekAllButton(num){ var omailNodes = document.getElementsByName("mail"); for(var i = 0;i<omailNodes.length;i++){ if(num>1) { omailNodes[i].checked = !omailNodes[i].checked; } else { omailNodes[i].checked = num;//0,false,1,true,反选，全选，直接复制即可 } } } //删除所选邮件 function deleteMail() { //获取所有mail节点 if (confirm("确定要删除所选邮件?")) { var omailNodes = document.getElementsByName("mail"); for (var i = 0; i < omailNodes.length; i++) { if (omailNodes[i].checked) { var trNode = omailNodes[i].parentNode.parentNode; //注意和集合一样，只要remove，长度就减了，而i在增加 trNode.parentNode.removeChild(trNode); //所以i要-- i--; } } trColor();//删完后，颜色就变了 } }</script></head><body> <table id="mailtable"> <tr> <th><input type="checkbox" name="all" onclick="checkAll(this)">全选</th> <th>发件人</th> <th>邮件名称</th> <th>邮件附属信息</th> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是1号</td> <td>邮件1号</td> <td>信息1号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是2号</td> <td>邮件2号</td> <td>信息2号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是3号</td> <td>邮件3号</td> <td>信息3号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是4号</td> <td>邮件4号</td> <td>信息4号</td> </tr> <tr> <td><input type="checkbox" name="mail" /></td> <td>我是5号</td> <td>邮件5号</td> <td>信息5号</td> </tr> <tr> <th> <input type="checkbox" name="all" onclick="checkAll(this)"/>全选 </th> <th colspan="3"> <input type="button" value="全选" onclick="chcekAllButton(1)"/> <input type="button" value="取消全选" onclick="chcekAllButton(0)"/> <input type="button" value="反选" onclick="chcekAllButton(2)"/> <input type="button" value="删除所选邮件" onclick="deleteMail()"/> </th> </tr> </table></body></html>
校验
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"></head><body><script type="text/javascript"> function check(name,reg,spanId,okinfor,errinfor){ var flag = false; var val = document.getElementsByName(name)[0].value; var oSpanNode = document.getElementById(spanId); oSpanNode.innerHTML=(reg.test(val))?(flag=true,"√".fontcolor("green")):"X".fontcolor("red"); return flag; } //校验用户名 function checkuser(){ var reg = /^[a-z]{4}$/;//注意是正则 return check("user",reg,"userspan"); } //校验密码 function checkPsw(){ var reg = /^\d{4}$/i; return check("psw",reg,"pswspan"); } //校验邮件 function checkMail(){ var reg = /^\w+@\w+(\.\w+)+$/i; return check("mail",reg,"mailspan"); } //确定密码 function checkrePsw(){ //只要判断密码是否一致 //获取密码框内容 var flag = false; var pass = document.getElementsByName("psw")[0].value; //获取确认密码框内容 var repass = document.getElementsByName("repsw")[0].value; //获取确认密码的span var ospanNode = document.getElementById("repswspan"); // alert(pass+" : "+repass); if(pass==repass) { ospanNode.innerHTML = "√".fontcolor("green"); flag = true; }else{ ospanNode.innerHTML = "X".fontcolor("red"); } return flag; } function checkform(){ return checkuser() && checkPsw() && checkrePsw() && checkMail(); //在校验一次，以防校验通过后又改密码 } function mySubmit(){ var oFormNode = document.getElementById("usersubmit"); if(checkuser() && checkPsw() && checkrePsw() && checkMail()) oFormNode.submit(); }</script><form id="usersubmit" onsubmit="return checkform()"><!--返回false，终止数据提交--> 用户名称: <input type="text" name="user" onblur="checkuser()" /> <span id="userspan"></span> <br/><br/> 输入密码:<input type="text" name="psw" onblur="checkPsw()" /> <span id="pswspan"></span><br/><br/> 确认密码:<input type="text" name="repsw" onblur="checkrePsw()"/> <span id="repswspan"></span><br/><br/> 邮件地址:<input type="text" name="mail" onblur="checkMail()"/> <span id="mailspan"></span><br/><br/> <input type="submit" value="提交" /><br/></form><hr/><br/><!--自定义提交按钮--><input type="button" value="MySubmit" onclick="mySubmit()" /></body></html>示例—问卷调查
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #contectid{ display: none; } #noul{ list-style: none; margin: 0px; } .close{ display: none; } .open{ display: block; } </style></head><body> <!-- 单选按钮演示 1.是否参与问卷调查 2.性格测试 --> <script type="text/javascript"> function showResult(){ //1.判断是否参与选择，获取所有no1的radio，并判断checked状态 var oNo1Node = document.getElementsByName("no1"); var flag = false; var val; for(var i = 0;i<oNo1Node.length;i++){ if(oNo1Node[i].checked){ flag = true; val = oNo1Node[i].value; break; } } if(!flag){ document.getElementById("errInformation").innerHTML="没有答案被选中!".fontcolor("red"); return; } if(1<=parseInt(val) && parseInt(val)<=3){ document.getElementById("res_1").className="open";//1只要显示了，2就不要显示 document.getElementById("res_2").className="close"; }else{ document.getElementById("res_2").className="open"; document.getElementById("res_1").className="close"; } } </script> <h2>欢迎参加性格测试:</h2> <div> <h3><span>No.1:您喜欢什么?</span></h3> <ul id="noul"> <li><input type="radio" name="no1" value="1"/>A</li> <li> <input type="radio" name="no1" value="3"/>B</li> <li> <input type="radio" name="no1" value="5"/>C</li> <li><input type="radio" name="no1" value="7"/>D</li> </ul> </div> <div> <input type="button" value="查看结果" onclick="showResult()" /> <span id="errInformation"></span> <div id="res_1" class="close">1-3:性格开朗</div> <div id="res_2" class="close">4以上:浮动</div> </div> <hr/> <script type="text/javascript"> function showcontected(node){ var odivNode = document.getElementById("contectid"); with (odivNode.style){ if(node.value=="yes"){ // odivNode.style.display="block"; display="block"; }else{ //odivNode.style.display="block"; display="none"; } } } </script> <!-- 问卷调查,是，就显示问卷，否，不显示--> <div> 是否要参加问卷调查? <input type="radio" name="wenjuan" value="yes" onclick="showcontected(this)"/>是 <input type="radio" name="wenjuan" value="no" checked="checked" onclick="showcontected(this)"/>否 </div> <div id="contectid"> 内容如下:<br/><br/> 姓名:<input type="text" /><br/><br/> 邮箱:<input type="text" /><br/><br/> </div></body></html>下拉菜单
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .clrclass{ height: 50px; width: 50px; float: left; margin-right: 20px ; } #txt{ clear: left; margin-top:50px; } .selClass{ width: 100px; } </style></head><body> <script type="text/javascript"> function Changecolor(node){ // alert(node.style.backgroundColor); var color = node.style.backgroundColor; document.getElementById("txt").style.color = color; } </script> <div class="clrclass" id="clr1" style="background-color: red" onclick="Changecolor(this)"></div> <div class="clrclass" id="clr2" style="background-color: yellow" onclick="Changecolor(this)"></div> <div class="clrclass" id="clr3" style="background-color: blue" onclick="Changecolor(this)"></div> <div id="txt"> 需要显示效果的文字</br> 需要显示效果的文字</br> 需要显示效果的文字</br> 需要显示效果的文字</br> </div> <hr/> <script type="text/javascript"> function Changecolor2(){ var oselectNode = document.getElementsByName("selectcolor")[0]; //如何确定选择是哪种颜色，select API var ooptinNodes = oselectNode.options;//获取所有的option // alert(oselectNode.selectedIndex);//被选中颜色的索引 // alert(oselectNode.options[oselectNode.selectedIndex].innerHTML); var color = oselectNode.options[oselectNode.selectedIndex].value; document.getElementById("txt").style.color = color; } </script> <select name="selectcolor" onchange="Changecolor2()"> <option value="black">选择颜色</option> <option value="red">红色</option> <option value="yellow">黄色</option> <option value="blue">蓝色</option> </select> <select class="selClass" name="selectcolor2" onchange="Changecolor3()"> <option style="background-color: black" value="black">选择颜色</option> <option style="background-color: red" value="red"></option> <option style="background-color: yellow" value="yellow"></option> <option style="background-color: blue" value="blue"></option> </select></body></html>示例—选择城市<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> select{ width: 100px; } </style></head><body> <script type="text/javascript"> function selectcity(){ var citys = [['选择城市'],['A','B','C','D'], ['E','F','G','H'], ['I','J','K','L'], ['M','N','O','P'], ['Q','R','S','T']]; // var keyword = {"shandong":['A','B','C','D']};第二种方式，键值对形式 //获取两个下拉菜单对象 var oselectNode1 = document.getElementById("selectid"); var oselectNode2 = document.getElementById("subselectid"); //确定选择的是哪个省 var index = oselectNode1.selectedIndex; //通过角标获取城市数组 var arrcity = citys[index]; //将子菜单中的内容清空 /* for(var i = 1;i<oselectNode2.length;i++){ oselectNode2.removeChild(oselectNode2.options[i]); i--; }*/ oselectNode2.length = 0;//不必重新删个干净，直接初始化length就好 //遍历这个数组，并将数组的值封装成option对象，添加到子菜单中 for(var i = 0;i<arrcity.length;i++){ var opNode = document.createElement("option"); opNode.innerHTML = arrcity[i]; oselectNode2.appendChild(opNode); } } </script> <select id="selectid" onchange="selectcity()"> <option>选择省市</option> <option value="shandong">山东</option> <option>山西</option> <option>河北</option> <option>江西</option> </select> <select id="subselectid"> <option>选择城市</option> </select></body></html>添加和删除附件
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> table a:link,table a:visited{ color: #0066FF; text-decoration: none; } table a:hover{ color: red; } </style> <script type="text/javascript"> function addFile(){ var oTableNode = document.getElementById("fileid"); var oTrNode = oTableNode.insertRow(); var oTdNode_file = oTrNode.insertCell();//添加文件的单元格 var oTdNode_dele = oTrNode.insertCell();//删除文件的单元格 oTdNode_file.innerHTML = "<input type='file' />"; //oTdNode_dele.innerHTML = "<a href='javascript:void(0)' onclick='deleteFile(this)'> 删除附件 </a>"; oTdNode_dele.innerHTML = "<img src='1000.jpg' alt='删除文件' onclick='deleteFile(this)'>"; } function deleteFile(node){ var oTrNode = node.parentNode.parentNode; oTrNode.parentNode.removeChild(oTrNode); } </script></head><body> <table id="fileid"> <tr> <td> <a href="javascript:void(0)" onclick="addFile()">添加附件</a> </td> </tr> <!-- //点击添加文件，才显示 <tr> <td> <input type="file"/> </td> <td> <a href="javascript:void(0)" onclick="deleteFile()"></a> </td> </tr> --> </table></body></html>表单校验—涉及的事件和信息提示方式&&正则表达式&&提交校验
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"></head><body> <script type="text/javascript"> function checkuser(){ var flag = false; // alert("ni"); var oUserNode = document.getElementsByName("user")[0]; var oSpanNode = document.getElementById("userspan"); var name = oUserNode.value; //定义正则表达式 var reg = new RegExp("^[a-z]{4}$","i");//头尾一共4个字母，i忽略大小写 //reg = new RegExp("^[0-9]{4}$");//必须4个数字 // reg = /^[0-9]{4}$/;//第二种定义格式/..../，因为不是字符串，不需要再次转义，比如\d,在这 //种方式中直接写\d，即可 // alert(oUserNode.value); //实例校验,test方法，判断是否符合正则,match,返回的不是boolean oSpanNode.innerHTML=(reg.test(name))? ("√".fontcolor("green"),flag=true):"X".fontcolor("red"); return flag; } //form的onsubmit事件，提交事件处理 function checkform(){ //如果用户名正确，才允许提交 return checkuser(); } function mySubmit(){ var oFormNode = document.getElementById("usersubmit"); if(checkuser()) oFormNode.submit();//form的提交方法 } </script> <form id="usersubmit" onsubmit="return checkform()"><!--返回false，终止数据提交--> <!--自动校验，光标在文本框中，是获取焦点事件onblur--> 用户名称: <input type="text" name="user" onblur="checkuser()" /> <span id="userspan"></span> <br/><br/> 输入密码:<input type="text" name="psw" ><br/><br/> <input type="submit" value="提交" /><br/> </form> <hr/><br/> <!--自定义提交按钮--> <input type="button" value="MySubmit" onclick="mySubmit()" /></body></html> 0 0
- DOM学习笔记六
- 快速学习js 笔记六 dom的 body 、frameset 、frame
- jQuery 学习笔记之六 (jQuery DOM的操作)
- javascript学习六：DOM模型
- ReactJS学习笔记六：感想 - 为什么说Virtual DOM 是React的精髓所在
- JavaScript DOM编程艺术 学习笔记（六）图片库改进版
- DOM学习笔记
- DOM学习笔记(一)
- DOM学习笔记(二)
- dom 学习笔记
- DOM的学习笔记
- DOM学习笔记(一)
- javascript DOM 学习笔记
- DOM学习笔记
- 【javascript】dom学习笔记
- DOM入门学习笔记
- DOM学习完毕笔记
- DOM学习笔记
- DOM学习笔记五
- 安装并配置JIRA(实践笔记)
- 分布式文件系统HDFS名字节点（续）
- 第16周oj项目4
- 兔子--Google地图支持的地图模式
- DOM学习笔记六
- c++ ： 过程抽象和返回值的函数
- 读取ARCGIS server发布出来的图层属性信息
- 一种免费下载CNKI、维普等资源的方法
- 抽象工厂模式
- Nginx反向代理+DNS轮询+IIS7.5 千万PV 百万IP 双线 网站架构案例
- Xml:MalformedByteSequenceException: Invalid byte 2 of 2-byte UTF-8 sequence.
- CodeForces 494A Treasure
- Android面试-如何动态改变RelativeLayout中的按钮布局
