javascript DOM编程实例(智播客学习)


Posted in Javascript onNovember 23, 2009

并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.
下面就几个我觉得比较好的例子和大家分享一下。
1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现)
步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分。

<xmp> 
<select id="province" onchange="selCity()"> 
<option >--选择省份--</option> 
<option >北京</option> 
<option >天津</option> 
<option >湖北</option> 
<option >山东</option> 
<option >河北</option> 
</select> 
<select id="city"> 
<option>--选择城市--</option> 
</select> 
</xmp>

2)页面修饰不需要太多,只要让下拉菜单显示一个就好了
3)通过JavaScript来实现功能,我们要想在第一个下拉列表中选择省份,后面能直接显示他的城市,看到这种一对多对应关系,首先想到map集合这个容器,可是JavaScrip没有map集合,那我们就想到了数组这样一个容器,最后决定用二维数组来帮我我们实现这个功能。
<script type="text/javascript"> 
function selCity() 
{ 
var arr= [["--选择城市--"],["海淀区","朝阳区","东城区","西城区","宣武区"], 
["和平区","河北区","河东区","河西区","南开区"], 
["武汉","宜昌","孝感","襄樊","荆州"], 
["济南","青岛","烟台","威海","日照"], 
["石家庄","保定","张家口","廊坊","邯郸"]]; 
var selpNode = document.getElementById("province"); 
var selcNode = document.getElementById("city"); 
var citys = arr[selpNode.selectedIndex]; 
selcNode.options.length = 0; 
for(var x=0; x<citys.length; x++) 
{ 
var optNode = document.createElement("option"); 
optNode.innerText = citys[x]; 
selcNode.appendChild(optNode); 
} 
} 
</script>

小结:每次一定记得要将数组清空。
2.邮件列表
思想:1)首先想到整体框架,肯定会想到用表格来进行格式化,然后通过操作表格以及行和单元格这些节点来实现相关功能
2)css主要是对表格相关格式化,其次就是选中以及两行显示不一样的效果,通过动态修改className来实现
由于篇幅的关系,html以及css部分代码相对简单,就不献丑了。
3)JavaScript来实现各种不同功能,代码如下:
<script> 
var color =""; 
function getStyle() 
{ 
var tableNode =document.getElementsByTagName("table")[0]; 
var arr = tableNode.rows; 
for(var x = 0;x<arr.length;x++) 
{ 
if(x%2) 
arr[x].className = "one"; 
else 
arr[x].className = "two"; 
var tdNode0 = arr[x].cells[0]; 
tdNode0.align = "center"; 
arr[x].onmouseover = function() 
{ 
color = this.className;//将原有的值记录,一遍鼠标走后能回到原来的颜色 
this.className = "checked"; 
} 
arr[x].onmouseout = function() 
{ 
this.className = color; 
} 
} 
} 
//我们需要全选实现同样的功能,所以我们通过传值来区分是那个节点 
function allCheck(index) 
{ 
var allNode = document.getElementsByName("all")[index]; 
var checkNodes = document.getElementsByName("mail"); 
for(var x=0;x<checkNodes.length;x++) 
{ 
checkNodes[x].checked = allNode.checked; 
} 
} 
function checkBut(num) 
{ 
var mailNodes = document.getElementsByName("mail"); 
for(var x=0; x<mailNodes.length; x++) 
{ 
if(num>1) 
mailNodes[x].checked = !(mailNodes[x].checked);//将自己状态反向赋给自己实现反选功能 
else 
mailNodes[x].checked = num; 
} 
} 
function del() 
{ 
var b = window.confirm("确定要删除所选邮件吗?"); 
if(!b) 
return ; 
var mailNodes = document.getElementsByName("mail"); 
var arr = new Array(); 
var pos = 0; 
for(var x=0; x<mailNodes.length; x++) 
{ 
if(mailNodes[x].checked) 
{ 
var trNode = mailNodes[x].parentNode.parentNode; 
arr[pos++] = trNode; 
} 
} 
for(var x=0; x<arr.length; x++) 
{ 
arr[x].parentNode.removeChild(arr[x]); 
} 
getStyle(); 
} 
window.onload = getStyle; 
</script>
Javascript 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
Javascript 面向对象 重载
May 13 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 Javascript
传智播客学习之java 反射
Nov 22 #Javascript
Javascript 刷新全集常用代码
Nov 22 #Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 #Javascript
COM中获取JavaScript数组大小的代码
Nov 22 #Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 #Javascript
javascript 设置文本框中焦点的位置
Nov 20 #Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 #Javascript
You might like
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
php实现文件上传基本验证
2020/03/04 PHP
JS继承 笔记
2011/07/13 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python语言编写电脑时间自动同步小工具
2013/03/08 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
python3.8动态人脸识别的实现示例
2020/09/21 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
大学生求职自荐信
2013/12/12 职场文书
自考生自我评价分享
2014/01/18 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
公司股东出资证明书
2014/11/01 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
python可视化大屏库big_screen示例详解
2021/11/23 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python