Bom和Dom编程以及js中prototype的详解
一.Bom编程：
1.事件练习：
<!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> <script> function getCurrentTime(){ var date = new Date(); var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); //alert(timeInfo); var spanobj = document.getElementById("time"); spanobj.innerHTML = timeInfo.fontcolor("red"); } function showTime(){ getCurrentTime(); //window.setInterval("getCurrentTime()",1000); } function hideTime(){ var spanobj = document.getElementById("time"); spanobj.innerHTML = ""; } function clickTest(){ alert("单击"); } function dblclick(){ alert("双击"); } function showInfo(){ var usename=document.getElementById("username"); usename.innerHTML="请输入账号".fontcolor("red"); } function hideInfo(){ var usename=document.getElementById("username"); usename.innerHTML=""; } //onchange function showURL(){ alert(location.href); } function download(){ location.href="http://handsomecui.top"; } function refresh(){ location.reload(); } //setInterval("refresh()",1000); document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>"); document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>"); document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>"); document.write("获取屏幕的水平分辨率："+screen.width+"<br/>"); </script> </head> <body onload="showTime()"> <span onmousemove="showTime()" onmouseout="hideTime()">显示当前系统时间。。。</span><span id="time"></span> <input type="button" onclick="clickTest()" ondblclick="dblclick()" value="点击" /> <br/> username:<input type="text" onfocus="showInfo()" onblur="hideInfo()" /><span id="username"></span> <input type="button" onclick="showURL()" value="显示地址栏" /> <span onclick="download()">下载电影</span> </body> </html>
2.循环打开窗口以及浏览器的大小位置设置练习：
<!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>BOM练习</title> <script> function showAd(){ window.open("http://baidu.com","_blank","height=400px,width=400px,toobar=no,location=no,top=200px"); } function small(){ window.resizeTo(300,200); } var id = setInterval("showAd()", 2000); function clearTask(){ clearInterval(id); } //setTimeout </script> </head> <body> <input type="Button" onclick="showAd()" value="下载电影"/> <input type="Button" onclick="small()" value="变小"> <input type="Button" onclick="clearTask()", value="取消任务"/> </body> </html>
二. Dom编程：
1.几种找dom树节点方法的简单练习：
getElementById();
getElementsByName();
getElementsByTagName();
<!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> <script> function showText(){ var input=document.getElementById("inputtest"); input.value="设置好了"; } function showImg(){ var images = document.getElementsByTagName("img"); for(var i=0;i<images.length;i++){ images[i].src="../data/1.jpg"; images[i].width=200; images[i].height=200; } } function showdiv(){ var mydivs=document.getElementsByName("mydiv"); //alert(mydivs.length); for(var i=0;i<mydivs.length;i++){ mydivs[i].innerHTML="哈哈哈哈".fontcolor("red"); } } </script> </head> <body> <input type="text" value="请输入内容" id="inputtest" /> <input type="button" value="显示内容" id="button" onclick="showText()" /> <img src=""/> <img src=""/> <img src=""/> <input type="button" value="显示图像" onclick="showImg()" /> <div name="mydiv"></div> <div name="mydiv"></div> <div name="mydiv"></div> <input type="button" value="显示div" onclick="showdiv()" /> </body> </html>
2.通过复选框求商品价格的小练习：
<!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> <script> function allSelect(ap){ var p=document.getElementsByName("product"); for(var i = 0; i < p.length; i++){ if(ap.checked == 1) p[i].checked = 1; else p[i].checked = 0; } } function count(bt){ var p=document.getElementsByName("product"); var sum=0; for(var i = 0; i < p.length;i++){ if(p[i].checked) sum += parseInt(p[i].value); } bt.value="总金额为"; var money=document.getElementsByTagName("span")[0]; money.innerHTML=(" ¥"+sum).fontcolor("green"); } </script> </head> <body> 商品列表：<br/> <input type="checkBox" name="product" value="2800" id="product1"/>笔记本电脑2800元<br/> <input type="checkBox" name="product" value="2600" id="product2"/>笔记本电脑2600元<br/> <input type="checkBox" name="product" value="3800" id="product3"/>笔记本电脑3800元<br/> <input type="checkBox" name="product" value="3600" id="product4"/>笔记本电脑3600元<br/> <input type="checkBox" name="product" value="2700" id="product5"/>笔记本电脑2700元<br/> <input type="checkBox" name="product" value="2900" id="product6"/>笔记本电脑2900元<br/> <input type="checkBox" name="product" value="3700" id="product7"/>笔记本电脑3700元<br/> <input type="checkBox" name="product" value="3900" id="product8"/>笔记本电脑3900元<br/> <input type="checkBox" id="allproduct" onclick="allSelect(this)" />全选<br/> <input type="button" onclick="count(this)" value="总金额：" /> <span></span> </body> </html>
3.通过关系找标签，创建添加删除标签的练习以及实现在表格中添加删除多个文件，实现一个日期选择的联动框：
<!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> <script> /* 通过关系(父子关系、兄弟关系)找标签。 parentNode 获取当前元素的父节点。 childNodes 获取当前元素的所有下一级子元素。 firstChild 获取当前节点的第一个子节点。 lastChild 获取当前节点的最后一个子节点。 ------------------------------------------------------------ nextSibling 获取当前节点的下一个节点。（兄节点） previousSibling 获取当前节点的上一个节点。（弟节点) 我们可以通过标签的类型进行判断筛选： 文本节点的类型： 3 注释的节点类型： 8 标签节点的类型： 1 创建字节入插入节点、设置节点的属性。 document.createElement("标签名") 创建新元素节点 elt.setAttribute("属性名", "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后的位置 elt.insertBefore(newNode,oldNode); */ function isRun(y){ if(y%400==0 || (y%4==0&&y%100!=0)) return 1; else return 0; } function start(){ var s=""; var bodyNode = document.getElementsByTagName("body")[0]; s = s + "body的父节点：" + bodyNode.parentNode.nodeName + "<br/>"; var showText = document.getElementsByTagName("span")[0]; var children = bodyNode.childNodes; s = s + "body子节点是：" + "<br/>"; for(var i = 0; i < children.length; i++){ s = s + children[i].nodeName + " 对象类型是: " + children[i].nodeType +"<br/>"; } s = s + "span的下一个兄弟节点是：" + showText.nextSibling.nodeName + "<br/>"; s = s + "span的上一个兄弟节点是：" + showText.previousSibling.nodeName + "<br/>"; showText.innerHTML = s.fontcolor("red"); var m=[0,31,28,31,30,31,30,31,31,30,31,30,31]; var selectNodeYear = document.getElementsByTagName("select")[0]; var selectNodeMonth = document.getElementsByTagName("select")[1]; var selectNodeDay = document.getElementsByTagName("select")[2]; var curDate = new Date(); //alert(curDate.getYear()); //初始化年 for(var i=1900; i<=curDate.getFullYear(); i++){ var newOption = document.createElement("option"); newOption.innerHTML = i; if(i == curDate.getFullYear()){ newOption.setAttribute("selected","selected"); } selectNodeYear.appendChild(newOption); } //初始化月 for(var i=1; i<=12; i++){ var newOption = document.createElement("option"); newOption.innerHTML = i; if(i == curDate.getMonth()+1){ newOption.setAttribute("selected","selected"); } selectNodeMonth.appendChild(newOption); } //初始化日 if(isRun(curDate.getFullYear())) m[2] = 29; else m[2] = 28; //alert(m[2]); //alert(curDate.getDay());注意getDay是获取星期几的； for(var i = 1; i <= m[curDate.getMonth()+1]; i++){ var newOption = document.createElement("option"); newOption.innerHTML = i; if(i == curDate.getDate()){ newOption.setAttribute("selected","selected"); } selectNodeDay.appendChild(newOption); } } var num=1; function add(){ var inputNode = document.createElement("input"); inputNode.setAttribute("type", "button"); inputNode.setAttribute("value", "新按钮"+(num++)); var bodyNode = document.getElementsByTagName("body")[0]; bodyNode.appendChild(inputNode); } function addfile(inputNode){ var tbodyNode=document.getElementsByTagName("tbody")[0]; var newtr = document.createElement("tr"); var newtd1 = document.createElement("td"); var newtd2 = document.createElement("td"); newtd1.innerHTML = "<input type='file'/>"; newtd2.innerHTML = "<a href='#' onclick='deletefile(this)'>删除附件</a>"; newtr.appendChild(newtd1); newtr.appendChild(newtd2); //tableNode.appendChild(newtr); //alert(inputNode.parentNode.nodeName); tbodyNode.insertBefore(newtr,inputNode.parentNode.parentNode);//注意必须是tr的直接父节点，所以是tbody } function deletefile(deleteNode){ var tbodyNode=document.getElementsByTagName("tbody")[0]; tbodyNode.removeChild(deleteNode.parentNode.parentNode); } //月改变对应修改日的范围 function addDay(){ var m=[0,31,28,31,30,31,30,31,31,30,31,30,31]; var selectNodeYear = document.getElementsByTagName("select")[0]; var selectNodeMonth = document.getElementsByTagName("select")[1]; var selectNodeDay = document.getElementsByTagName("select")[2]; selectNodeDay.length = 0; /* if(selectNodeMonth[i].getAttribute("selected") == "selected"){ alert(i); } 这样只会找到默认显示的位置假设今天是10月那么只会找到9 可以直接用selectedIndex属性来得到选中的月份 */ if(isRun(selectNodeYear.selectedIndex + 1900)) m[2] = 29; else m[2] = 28; //alert(m[2]); //alert(curDate.getDay());注意getDay是获取星期几的； for(var i = 1; i <= m[selectNodeMonth.selectedIndex + 1]; i++){ var newOption = document.createElement("option"); newOption.innerHTML = i; selectNodeDay.appendChild(newOption); } } </script> </head> <body onload="start()"> <!-- gasfa --> <span></span> <input type="button" onclick="add()" value="点我" /> <table> <tr> <td><input type="file"/></td> <td><a href="#" onclick="deletefile(this)">删除附件</a></td> </tr> <tr> <td><input type="button" value="添加附件" onclick="addfile(this)"/></td> </tr> </table> 年<select onchange="addDay()"></select> 月<select onchange="addDay()"></select> 日<select></select> </body> </html>
4.通过css的操作，实现一个验证码；以及正则表达式判定一个表单
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <script> /* 正则表达式的创建方式： "" 方式1： /正则表达式/模式 方式2： new RegExp("正则表达式",模式); 正则表达式对象常用的方法： test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false. exec() 根据正则表达式去查找字符串符合规则的内容。 模式： g （全文查找出现的所有 pattern） i （忽略大小写） */ function createCode(){ var d = ['1', '2', '你', '好', 'A', 'B']; var str=""; for(var i = 0; i < 4; i++){ //alert(Math.random()*6); str += d[Math.floor(Math.random()*d.length)]; } var spanNode = document.getElementById("code"); spanNode.innerHTML = str; spanNode.style.fontSize = '16pt'; spanNode.style.fontStyle = 'italic'; spanNode.style.backgroundColor = 'gray'; spanNode.style.textDecoration = 'line-through'; spanNode.style.color = 'green'; } function searchStr(){ var strNode = document.getElementsByTagName("input")[0]; var str = strNode.value; var reg = /^[A-Z0-9]+$/i; var spanNode = document.getElementById("test"); spanNode.innerHTML = '匹配吗？' + reg.test(str) + '<br/>'; reg = /\b[a-z]{3}\b/gi; var line=""; spanNode.innerHTML = ''; while((line=reg.exec(str)) != null){ spanNode.innerHTML = spanNode.innerHTML + line + '<br/>'; } } function checkName(){ var inputNode = document.getElementById("userName"); var spanNode = document.getElementById("userId"); var content = inputNode.value; var reg = /^[a-z][a-z0-9]{5}$/i; if(reg.test(content)){ spanNode.innerHTML = "正确".fontcolor("green"); return true; } else{ spanNode.innerHTML = "错误".fontcolor("red"); return false; } } function checkPass(){ } function ensurepass(){ var pwd1Node = document.getElementById("pwd"); var pwd2Node = document.getElementById("ensurepwd"); var pwd1 = pwd1Node.value, pwd2 = pwd2Node.value; var spanNode = document.getElementById("ensure"); if(pwd1 == pwd2){ spanNode.innerHTML = "正确".fontcolor("green"); return true; } else{ spanNode.innerHTML = "错误".fontcolor("red"); return false; } } function checkEmail(){ var email = document.getElementById("email").value; var spanNode = document.getElementById("emailspan"); var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; if(reg.test(email)){ spanNode.innerHTML = "正确".fontcolor("green"); return true; } else{ spanNode.innerHTML = "错误".fontcolor("red"); return false; } } function checkAll(){ var userName = checkName(); var email = checkEmail(); var ensure = ensurepass(); if(userName&&email&&ensure){ return true; }else{ return false; } } </script> <body> <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a> <br/> <input type="text" /><input type="button" value='查询' onclick='searchStr()'/> <br/> <span id='test'></span> <form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 --> <table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px"> <tr> <td width="25%">姓名:</td> <td> <input type="text" name="userName" id="userName" onblur="checkName()"/> <span id="userId"></span> </td> </tr> <tr> <td >密码:</td><td> <input type="password" name="pwd" id="pwd" onblur="checkPass()"/> <span id="passId"></span> </td> </tr> <tr> <td>确认密码:</td><td> <input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span> </td> </tr> <tr> <td>邮箱</td><td> <input type="text" name="email" id="email" onblur="checkEmail()"/> <span id="emailspan"></span> </td> </tr> <tr> <td>性别</td><td> <input type="radio" checked="ture" name="gender" id="male" value="male"/> 男 <input type="radio" name="gender" value="female"/> 女</td> </tr> <tr> <td>爱好:</td><td> <input type="checkbox" name="like" /> eat <input type="checkbox" name="like" /> sleep <input type="checkbox" name="like"/> play <span id="hobbySpan"></span> </td> </tr> <tr> <td>城市</td><td> <select name="city" id="city"> <option value=""> 请选择</option> <option value="bj"> 北京 </option> <option value="gz"> 广州 </option> <option value="sh"> 上海 </option> </select> </td> </tr> <tr> <td>自我介绍</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td> </tr> <tr align="center"> <td colspan="2"><!--提交按钮--> <input type="submit"/> </td> </tr> </table> </form> </body> </html>
三. prototype：
1.js中的简单练习以及完成查询对应月份的日期、通过prorotype完成字符串翻转，显示系统时间：
<html> <head> <meta charset="gb2312"/> <title>JavaScript Exercise</title> <script> function add(a, b){ with(document){ write("a + b = " + (a+b) + "<br/>"); for(var index in arguments){ write("第" + index + "个元素是：" + arguments[index] + "<br/>"); } } } add(1, 2); function showday(){ var m=[0,31,28,31,30,31,30,31,31,30,31,30,31]; var inputobj = document.getElementById("month"); alert(inputobj.value + "月的天数是：" + m[parseInt(inputobj.value)]);//这里不要parseint也可以，会自动转 } </script> </head> <body> <script> var arr=new Array(17,25,10,18,1,110); arr.reverse(); arr.sort(cmp); arr = arr.join(","); for(var i=0; i <arr.length; i++){ document.write(arr[i]); } function cmp(num1,num2){ return num1-num2; } </script> <script> function Person(id, name){ this.id = id; this.name = name; this.say = function(){ alert(name + "呵呵"); } } var p = new Person(110,"张三"); p.say(); var tool = new ArrayTool(); function ArrayTool(){ this.Max = function(arr){ var max = arr[0]; for(var i = 1; i < arr.length; i++){ if(arr[i] > max){ max = arr[i]; } } return max; } this.searchEle = function(arr, Ele){ for(var i = 0; i < arr.length; i++){ if(arr[i] == Ele) return i; } return -1; } } Max = function(){ var max = this[0]; for(var i = 1; i < this.length; i++){ if(this[i] > max){ max = this[i]; } } return max; } //prototype Array.prototype.getMax = Max; Array.prototype.getindex = function(Ele){ for(var i = 0; i < this.length; i++){ if(this[i] == Ele) return i; } return -1; } var arr = [25,12,110,26,21]; document.write("最大值是：" + tool.Max(arr) + " 26的索引是：" + tool.searchEle(arr,26) + "<br/>"); document.write("哈哈最大值： " + arr.getMax() + " 哈哈12的索引是：" + arr.getindex(12) + "<br/>"); </script> 月份：<input id="month" type="text" /><input type="button" value="查询" onClick="showday()"/> <br/> 当前系统时间：<span id="time"></span> <script src="reverse.js" type="text/javascript"></script> </body> <script> function getCurrentTime(){ var date = new Date(); var timeInfo = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds(); var spanobj = document.getElementById("time"); spanobj.innerHTML = timeInfo.fontcolor("red"); } getCurrentTime(); window.setInterval("getCurrentTime()",1000); </script> </html>
reverse.js:
String.prototype.tocharArray = function(){ var arr = new Array(); for(var i = 0; i < this.length; i++){ arr[i] = this.charAt(i); } return arr; } var str = "你们好屌啊"; var arr = str.tocharArray(); document.write("<br/>转化成字符数组后：" + arr.join(",")); /* for(i in arr){ document.write(arr[i]); } */ String.prototype.reverse = function(){ var arr = this.tocharArray(); arr.reverse(); return arr.join(""); } arr = str.reverse(); document.write("<br/> 翻转后：" + arr);
欢迎访问handsomecui的blog地址：
