并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊. 下面就几个我觉得比较好的例子和大家分享一下。 1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现) 步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分。
--选择省份-- 北京 天津 湖北 山东 河北 --选择城市--
2)页面修饰不需要太多,只要让下拉菜单显示一个就好了
3)通过JavaScript来实现功能,我们要想在第一个下拉列表中选择省份,后面能直接显示他的城市,看到这种一对多对应关系,首先想到map集合这个容器,可是JavaScrip没有map集合,那我们就想到了数组这样一个容器,最后决定用二维数组来帮我我们实现这个功能。
小结:每次一定记得要将数组清空。
2.邮件列表
思想:1)首先想到整体框架,肯定会想到用表格来进行格式化,然后通过操作表格以及行和单元格这些节点来实现相关功能
2)css主要是对表格相关格式化,其次就是选中以及两行显示不一样的效果,通过动态修改className来实现
由于篇幅的关系,html以及css部分代码相对简单,就不献丑了。
3)JavaScript来实现各种不同功能,代码如下:
<script> <BR>var color =""; <BR>function getStyle() <BR>{ <BR>var tableNode =document.getElementsByTagName("table")[0]; <BR>var arr = tableNode.rows; <BR>for(var x = 0;x<arr.length;x++) <BR>{ <BR>if(x%2) <BR>arr[x].className = "one"; <BR>else <BR>arr[x].className = "two"; <BR>var tdNode0 = arr[x].cells[0]; <BR>tdNode0.align = "center"; <BR>arr[x].onmouseover = function() <BR>{ <BR>color = this.className;//将原有的值记录,一遍鼠标走后能回到原来的颜色 <BR>this.className = "checked"; <BR>} <BR>arr[x].onmouseout = function() <BR>{ <BR>this.className = color; <BR>} <BR>} <BR>} <BR>//我们需要全选实现同样的功能,所以我们通过传值来区分是那个节点 <BR>function allCheck(index) <BR>{ <BR>var allNode = document.getElementsByName("all")[index]; <BR>var checkNodes = document.getElementsByName("mail"); <BR>for(var x=0;x<checkNodes.length;x++) <BR>{ <BR>checkNodes[x].checked = allNode.checked; <BR>} <BR>} <BR>function checkBut(num) <BR>{ <BR>var mailNodes = document.getElementsByName("mail"); <BR>for(var x=0; x<mailNodes.length; x++) <BR>{ <BR>if(num>1) <BR>mailNodes[x].checked = !(mailNodes[x].checked);//将自己状态反向赋给自己实现反选功能 <BR>else <BR>mailNodes[x].checked = num; <BR>} <BR>} <BR>function del() <BR>{ <BR>var b = window.confirm("确定要删除所选邮件吗?"); <BR>if(!b) <BR>return ; <BR>var mailNodes = document.getElementsByName("mail"); <BR>var arr = new Array(); <BR>var pos = 0; <BR>for(var x=0; x<mailNodes.length; x++) <BR>{ <BR>if(mailNodes[x].checked) <BR>{ <BR>var trNode = mailNodes[x].parentNode.parentNode; <BR>arr[pos++] = trNode; <BR>} <BR>} <BR>for(var x=0; x<arr.length; x++) <BR>{ <BR>arr[x].parentNode.removeChild(arr[x]); <BR>} <BR>getStyle(); <BR>} <BR>window.onload = getStyle; <BR></script>
Déclaration: Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn