JavaScript学习笔记
JavaScript学习笔记，可直接另存为html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> 模拟添加/删除用户:<br> 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /> <button id="addUser">提交</button> <table id="usertable" border="1" cellpadding="5" cellspacing=0 width="600"> <tbody> <tr> <th>姓名</th> <th>email</th> <th>电话</th> <th>操作</th> </tr> <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="#">Delete</a></td> </tr> </tbody> </table> <script language="JavaScript"> //dom结构绘制完毕,页面的所有关联的文件必须加载完毕(图片) window.onload=function(){ //<button id="addUser">提交</button> document.getElementById("addUser").onclick=function(){ /******************************************************************************************************/ //获取文本框的值 /* * 姓名: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> 电话: <input type="text" name="tel" id="tel" /><br><br> */ var nameValue=document.getElementById("name").value; var emailValue=document.getElementById("email").value; var telValue=document.getElementById("tel").value; /******************************************************************************************************/ //创建td /* * <tr> <td>Tom</td> <td>[email protected]</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> */ //创建nametd var nameTd=document.createElement("td"); var nameText=document.createTextNode(nameValue); nameTd.appendChild(nameText); //创建emailtd var emailTd=document.createElement("td"); var emailText=document.createTextNode(emailValue); emailTd.appendChild(emailText); //创建teltd var telTd=document.createElement("td"); var telText=document.createTextNode(telValue); telTd.appendChild(telText); //创建atd var aTd=document.createElement("td"); var aElement=document.createElement("a"); aElement.setAttribute("href","deleteEmp?id="+nameValue); var deleteText=document.createTextNode("Delete"); aElement.appendChild(deleteText); aTd.appendChild(aElement); /******************************************************************************************************/ //创建tr var trElement=document.createElement("tr"); //增加td到tr上 trElement.appendChild(nameTd); trElement.appendChild(emailTd); trElement.appendChild(telTd); trElement.appendChild(aTd); /******************************************************************************************************/ //增加tr到table上 //<table id="usertable" border="1" cellpadding="5" cellspacing=0> //<tbody> var tableElement=document.getElementById("usertable"); //创建tbody,为了跨浏览器,要创建tbody var tbodyElement=document.createElement("tbody"); tbodyElement.appendChild(trElement); //放置tbody到table上 tableElement.appendChild(tbodyElement); /******************************************************************************************************/ //删除 aElement.onclick=function(){ //使网页的链接失效 return delTr(aElement); } /******************************************************************************************************/ } } /** * @param {Object} aElement */ function delTr(aElement){ /* * <tr> <td> Tom </td> <td>[email protected]</td> <td>5000</td> <td><a href="deleteEmp?id=Tom">Delete</a></td> </tr> */ var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue; //alert("name "+name) var flag=window.confirm("您真的要删除["+name+"]这个用户吗?"); //alert(flag); // 点击"取消" 按钮 if(!flag){ //使网页的链接失效 return false; } //删除 //获取tbody var tbodyElement=aElement.parentNode.parentNode.parentNode; //获取tr var trElement=aElement.parentNode.parentNode; //删除 tbodyElement.removeChild(trElement); //使网页的链接失效 return false; } </script> <hr/> 您的爱好很广泛!!! <br> <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选 <br> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 <br> <input type="button" name="checkall" id="checkall" value="全选" /> <input type="button" name="checkall" id="checkallNo" value="全不选" /> <input type="button" name="checkall" id="check_revsern" value="反选" /> <script language="JavaScript"> window.onload=function(){ //<input type="button" name="checkall" id="checkall" value="全选" /> document.getElementById("checkall").onclick=function(){ var itemElements=document.getElementsByName("items"); for(var i=0;i<itemElements.length;i++){ //方法一: <input type="checkbox" name="items" value="足球" />足球 //itemElements[i].setAttribute("checked","checked"); //方法二 itemElements[i].checked="checked"; } } //<input type="button" name="checkall" id="checkallNo" value="全不选" /> document.getElementById("checkallNo").onclick=function(){ var itemElements=document.getElementsByName("items"); for (var i = 0; i < itemElements.length; i++) { var itemElement=itemElements[i]; //方法一,IE行,其他的不行 //itemElement.setAttribute("checked",null); //方法二: 都行 itemElement.checked=null; } } //<input type="button" name="checkall" id="check_revsern" value="反选" /> document.getElementById("check_revsern").onclick=function(){ var itemElements=document.getElementsByName("items"); for (var i = 0; i < itemElements.length; i++) { var itemElement = itemElements[i]; //itemElement.checked:如果选中为true,否则false if(itemElement.checked){ itemElement.checked=null; }else{ itemElement.checked="checked"; } } } //<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选 document.getElementById("checkItems").onclick=function(){ //alert(this.checked); var itemElements=document.getElementsByName("items"); for (var i = 0; i < itemElements.length; i++) { var itemElement = itemElements[i]; if(this.checked){ itemElement.checked="checked"; }else{ itemElement.checked=null; } } } } </script> <hr/> <form method="post" name="myform"> <table border="0" width="300"> <tr> <td width="40%"> <select style="WIDTH:100%" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="山东">山东</option> <option value="安徽">安徽</option> <option value="重庆">重庆</option> <option value="福建">福建</option> <option value="甘肃">甘肃</option> <option value="广东">广东</option> <option value="广西">广西</option> <option value="贵州">贵州</option> <option value="海南">海南</option> <option value="河北">河北</option> <option value="黑龙江">黑龙江</option> </select> </td> <td width="20%" align="center"> <input type="button" value="-->添加" onclick="moveOption(document.myform.list1, document.myform.list2)"> <br/> <input type="button" value="==>全添" onclick="moveAllOption(document.myform.list1, document.myform.list2)"> <br/> <input type="button" value="<--删除" onclick="moveOption(document.myform.list2, document.myform.list1)"> <br/> <input type="button" value="<==全删" onclick="moveAllOption(document.myform.list2, document.myform.list1)"> </td> <td width="40%"> <select style="WIDTH:100%" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)"> </select> </td> <td> <button onclick="changepos(document.myform.list2,-1)" type="button">上移</button> <br/> <button onclick="changepos(document.myform.list2,1)" type="button">下移</button> </td> </tr> </table> 值：<input type="text" name="city" size="40"> </form> <script language="JavaScript"> <!-- function moveOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ if(e1.options[i].selected){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); i=i-1 } } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function moveAllOption(e1, e2){ try{ for(var i=0;i<e1.options.length;i++){ var e = e1.options[i]; e2.options.add(new Option(e.text, e.value)); e1.remove(i); i=i-1 } document.myform.city.value=getvalue(document.myform.list2); } catch(e){} } function getvalue(geto){ var allvalue = ""; for(var i=0;i<geto.options.length;i++){ allvalue +=geto.options[i].value + ","; } return allvalue; } function changepos(obj,index){ alert(obj.selectedIndex); if(index==-1){ if (obj.selectedIndex>0){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1)) } }else if(index==1){ if (obj.selectedIndex<obj.options.length-1){ obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1)) ; alert(obj.selectedIndex); } } } //--> </script> <hr/> 级联菜单： <form name="m"> <select name="p" onchange="choose()"> <option value="0" selected>--省份--</option> <option value="1">广东</option> <option value="2">山东</option> </select> <select name="city"> <option value="0">--城市--</option> </select> </form> <script language="javaScript"> var dt = new Array(); // 模拟的测试数据 dt[0] = new Array('0','--请先选择省份--'); var gd = new Array(); gd[0] = new Array('0','广州'); gd[1] = new Array('1','深圳'); gd[2] = new Array('2','中山'); var sd = new Array(); sd[0] = new Array('0','济南'); sd[1] = new Array('1','青岛'); sd[2] = new Array('2','威海'); function showCity(pe){ // 动态加载1级菜单 for (var i=0;i<pe.length;i++){ document.m.city.options[i] = new Option(pe[i][1],pe[i][0]); } } function choose(){ // 动态加载2级菜单 var tag = document.m.p.value; switch(tag){ case '0': init(); showCity(dt); break; case '1': init(); showCity(gd); break; case '2': init(); showCity(sd); break; } } function init(){ // 初始化2级菜单 var len = document.m.city.options.length; for(var i=0;i<len;i++){ document.m.city.remove(i); } } function flush(){ // 解决页面刷新,初始化1级菜单 document.m.p.options[0].selected=true ; } </script> <hr/> <p>员工信息录入</p> <form name="empForm" id="empForm" method="post" action="user.html"> <table border=1> <tr> <td>真实姓名(不能为空 ,没有其他要求)</td> <td><input type="text" id="realname" name="realname" /> </td> </tr> <tr> <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td> <td><input type="text" id="username" name="username" /></td> </tr> <tr> <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> <td><input type="password" id="psw" name="psw" style="width:120px" /></td> </tr> <tr> <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td> </tr> <tr> <td>性别(必选其一)</td> <td> <input type="radio" id="gender_male" value="m" name="gender"/>男 <input type="radio" id="gender_female" value="f" name="gender"/>女 </td> </tr> <tr> <td>身份证(15或18为)</td> <td><input type="text" id="cart" name="cart" size=20 value="" /></td> </tr> <tr> <td></td> <td></td> <td><input type="button" name="ok" id="ok" value="保存" ></td> </tr> </table> </form> </body> <script language="JavaScript"> window.onload=function(){ document.getElementById("ok").onclick=function(){ /****************************************************************************************************/ /* * <tr> <td>真实姓名(不能为空 ,没有其他要求)</td> <td><input type="text" id="realname" name="realname" /> </td> </tr> */ var realnameValue=document.getElementById("realname").value; //alert("realnameValue"+ltrim(rtrim(realnameValue))+"realnameValue") if(ltrim(rtrim(realnameValue))==""||realnameValue==null||realnameValue==undefined){ alert("真实姓名不能为空"); document.getElementById("realname").focus(); return false; } /****************************************************************************************************/ /* * <tr> <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td> <td><input type="text" id="username" name="username" /></td> </tr> */ var usernameValue=document.getElementById("username").value; if(ltrim(rtrim(usernameValue))==""||usernameValue==null||usernameValue==undefined){ alert("登录名不能为空"); document.getElementById("username").focus(); return false; } //验证长度在5-8之间,字符包括[字母 数字 中文] var pattern=/^[_0-9a-zA-Z\u4e00-\u9fa5]{5,8}$/; var flag=pattern.test(ltrim(rtrim(usernameValue))); if(!flag){ alert("登录名长度在5-8之间,"); document.getElementById("username").focus(); return false; } /****************************************************************************************************/ // /* // * <tr> // <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> // <td><input type="password" id="psw" name="psw" style="width:120px" /></td> // </tr> // */ var pswValue=document.getElementById("psw").value; if(ltrim(rtrim(pswValue))==""||pswValue==null||pswValue==undefined){ alert("密码不能为空"); document.getElementById("psw").focus(); return false; } //长度6-12字符或数字,不能包含中文字符 //使用文本格式定义正则表达式,字符0-128之间 //var pattern=/^[0-9a-zA-Z]{6,12}$/; //注意 \d形式的正则,如果使用文本格式不用加转义字符.如果使用构造函数定义,则要加转义字符 //var pattern=/^[\da-zA-Z]{6,12}$/; //使用构造函数定义正则表达式,，没有字符限制 var pattern=new RegExp("^[0-9a-zA-Z]{6,12}$"); var pattern=new RegExp("^[\\da-zA-Z]{6,12}$"); var flag=pattern.test(ltrim(rtrim(pswValue))); if(!flag){ alert("长度6-12字符或数字,不能包含中文字符"); document.getElementById("psw").focus(); return false; } // ************************************************************************************************** // * <tr> // <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td> // <td><input type="password" id="psw2" name="psw2" style="width:120px" /></td> // </tr> // var psw2Value=document.getElementById("psw2").value; if(pswValue!=psw2Value){ alert("两次密码输入的不一致"); document.getElementById("psw2").focus(); return false; } /****************************************************************************************************/ /* * <tr> <td>性别(必选其一)</td> <td> <input type="radio" id="gender_male" value="m" name="gender"/>男 <input type="radio" id="gender_female" value="f" name="gender"/>女 </td> </tr> */ var flag=false; var genderElements=document.getElementsByName("gender"); for(var i=0;i<genderElements.length;i++){ if(genderElements[i].checked){ flag=true; } } if(!flag){ alert("您没有第三种性别可选"); return false; } /****************************************************************************************************/ /* * <tr> <td>身份证(15或18为)</td> <td><input type="text" id="cart" name="cart" size=20 value="" /></td> </tr> */ var cartValue=document.getElementById("cart").value; if (ltrim(rtrim(cartValue)) == "" || cartValue == null || cartValue == undefined) { alert("身份证不能为空"); document.getElementById("cart").focus(); return false; } var len=cartValue.length; if(len!=15&&len!=18){ alert("您的身份证位数输入有误"); document.getElementById("cart").focus(); return false; } //验证15位的身份证 if(len==15){ var pattern=/^\d{15}$/; var flag=pattern.test(cartValue); if(!flag){ alert("您的15位的身份证格式输入有误"); document.getElementById("cart").focus(); return false; } } //验证18位的身份证 if(len==18){ var pattern=/^\d{18}|\d{17}[X]{1}$/; var flag=pattern.test(cartValue); if(!flag){ alert("您的18位的身份证格式输入有误"); document.getElementById("cart").focus(); return false; } } /****************************************************************************************************/ document.forms[0].submit(); } } /** * 去掉左端的空格 * ***zhu * **zhu * *zhu * zhu * */ function ltrim(str){ while(str.charAt(0)==" "){ str=str.substring(1,str.length); ltrim(str); } return str } /** * 去掉右端的空格 * zhu*** * * */ function rtrim(str){ while(str.charAt(str.length-1)==" "){ str=str.substring(0,str.length-1); rtrim(str); } return str } </script> <hr/> <hr/> <hr/> </body> </html>