繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript DOM编程实例(智播客学习)
- Javascript
- 颜色变换 像字符逐字输入的欢迎词
- CSS 伪类实现的鼠标滑动图片链接
- 百度用到的Js日历 大家可以看看
- CSS 渐变背景的6个演示代码
- Jquery 弹出层插件实现代码
- Javascript 模式实例 观察者模式
- [原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
- javascript window对象属性整理
- JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明
- 用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
- 理解 JavaScript 预解析
- 理解JavaScript变量作用域更轻松
- JavaScript的变量作用域深入理解
- javascript写的一个链表实现代码
- Js 打字效果 逐一出现的文字
- javascript 走马灯效果的链接提示
- CSS 动态链接提示
- JavaScript 事件的一些重要说明
- JavaScript 三种不同位置代码的写法
Javascript 中的 javascript DOM编程实例(智播客学习)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 115 ::
收藏到网摘: n/a
最近一直在努力学习DOM编程这块，这是目前成就感最强烈的一块了，毕老师很认真的给我们讲解了相关知识，并在网上找了很多做的非常棒的网页作为例程给我们进行讲解 并给我们讲解了很多关于如何去学习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>
评论 (0) All
