Javascript + Dom知识点总结
Javascript + Dom知识点总结
1.用Javascript声明数组和字典的方式
// 数组声明
var arr = new Array();
arr["0"] = "1";
arr["1"] = "2";
arr["2"] = "3";
arr["3"] = "4";
// 简化的声明方式
var arr1 = [1, 2, 3, 4, 5, 6]; // 普通数组,用中括号隔开
var arr2 = { "hello": 10, "world": 90, "yes": 76 };
alert(arr2["hello"]); // 推荐用这种索引器的方式访问
alert(arr2.hello); // 不推荐
2.Windows对象
window.history.back();
// 阻止打开新的地址事件的发生
window.event.returnValue = false;
3.自动提交表单
<selectonchange="document.getElementById('form1').submit()">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
4.获取所有的标签
var links=document.getElementsByTagName("a");
5.鼠标悬停高亮显示
<!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> <title></title> <script type="text/javascript"> function initEvent() { var tableMain = document.getElementById("tableMain"); var trs = tableMain.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var tr = trs[i]; //tr.onclick = trOnClick; tr.onmouseover = trOnClick; tr.style.cursor = "pointer"; } } function trOnClick() { var tableMain = document.getElementById("tableMain"); var trs = tableMain.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var tr = trs[i]; if (tr == this) {//遍历tr,判断当然tr==点击的tr时,背景色就变为黄色 tr.style.background = "yellow"; } else { tr.style.background = "white"; } } } </script> </head> <body onload="initEvent()"> <table id="tableMain"> <tr><td>爱因斯坦</td><td>100</td></tr> <tr><td>希特勒</td><td>10</td></tr> <tr><td>牛顿</td><td>60</td></tr> <tr><td>居里夫人</td><td>100</td></tr> <tr><td>图灵</td><td>200</td></tr> </table> </body> </html> |
6.功表格隔行高亮显示
<!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> <title>隔行变色</title> <script type="text/javascript"> function showIt() { var tableMain = document.getElementById("tableMain"); var trs = tableMain.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { if (i % 2 == 0) { var tr = trs[i]; tr.style.background = "yellow"; } } } </script> </head> <body onload="showIt()"> <table id="tableMain"> <tr><td>爱因斯坦</td><td>100</td></tr> <tr><td>希特勒</td><td>10</td></tr> <tr><td>牛顿</td><td>60</td></tr> <tr><td>居里夫人</td><td>100</td></tr> <tr><td>图灵</td><td>200</td></tr> </table> <input type="button" value="Click Me" onclick="showIt()" /> </body> </html> |
7.监听Focus事件
<script type="text/javascript"> function initEvent() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //只监听文本框,不监听button if (input.type == "text") { input.onfocus = inputOnFocus;//此处可用匿名函数实现 input.onblur = inputOnBlur; } } } function inputOnFocus() { this.style.background = "yellow"; } function inputOnBlur() { this.style.background = "white"; } </script> |
8.开关灯效果
<style type="text/css"> .day { background-color:White; } .night { background-color:Black; } </style> <script type="text/javascript"> function switchLight() { var btnSwitch = document.getElementById("btnSwitch"); if (document.body.className == "day") { document.body.className = "night"; btnSwitch.value = "开灯"; } else { document.body.className = "day"; btnSwitch.value = "关灯"; } } </script> |
9.文本框onblur事件
<script type="text/javascript"> function initEvent() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onblur = inputOnBlur; //设置inputOnBlur函数为input标签的onblur事件的响应函数 } } function inputOnBlur() {//inputOnBlur是onblur的响应函数,而不是被响应函数调用的函数,所以可以用this来取得发生事件的控件对象 if(this.value.length<=0){ this.style.background = "red"; } else{ this.style.background = "white"; } } </script> |
10.实现Div的隐藏与展示
<a href="http://www.baidu.com"onmouseout="document.getElementById('tipsDiv').style.display='none'" |
11.同上,切换Div的显示
<htm> <head> <title>切换div</title> <scripttype="text/javascript"> function toggleDiv(cb) { var div1 = document.getElementById("div1"); if (cb.checked) { //如果勾上了check div1.style.display = '';//清空表示去掉div的none属性 } else { div1.style.display = "none";//没选中,隐藏div } } </script> </head> <body> <inputtype="checkbox"id="cbShow"onclick="toggleDiv(this)"/><labelfor="cbShow">显示高级选项</label> <divid="div1"style="display:none;">这里是一些高级选项值 百度是<fontcolor="red">李彦宏</font>创建的一个中文搜索引擎,网址是<ahref="http://www.baidu.com/">百度</a>baidu.com<br/> <imgalt="Baidu"src="../mm/00_09.jpg"/><br/> </div> </body> </html> |
12.动态创建层Div
<html> <head> <title></title> <styletype="text/css"> .tooltips { background-color:Yellow; border-style:solid; border-width:1px; border-color:Red; } </style> <scripttype="text/javascript"> function initEvent() { var links = document.getElementsByTagName("a"); //遍历所有的a for (var i = 0; i < links.length; i++) { var link = links[i]; link.onmousemove = linkOnMouseOver; link.onmouseout = linkOnMouseOut; } } function linkOnMouseOver() { var div = document.createElement("div");//动态创建层 div.style.position = "absolute"; //设置div属性 div.className = "tooltips"; div.style.top = window.event.clientY; div.style.left = window.event.clientX; div.innerHTML = "abcdefghijkjl<font color='red'>111222333</font>"; document.body.appendChild(div); //createElement只是创建了一个内存模型,只有appendChild到一个可视元素上才会被显示出来 } function linkOnMouseOut() { var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var div = divs[i]; if (div.className == "tooltips") { //document.body.removeChild(div); div.style.display = "none";//隐藏的层会造成内存泄露 } } } </script> </head> <bodyonload="initEvent()"> <ahref="#"title="新浪网">新浪网</a><br/><br/><br/> <ahref="#"title="百度网">百度网</a><br/><br/><br/> <ahref="#"title="搜狐网">搜狐网</a><br/><br/><br/> </body> </html> |
13.加法计算器
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>加法计算器</title> <scripttype="text/javascript"> function calcClick() { var value1 = document.getElementById("txt1").value; var value2 = document.getElementById("txt2").value; value1 = parseInt(value1, 10); value2 = parseInt(value2, 10); document.getElementById("txtResult").value = value1 + value2; } </script> </head> <body> <inputtype="text"id="txt1"/> + <inputtype="text"id="txt2"/> <inputtype="button"value=" = "onclick="calcClick()"/> <inputtype="text"id="txtResult"readonly="readonly"/> </body> </html> |
14.点谁谁呜呜
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>getElementsByTagName点谁谁哭!</title> <scripttype="text/javascript"> function initEvent() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onclick = btnClick;// 注意,不加括号,表示动态添加事件给onclick事件 } } function btnClick() { var inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; //window.event.srcElement, 取得引发事件的控件 if (input == window.event.srcElement) { input.value = "呜呜"; } else { input.value = "哈哈"; } } } </script> </head> <bodyonload="initEvent()"> <inputtype="button"value="哈哈"/> <inputtype="button"value="哈哈"/> <inputtype="button"value="哈哈"/> <inputtype="button"value="哈哈"/> <inputtype="button"value="哈哈"/> </body> </html> |
15.美女时钟
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>自制美女时钟</title> <scripttype="text/javascript"> function switchLight() { var btnSwitch = document.getElementById("btnSwitch"); if (document.body.className == "day") { document.body.className = "night"; btnSwitch.value = "开灯"; } else { document.body.className = "day"; btnSwitch.value = "关灯"; } } function fill2Len(i) { // 填充描述为2位 if (i < 10) { return"0" + i; } else { return i; } } function Refresh() { var imgMM = document.getElementById("imgMM"); if (!imgMM) {//未加载 return; } // 利用小时_秒来拼接图片的文件名 var now = new Date(); var filename = fill2Len(now.getHours()) + "_" + fill2Len(now.getSeconds()) + ".jpg"; imgMM.src = "../mm/" + filename; } setInterval("Refresh()", 1000); </script> <styletype="text/css"> #imgMM { margin-left:300px; margin-top:100px; } body { background:black; } .day { background-color:White; } .night { background-color:Black; } </style> </head> <bodyonload="Refresh()"class="night"> <inputtype="button"id="btnSwitch"value="开灯"onclick="switchLight()"/> <imgid="imgMM"src=""alt="每一秒都有一位美女告诉你现在是几点"/> </body> </html> |
16.强制阅读注册页面
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>注册</title> <scripttype="text/javascript"> var leftSeconds = 10;// 全局变量 function countDown() { var btnReg = document.getElementById("btnReg"); var intervalID; if (btnReg) { //如果控件可用,进行下面的操作。必须添加判断,如果网速非常慢的话,可能定时器运行的时候,控件还没有加载。 if (leftSeconds <= 0) { btnReg.value = "同意"; btnReg.disabled = ""; //btn可用| btnReg.disabled = false; clearInterval(intervalID);// 停止计时器 } else { btnReg.value = "请仔细阅读注册协议(还剩" + leftSeconds + "秒!)"; leftSeconds--; } } } intervalID = setInterval("countDown()", 1000); </script> </head> <body> <textarearows="*"cols="30"></textarea> <inputtype="button"value="同意"id="btnReg"disabled="disabled"/> </body> </html> |
17.动态创建元素
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>createLink</title> <scripttype="text/javascript"> function createLink() { var divMain = document.getElementById("divMain"); var link = document.createElement("a"); link.href = "http://www.baidu.com"; link.innerText = "百度"; // 不是value divMain.appendChild(link); var link = document.createElement("<a href='http://www.163.com'>163</a>"); link.innerHTML = "163"; document.body.appendChild(link); var label = document.createElement("label"); label.setAttribute("for", "username"); //设置Dom元素的特殊属性,label for 等,还可以设置自定义HTML属性,虽然没用,但是可以 label.setAttribute("xuehao","123456"); label.innerHTML = "userName"; document.body.appendChild(label); } </script> </head> <body> <divid="divMain"></div> <inputtype="button"value="Create"onclick="createLink()"/> <inputtype="text"id="username"/> </body> </html> |
18.动态添加一个input
<scripttype="text/javascript"> function createInput() { var divMain = document.getElementById("divMain"); divMain.innerHTML = "<input type='button' value='我是新来的' />"; } </script> |
19.动态创建button
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>动态创建Dom</title> <scripttype="text/javascript"> function btnClick() { var divMain = document.getElementById("divMain"); var input = document.createElement("input"); // 创建一个标签名然后设置标签的属性 //var input = document.createElement("<input type='button' value='Hello' />"); //根据HTML代码创建元素,省的一个一个的属性赋值,比较粗犷的方式 input.type = "button"; input.value = "我是动态创建的按钮"; divMain.appendChild(input);// 添加到div中 } </script> </head> <body> <divid="divMain"></div> <inputtype="button"value="Click Me"onclick="btnClick()"/> </body> </html> |
20.动态创建Table
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>动态创建表格</title> <scripttype="text/javascript"> function loadKey() { var data = { "百度": "http://www.baidu.com", "163": "http://www.163.com", "腾讯": "http://www.qq.com", "博客园": "http://www.cnblogs.com" }; var tableLinks = document.getElementById("tableLinks"); // 遍历dictory ,取出数据 for (var key in data) { var value = data[key]; //通过key取value,key是前面的,value是后面的 /*var tr = tableLinks.insertRow(-1); //FF必须要-1这个参数 var td1 = tr.insertCell(-1); td1.innerText = key; var td2 = tr.insertCell(-1); td2.innerHTML = "<a href='" + value + "'>" + key + "</a>";*/ var tr = document.createElement("tr"); var td1 = document.createElement("td"); //td1.innerText = key;// FF不支持innerText td1.innerHTML = key; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + value + "'>" + key + "</a>"; tr.appendChild(td2); tableLinks.tBodies[0].appendChild(tr); } } function loadValue() { var data = { "百度": "http://www.baidu.com", "163": "http://www.163.com", "腾讯": "http://www.qq.com", "博客园": "http://www.cnblogs.com" }; var tableLinks2 = document.getElementById("tableLinks2"); for (var key in data) { var value = data[key]; // value is the name of site var tr = tableLinks2.insertRow(-1); var td1 = tr.insertCell(-1); // -1表示插入单元格的位置,-1表示最后 td1.innerHTML = key; //FF does not surport innerText!!! var td2 = tr.insertCell(-1); td2.innerHTML = "<a href='" + value + "'>"+ value +"</a>";//也可以用createElement做 } } </script> </head> <body> <tableid="tableLinks"><tbody></tbody></table> <tableid="tableLinks2"></table> <inputtype="button"value="加载数据"onclick="loadKey()"/> <inputtype="button"value="加载数据2"onclick="loadValue()"/> </body> </html> |
21.无刷新评论
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论</title> <scripttype="text/javascript"> function addComment() { var nickname = document.getElementById("nickname").value; var comment = document.getElementById("comment").value; //alert(nickname); alert(comment); var tableComment = document.getElementById("tableComment"); var tr = document.createElement("tr");//创建tr var tdNickName = document.createElement("td"); tdNickName.innerText = nickname; tr.appendChild(tdNickName); //把tdNickName附加到tr上 var tdComment = document.createElement("td"); tdComment.innerText = comment; tr.appendChild(tdComment); tableComment.tBodies[0].appendChild(tr); } </script> </head> <body> 1.我一直觉的没有目的,没有归期的旅行才是最率性的旅行。跟着自己的心走, 美名曰一个人独自私奔。就这样一直走。跟着自己的心走,走遍千山万水,或许才是旅行的意义。<br/><br/> 2.有天苏东坡和佛印辩论。他问佛印:"你看我像什么?"佛印回:"像佛"。苏东坡又说:"你知道你在我眼中像什么?你看起来像堆牛粪!" 佛印笑而不答。苏东坡很是得意,回家告诉苏小妹:"今天我终于辩赢佛印。" 苏小妹听完后说:"佛印因为心中有佛,所以他看你像佛。你心中有牛粪,所以看别人像牛粪! <p>评论区</p> <tableid="tableComment"> <tbody> <tr><td>老虎:</td><td>Yes.沙发!!!</td></tr> </tbody> </table> <p></p> 昵称:<inputtype="text"id="nickname"/><br/> <textareacols="*"rows="*"id="comment"></textarea><br/> <inputtype="button"value="我要评论"onclick="addComment()"/> </body> </html> |
22.走马灯效果MarqueeDemo
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>终于完成了一个跑马灯效果啊</title> <scripttype="text/javascript"> function scrollLeft() { var title = document.title; //第一个字符 var firstChar = title.charAt(0); //剩下的字符 var leftChar = title.substring(1, title.length); document.title = leftChar + firstChar; } function scrollRight() { var title1 = document.title; //最后一个字符 var lastChar = title1.charAt(title1.length - 1); //剩下的字符 var leftChar = title1.substring(0, title1.length - 1); document.title = lastChar + leftChar; } </script> </head> <body> <inputtype="button"value="向左滚动"onclick="timeID=setInterval('scrollLeft()', 500)"/> <inputtype="button"value="向右滚动"onclick="timeID=setInterval('scrollRight()', 500)"/> <inputtype="button"value="Stop"onclick="clearInterval(timeID)"/> </body> </html> |
23.复制到粘贴板(仅IE有效)
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>UrlToClipBoard</title> <scripttype="text/javascript"> function urlToClipboard() { clipboardData.setData("Text", "我发现了一个好玩网页,很黄很暴力!你懂得!" + location.href); alert("已经将网址复制到剪贴板中!Ctrl+V分享给好友吧!"); } </script> </head> <body> <inputtype="button"value="分享此文章给好友"onclick="urlToClipboard()"/> </body> </html> |
24.单位取值、设值
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>单位问题</title> <scripttype="text/javascript"> function incWidth() { var oldWidth = document.getElementById("div1").style.width; oldWidth = parseInt(oldWidth, 10); //将字符串转化为数字 oldWidth += 50;//每次增加50个px oldWidth = oldWidth + "px";//把数字拼接成字符串 document.getElementById("div1").style.width = oldWidth; } </script> </head> <body> <inputtype="button"value="单位1"style="width:50%;"/> <divid="div1"style="width:50px; height:50px; border-style:solid; border-width:1px; border-color:Red;"> We respect your privacy and send this welcome e-mail only to our valued members. If you have not registered with mail.com, please ignore this e-mail. Now enter the world of mail.com where e-mailing is easier and more fun than ever. Take advantage of our many smart and convenient features - all free of charge! Because at mail.com, it's all about YOU! </div> <inputtype="button"value="取值"onclick="alert(document.getElementById('div1').style.width)"/> <inputtype="button"value="设值"onclick="document.getElementById('div1').style.width='100px'"/> <inputtype="button"value="自动加宽50px"onclick="incWidth()"/> </body> </html> |
25.模拟登陆—弹出登陆对话框
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>模拟登陆</title> <scripttype="text/javascript"> function showLogin() { var loginDiv = document.getElementById("loginDiv"); loginDiv.style.display = ''; } function hideLogin() { var loginDiv = document.getElementById("loginDiv"); loginDiv.style.display = 'none'; var imgClose = document.getElementById("imgClose"); imgClose.style.cursor = "pointer"; } </script> </head> <body> <ahref="javascript:showLogin()">登陆</a> <divid="loginDiv"style="position:absolute; top:200px; left:200px; border-style:solid; border-color:Blue; border-width:thin; display:none; width:400px;"> <imgonclick="hideLogin()"id="imgClose"alt=""src="http://hiphotos.baidu.com/fanyong511/abpic/item/7ca4760d46cacfb87acbe151.jpg"style="float:right;"/> <table> <tr><td><labelfor="username">用户名:</label></td><td><inputtype="text"id="username"/></td></tr> <tr><td><labelfor="password">密码:</label></td><td><inputtype="password"id="password"/></td></tr> </table> </div> </body> </html> |
26.复制文章自动添加出处(仅IE有效)
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>剪贴板处理Demo</title> <scripttype="text/javascript"> function modifyClipboard() { //首先取粘贴板中内容 var txt = clipboardData.getData("Text"); //接着修改剪贴板中内容,附加上版权声明 txt = txt + "。本文章来自于樊勇的博客。转载请注明出处:" + location.href; //最后将内容设置会粘贴板中。 clipboardData.setData('Text',txt); } </script> </head> <body οncοpy="setTimeout('modifyClipboard()',100)"> 某人上课睡觉,老师怒了,就叫他到黑板上解题,准备当众羞辱他。才站起来,老师就开始酸他:"成绩那么差,还敢上课睡觉, 不知羞耻,就会睡觉..."结果某人漂亮的把题解出来了。老师顿时有点下不来台。 结果他自己走回座位,坐下淡淡的说:"我先睡一下,你待会还有不会的再问我。。。"太特么潇洒了! </body> </html> |
27.动态放大层
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>动态放大层</title> <styletype="text/css"> #div1 { background-color:Yellow; border:1px solid Red; } </style> <scripttype="text/javascript"> var showIntervalID; function showDiv() { showIntervalID = setInterval("incDiv()", 100); } function incDiv() { var div1 = document.getElementById("div1"); var oldWidth = div1.style.width; //转化为10进制的数字 oldWidth = parseInt(oldWidth, 10); var oldHeight = div1.style.height; oldHeight = parseInt(oldHeight, 10); if (oldHeight >= 240) { //停止计时器 clearInterval(showIntervalID); } oldWidth += 10; oldHeight += 10; div1.style.width = oldWidth + "px"; div1.style.height = oldHeight + "px"; } </script> </head> <body> <divid="div1"style="width:20px;height:100px;"> 冷笑话精选(@lengxiaohua) 一个大腹便便的中年男人对着起步的公交车猛喊,"师傅,师傅,等等我,等等我啊!"突然, 公交车一个人把头申出窗外喊到"悟空,别追了,回花果山去吧!" http://t1.qpic.cn/ http://t.qq.com/p/ </div> <inputtype="button"value="动态放大"onclick="showDiv()"/> </body> </html> |
28.美女时钟—每一秒都有一位美女告诉你时间
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>美女时钟</title> <scripttype="text/javascript"> function switchLight() { var btnSwitch = document.getElementById("btnSwitch"); if (document.body.className == "day") { document.body.className = "night"; btnSwitch.value = "开灯"; } else { document.body.className = "day"; btnSwitch.value = "关灯"; } } function fill2Len(i) { // 填充描述为2位,即小时 if (i < 10) { return"0" + i; } else { return i; } } function Refresh() { var imgMM = document.getElementById("imgMM"); if (!imgMM) {//未加载 return; } // 利用小时_秒来拼接图片的文件名,因为文件的格式为10_45.jpg var now = new Date(); // 为测试方便,按秒来计算,实际运用中可替换为分钟 var filename = fill2Len(now.getHours()) + "_" + fill2Len(now.getSeconds()) + ".jpg"; imgMM.src = "../mm/" + filename; } //每个1秒刷新一次 setInterval("Refresh()", 1000); </script> <styletype="text/css"> #imgMM { margin-left:auto; margin-right:auto; } body { background:black; width:100%; margin: 20 auto; } .day { background-color:White; } .night { background-color:Black; } </style> </head> <bodyonload="Refresh()"class="night"> <inputtype="button"id="btnSwitch"value="开灯"onclick="switchLight()"/> <imgid="imgMM"src=""alt="每一秒都有一位美女告诉你现在是几点"/> </body> </html> |
29.数据展示—隔行高亮显示
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>球队选择</title> <scripttype="text/javascript"> function initEvent() { var football = document.getElementById("football"); var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.onmouseover = function () { var football = document.getElementById("football"); var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { var li = lis[i]; li.style.cursor = "pointer"; if (li == this) { li.style.background = "Yellow"; } else { li.style.background = "White"; } } }; li.onclick = function () { var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { var li = lis[i]; if (li == this) { li.style.fontSize = 30; } else { li.style.fontSize = 16; } } }; } } </script> </head> <bodyonload="initEvent()"> <ulid="football"> <li>曼联</li> <li>国足</li> <li>朝鲜队</li> <li>韩国队</li> <li>日本鬼子</li> </ul> </body> </html> |
30.歌曲选择
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>歌曲选择</title> <scripttype="text/javascript"> //全选 function selectAll() { var playlist = document.getElementById("playlist"); var inputs = playlist.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == "checkbox") { //只处理checkbox input.checked = "checked";//全选 } } } //全不选 function selectNone() { var playlist = document.getElementById("playlist"); var inputs = playlist.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == "checkbox") { //只处理checkbox input.checked = "";//全不选 } } } //反选 function reverseSelect() { var playlist = document.getElementById("playlist"); var inputs = playlist.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == "checkbox") { //只处理checkbox //if (input.checked == "checked") {//以为被选中就是"checked",但是很不幸,经调试发现是true if (input.checked == true) { input.checked = ""; } else { input.checked = "checked"; } } } } </script> </head> <body> <divid="playlist"> <inputtype="checkbox"id="p1"/><labelfor="p1">【梦中的额吉】</label> <inputtype="checkbox"id="p2"/><labelfor="p2">【加勒比海盗】</label> <inputtype="checkbox"id="p3"/><labelfor="p3">【幸福恋人】</label> <p> <inputtype="button"value="全选"onclick="selectAll()"/> <inputtype="button"value="全不选"onclick="selectNone()"/> <inputtype="button"value="反选"onclick="reverseSelect()"/> </p> </div> </body> </html> |
31.权限选择
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>权限选择</title> <scripttype="text/javascript"> //移动单个元素 function moveSelected(selectSrc, selectDest) { //源,目的地 //for (var i = 0; i < selectSrc.childNodes.length; i++) { //注意删除的顺序,如果是从前往后会引起bug,必须从后往前删 for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) { var option = selectSrc.childNodes[i]; if (option.selected == true) { selectSrc.removeChild(option);//从src中移除元素 option.selected = false; selectDest.appendChild(option);//在dest中加入元素 } } } //移动所有元素 function moveAll(selectSrc, selectDest) { for (var i = selectSrc.childNodes.length - 1; i >= 0; i--) { var option = selectSrc.childNodes[i]; selectSrc.removeChild(option); selectDest.appendChild(option); } } </script> </head> <body> <selectid="select1"style="float:left; width:100px; height:120px;"multiple="multiple"> <option>添加</option> <option>删除</option> <option>修改</option> <option>查询</option> <option>打印</option> </select> <divstyle="float:left; width:5%;"> <inputtype="button"value=">"style="float:left; width:100%;"onclick="moveSelected(document.getElementById('select1'), document.getElementById('select2'))"/> <inputtype="button"value="<"style="float:left; width:100%;"onclick="moveSelected(document.getElementById('select2'), document.getElementById('select1'))"/> <inputtype="button"value=">>"style="float:left; width:100%;"onclick="moveAll(document.getElementById('select1'), document.getElementById('select2'))"/> <inputtype="button"value="<<"style="float:left; width:100%;"onclick="moveAll(document.getElementById('select2'), document.getElementById('select1'))"/> </div> <selectid="select2"style="float:left; width:100px; height:120px;"multiple="multiple"></select> </body> </html> |
32.省份选择—级联选择
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>省市选择</title> <scripttype="text/javascript"> //模拟后台传过来的数据 var data = { "山东": ["济南", "青岛", "烟台"], "河南": ["洛阳", "郑州", "安阳"], "河北": ["邯郸", "保定", "石家庄"], "北京": ["朝阳区", "新城区", "西城区"], "上海": ["浦东区", "徐汇区", "闵行区"] }; //页面开始时加载省份数据 function loadProv() { var prov = document.getElementById("prov"); for (var key in data) { var option = document.createElement("option"); option.value = key; option.innerText = key; prov.appendChild(option); } } //切换省份加载城市名 function provChange() { var prov = document.getElementById("prov"); var city = document.getElementById("city"); //首先清除旧内容--市列表 //city.options.length = 0;//这样可以 /*从前往后删,option元素会自动排序,删除不干净,有漏网之鱼! for (var i = 0; i < city.childNodes.length; i++) {//遍历select所有子节点 var option = city.childNodes[i]; city.removeChild(option); } */ //首先清除旧内容--市列表 //city.options.length = 0;//这样可以 //从后往前删 for (var i = city.childNodes.length - 1; i >= 0; i--) {//遍历select所有子节点 var option = city.childNodes[i]; city.removeChild(option); } //添加新的内容--城市名 var provName = prov.value; if (provName == "none") { return;//不添加 } var cities = data[provName]; //根据省份名字取出城市名字,如["济南", "青岛", "烟台"] for (var i = 0; i < cities.length; i++) { var option = document.createElement("option"); //创建city的option option.value = cities[i]; option.innerText = cities[i]; city.appendChild(option); } } </script> </head> <bodyonload="loadProv()"> <selectid="prov"onchange="provChange()"style="margin-right:30px;"> <optionvalue="none">请选择省</option> </select> <selectid="city"></select> </body> </html> |
33.微软风格搜索框
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>微软风格搜索框</title> <scripttype="text/javascript"> function inputBlur(keyword) { if (keyword.value.length <= 0) { keyword.value = '输入搜索关键词'; keyword.style.color = 'Gray'; } } function inputFocus(keyword) { //var keyword = document.getElementById("keyword"); if (keyword.value == '输入搜索关键词') { keyword.value = ''; keyword.style.color = 'Black'; } } </script> </head> <body> <inputtype="text"id="keyword"value="输入搜索关键词"style="color:Gray;"onblur="inputBlur(this)"onfocus="inputFocus(this)"/> <inputtype="button"value="搜索一下"/> </body> </html> |
34.评分控件
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>评分控件</title> <scripttype="text/javascript"> function initEvent() { var rating = document.getElementById("rating"); var tds = document.getElementsByTagName("td"); for (var i = 0; i < tds.length; i++) { var td = tds[i]; td.style.cursor = "pointer"; td.onmouseover = function () { var rating = document.getElementById("rating"); var tds = document.getElementsByTagName("td"); var index = indexOf(tds, this); //点击的加上之前的td变成黑色的 for (var i = 0; i <= index; i++) { tds[i].innerHTML = "★"; } //点击的td之后的td都设置成白色的 for (var i = index + 1; i < tds.length; i++){ tds[i].innerHTML = "☆"; } }; } } //返回一个元素在数组中的顺序 function indexOf(arr,element) { for (var i = 0; i < arr.length; i++) { if (arr[i] == element) { return i;//返回相同元素的序号 } } return -1; } </script> </head> <bodyonload="initEvent()"> <tableid="rating"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table> </body> </html> |
35.点击小图显示详细信息V1
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scripttype="text/javascript"> function showDetails() { var details = document.getElementById("details"); details.style.display = ''; details.style.left = window.event.clientX; details.style.top = window.event.clientY; } function hideDetails() { var details = document.getElementById("details"); details.style.display = 'none'; } </script> </head> <body> <imgalt=""src="http://hiphotos.baidu.com/fanyong511/pic/item/8a80199621421a7a7af48051.jpg"onmouseover="showDetails()"onmouseout="hideDetails()"/> <divid="details"style="position:absolute; display:none;"> <imgalt=""src="http://hiphotos.baidu.com/fanyong511/pic/item/97768601a08bbc7d4afb5144.jpg"/> <p>身高:180cm</p> <p>姓名:小甜甜</p> </div> </body> </html> |
36.点击小图显示详细信息V2
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <scripttype="text/javascript"> //模拟后台传来的数据 var data = { "http://hiphotos.baidu.com/fanyong511/pic/item/8a80199621421a7a7af48051.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/97768601a08bbc7d4afb5144.jpg", "小甜甜", "180cm"], "http://hiphotos.baidu.com/fanyong511/pic/item/87a166d3c03a89fda1ec9c51.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/1655532f23e6b19e8b139951.jpg", "布兰妮", "175cm"], "http://hiphotos.baidu.com/fanyong511/pic/item/a79069210c7338d64723e851.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/c2115ded03544d89b3fb9551.jpg", "黑妞", "165cm"] }; //载入图片 function loadImg() { for (var smallImgPath in data) { var smallImg = document.createElement("img"); smallImg.src = smallImgPath; smallImg.setAttribute("a1", data[smallImgPath][0]); smallImg.setAttribute("a2", data[smallImgPath][1]); smallImg.setAttribute("a3", data[smallImgPath][2]); smallImg.onmouseover = function () { var smallImgSrc = this.src; var detailsData = data[smallImgSrc]; //smallImgSrc是key document.getElementById("detailsImg").src = this.getAttribute("a1"); document.getElementById("detailsName").innerHTML = "身高:" + this.getAttribute("a2"); document.getElementById("detailsHeight").innerHTML = "姓名:" + this.getAttribute("a3"); //document.getElementById("detailsImg").src = data[0]; //赋值 //document.getElementById("detailsName").innerHTML = data[1]; //赋值 //document.getElementById("detailsHeight").innerHTML = data[2]; //赋值 //显示隐藏的层 var details = document.getElementById("details"); details.style.display = ''; details.style.left = window.event.clientX; details.style.top = window.event.clientY; }; document.body.appendChild(smallImg); } } //隐藏详细信息 function hideDetails() { var details = document.getElementById("details"); details.style.display = 'none'; } </script> </head> <bodyonload="loadImg()"> <divid="details"style="position:absolute; display:none;"> <imgalt=""id="detailsImg"src=""/> <pid="detailsHeight"></p> <pid="detailsName"></p> <p><inputtype="button"value="关闭"onclick="hideDetails()"/></p> </div> </body> </html> |
Javascript + Dom知识点总结相关推荐
- JavaScript的DOM知识点总结
目录 1.DOM重点核心 2.DOM事件流 3.DOM知识点总结 4.常见案例 视频资料,pink老师讲的超级详细,JavaScript的DOM操作:黑马程序员JavaScript核心教程,前端基础教 ...
- 重读《JavaScript DOM编程艺术》(第一版)
今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序 ...
- JavaScript笔试知识点整理
JavaScript笔试知识点整理 2018.09.28 2018.09.29 2018.09.30 定义函数 在Javascript定义一个函数f有三种方式:第1种最常用,后两种都是把一个匿名函数复 ...
- JavaScript DOM编程艺术(第二版)
JavaScript DOM编程艺术简要介绍 第二章: JavaScript语法 语法 语句 注释 变量 数据类型 数组 对象 操作 条件语句 比较操作符 逻辑操作符 循环语句 while循环 for ...
- 传智播客--JavaScript DOM加强(佟刚)
上了一天的课,很累,不过真的很充实.比自己学的效率要高很多,对技术的理解也提高了不少.对自己又充满了信心,感觉自己两个半月后一定能找到一个五千块 以上的工作.哈哈!今天是佟刚老师讲的 JavaScri ...
- 《web开发: JavaScript DOM获取元素》
一.JavaScript DOM获取元素 1. 如何获取页面元素 DOM在我们实际开发中主要用来操作元素 获取页面中的元素可以使用以下几种方式: (下面的方法都是Web APIs) 根据 ID 获 ...
- JavaScript DOM 编程艺术 (第二版)学习之3-4章
JavaScript DOM 编程艺术 (第二版)学习之3-4章 第三章 DOM 3.1 文档:DOM中的"D" 3.2 对象:DOM中的"O" 3.3 模型: ...
- 普歌:DOM知识点大盘点(一)
DOM知识点大盘点(一) DOM 事件基础 DOM 事件基础 1.概述: JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行Jav ...
- javaScript常用知识点有哪些
javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
最新文章
- python邮件发送哪个好_最全总结!聊聊 Python 发送邮件的几种方式
- H264码流打包分析
- selenium-webdriver for node 鼠标滑动到指定元素
- 简单计算器 (关于栈的一种应用)
- arcengine 图层中节点抽稀功能(c++)
- breadcrumb 根据路由_简单的vue-router面包屑转化
- 很好用的返回顶部代码
- VMware5.5的序列号
- hibernate的注解属性mappedBy详解
- V831——AprilTag标签识别
- openwrt 认证收费_openwrt,wifi认证-nodogsplash
- 蓝桥杯刷题冲刺 | 倒计时28天
- 电脑进入BIOS界面快捷键是什么
- Vue3.0 + Echarts 实现地区人口数量分布展示
- 制作查询数据窗口php,pb 检索数据窗口做条件查询 | 学步园
- 爱的诠释,你懂的!我们都懂的!
- 一位新作者加盟——Gzeasy创始人陈寅初
- 数据库元数据稽核实践(一)
- 生产环境下nginx代理跨域解决
- 测试支持硬件的软件,硬件检测工具AIDA64 v5.97版发布:支持Win10春季创意者更新...
热门文章
- Python a[i:j]详解
- upc-Gold Mine(dp)
- coarse-to-fine(5) Top-k Hierarchical Classification
- 通过新浪云部署Node.js微信小程序商城(不用买域名、不用备案、不用配置https)...
- @@程序员——看完源码记不住?掌握这套方法,Alibaba不会少你一个工位,年薪60w+小菜一碟!
- 携转待生效用户是什么_携号转网是什么意思
- 社交电商系统开发核心功能
- Flex Cairngorm简介
- 你见过哪些让你相见恨晚的神器网站?
- vr虚拟现实制作软件可以用来制作什么?