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 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
微信小程序实现点赞业务
Feb 10 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 启动时报错的简单解决方法
2014/01/27 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
基于jquery的tab切换 js原理
2010/04/01 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
JS遍历页面所有对象属性及实现方法
2016/08/01 Javascript
jQuery操作cookie
2016/08/08 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python读取Kafka实例
2019/12/23 Python
Python enumerate内置库用法解析
2020/02/24 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
美德少年事迹材料
2014/01/23 职场文书
参赛口号
2014/06/16 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
开展警示教育活动总结
2015/05/09 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL