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 相关文章推荐
JS 自动安装exe程序
Nov 30 Javascript
js仿百度有啊通栏展示效果实现代码
May 28 Javascript
js中小数转换整数的方法
Jan 26 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
学习Angularjs分页指令
Jul 01 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
js实现有趣的倒计时效果
Jan 19 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防攻击代码升级版
2010/12/29 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
js实现打字小游戏
2019/12/17 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
[49:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 KG VS TNC
2018/03/31 DOTA
python的urllib模块显示下载进度示例
2014/01/17 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
J2EE包括哪些技术
2016/11/25 面试题
和睦家庭事迹
2014/05/14 职场文书
化妆品活动策划方案
2014/05/23 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers