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

 更新时间:2009年11月23日 00:03:05   作者:  
最近一直在努力学习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>

相关文章

  • 使用js在layui中实现上传图片压缩

    使用js在layui中实现上传图片压缩

    这篇文章主要介绍了使用js在layui中实现上传图片压缩,layui 是一款采用自身模块规范编写的前端 UI 框架,js上传图片压缩百度有很多方法,,需要的朋友可以参考下
    2019-06-06
  • 新手学习前端之js模仿淘宝主页网站

    新手学习前端之js模仿淘宝主页网站

    淘宝网大家在熟悉不过了,那么淘宝网首页模板是怎么做的呢?今天小编抽时间给大家分享新手学习前端之js模仿淘宝主页网站的相关资料,需要的朋友可以参考下
    2016-10-10
  • 原生JavaScript实现拖动校验功能

    原生JavaScript实现拖动校验功能

    这篇文章主要介绍了原生JavaScript实现拖动校验功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript类型系统之Object详解

    JavaScript类型系统之Object详解

    对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和(或)方法,就可以创建自定义对象
    2016-01-01
  • 使用p5.js实现动态GIF图片临摹重现

    使用p5.js实现动态GIF图片临摹重现

    这篇文章主要为大家详细介绍了使用p5.js实现动态GIF图片临摹重现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • JS批量修改PS中图层名称的方法

    JS批量修改PS中图层名称的方法

    批量修改PS中图层名称的方法有很多,在本文为大家介绍下使用js是如何实现的
    2014-01-01
  • JavaScript六种常见的继承方法分享

    JavaScript六种常见的继承方法分享

    继承是面向对象编程中的一个重要概念,它允许一个对象(子类或派生类)获取另一个对象(父类或基类)的属性和方法,在 JavaScript 中,有多种方式可以实现继承,本文将给大家介绍六种常见的JavaScript继承方法,需要的朋友可以参考下
    2023-09-09
  • JS中的Replace()传入函数时的用法详解

    JS中的Replace()传入函数时的用法详解

    这篇文章主要介绍了JS中的Replace()传入函数时的用法详解,replace方法的语法是:stringObj.replace(rgExp, replaceText)关于js replace 传入函数的用法,大家通过本文学习吧
    2017-09-09
  • 如何使用JS中的webWorker

    如何使用JS中的webWorker

    作为浏览器脚本语言,如果JavaScript不是单线程,那么就有点棘手了。比如,与用户交互或者对DOM进行操作时,在一个线程上修改某个DOM,另外的线程删除DOM,这时浏览器该如何抉择呢?
    2021-05-05
  • 微信小程序实现顶部固定 底部分页滚动效果

    微信小程序实现顶部固定 底部分页滚动效果

    这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果,本文大概给大家分享三种解决方案,每种方案给大家详细剖析通过代码解析哪种方案更适合,感兴趣的朋友跟随小编一起看看吧
    2022-10-10

最新评论