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 dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
AngularJS实现全选反选功能
Dec 08 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
传智播客学习之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
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
javascript天然的迭代器
2010/10/29 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
17个Python小技巧分享
2015/01/23 Python
python 实时遍历日志文件
2016/04/12 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python网络编程 Python套接字编程
2017/09/13 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python使用多进程的实例详解
2018/09/19 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
DJI大疆无人机官方商城:全球领先的无人飞行器研发和生产商
2016/12/21 全球购物
网络安全方面的面试题
2015/11/04 面试题
预防传染病方案
2014/06/14 职场文书
校运会口号
2014/06/18 职场文书
2014年小学教师工作总结
2014/11/10 职场文书