javascript 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)

相关推荐

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • Ajax与用户交互的JSON数据存储格式

    数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应用程序稍后访问这些内容更加容易.JavaScript提供了各种不同的数据存储方式,它是一个从基本到未来走向的演化模式: XML代表可扩展标记语言,是一种比较灵活的数据格式,很多应用程序存储数据都喜欢用到它,结构像HTML,也包含元素,标签以及属性,模型都一样.它的一大优势在于它是一种可扩展的格式,你

  • 读JavaScript DOM编程艺术笔记

    1.获得当前元素的下一个元素 复制代码 代码如下: function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js,添加页面加载方法 复制代码 代码如下: function addLoadEvent(func){ var oldonload=wi

  • Javascript入门学习第六篇 js DOM编程第1/2页

    学习英文: Dom:文档对象模型.Document object model Bom:浏览器对象模型. 注:也可以叫窗口对象模型.(window object model.) API:应用编程接口. 注:DOM其实可以看作一种API. Node:节点. 注:节点分为:元素节点,属性节点,文本节点. 元素节点 包含 属性节点和文本节点. Dom树: 下面我们直接看 到底怎么操作DOM. 1,    创建元素节点.createElement(): <SCRIPT LANGUAGE="JavaS

  • js 数据存储和DOM编程

    数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • 实现JavaScript高性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5

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

    并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下. 1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现) 步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分. 复制代码 代码如下: <xmp> <select id="province" onchan

  • 传智播客学习之JavaScript基础篇

    一.JavaScript与java的区别 1.JavaScript是Netscape公司的产品,Java是Sun公司的产品. 2.JavaScript是基于对象,Java是面向对象. 3.JavaScript只需解释就可以执行,Java需要先编译成字节码文件,再执行. 4.JavaScript是弱类型,Java是强类型. 小结:其实java与JavaScript除了名字上有些像以外,然后JavaScript借用了部分java思想外,其余别的几乎没有什么关系. 二.如何将JavaScript与Ht

  • 正则表达式 传智播客学习

    有了一点点小小成就,五子棋游戏的基本功能已经实现的差不多了,还需要进行部分代码优化,期待明天的到来,因为明天我就可以实现我一个梦想,那就是晚上自己开发的游戏,呵呵!学在其中,乐在其中!下午实在有些腰酸背痛,决定就近去爬山,经过商议决定去百望山森林公园,真的是好久没锻炼了,才两百多米的山爬完回来累的不行,不过也算是感受了一下大自然的风情,站在山顶的感觉真的很不错,看着山下风景,突然感觉自己好渺小,这座城市如此之大,何时何处才是我安身之处?努力,我相信在不远的未来,我相信我的选择.吃过晚饭,看着张孝

  • 传智播客学习之java 反射

    此外,毕老师为我们讲解了反射机制,虽然以后我们在开发过程中,不一定会涉及反射,但是反射确实java一种强大的工具,它使我们能够创建灵活的代码,这些代码可以在运行时装配,无需在组件之间进行源代表链接.例如在Tomcat类加载器这种机制被很多框架所使用. 一.什么是反射 反射的概念是由Smith在1982年首次提出,主要是指程序可以访问.检测和修改本身状态行为的一种能力.反射是java程序开发语言的特征之一,它也允许运行中的 Java 程序对自身进行检查,或者说"自审",并能直接操作程序的

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

    JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMAScript语言,这是同一种语言

  • javascript函数式编程实例分析

    本文实例讲述了javascript函数式编程.分享给大家供大家参考.具体分析如下: js像其他动态语言一样是可以写高阶函数的,所谓高阶函数是可以操作函数的函数.因为在js中函数是一个彻彻底底的对象,属于第一类公民,这提供了函数式编程的先决条件. 下面给出一个例子代码,出自一本js教程,功能是计算数组元素的平均值和标准差,先列出非函数式编程的一种写法: var data = [1,1,3,5,5]; var total = 0; for(var i = 0;i < data.length;i++)

  • javascript异步编程代码书写规范Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编程时候代码书写的方式产生的. 随着javascript的发展,异步的场景越来越多.前端有AJAX,setTimeout等,后端Node异步更多.按照传统的做法,那么就是各种回调嵌回调.代码可以把人绕晕. 这个时候,CommonJS社区提出了一个叫做Promise/A+的规范,这个规范定义了如何书写异步代

  • JavaScript AOP编程实例

    本文实例讲述了JavaScript AOP编程.分享给大家供大家参考.具体如下: /* // aop({options}); // By: adamchow2326@yahoo.com.au // Version: 1.0 // Simple aspect oriented programming module // support Aspect before, after and around // usage: aop({ context: myObject, // scope contex

  • JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    1.防止滥用JavaScript"不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?" 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站. 2.平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持Java

随机推荐