黑马程序员-DOM编程基础知识练习程序（1-10）
2013-06-14 15:09
363 查看
<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IO开发S</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！
程序一、
利用<input>标签的onclick事件演示documen.getElementById( )方法
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
divobj.style.backgroundColor = "red";
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="demo()" />
<div id="divid">
abdjiefjeifjei
</div>
</body>
</html>************************************************************************
程序二、
演示documen对象的各方法和属性的使用document.getElementById（）、parentNode、childNodes等。并将HTML文档中的各标签以树形结构列出来，和列出指定文件目录中的文件操作类似。
<html>**********************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
//获取父节点
var parent = divobj.parentNode;
//getNodeInfo(parent);
//获取子节点
var childs = divobj.childNodes;
//alert(childs.length);
//getNodeInfo(childs[0]);//div中的文本节点
//获取兄弟节点
//1、获取上一个兄弟节点
var preNode = divobj.previousSibling.previousSibling;
//getNodeInfo(preNode);
//2、获取下一个兄弟节点
var nextNode = divobj.nextSibling;
//getNodeInfo(nextNode);
//需求：获取a标签的文本
var aNode = divobj.nextSibling.nextSibling;
var aText = aNode.childNodes[0];
//getNodeInfo(aText);
//需求：获取单元格一文本
//先获取表格节点
var tabNode = divobj.nextSibling;
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);
var tdNodes = tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}
var info="";
function getDocAll()
{
var nodes = document.all;
for(var x=0;x<nodes.length;x++)
{
info += nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
}
/*getNodeInfo(nodes[x]);*/
//var node = document.all(7);
//getNodeInfo(node);
document.write(info);
}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+"....type:"+node.nodeType+"....value:"+node.nodeValue+"<br>");
}
/*
puvlic void listFile(File dir)
{
System.out.println(dir.getName());
File[] files = dir.listFiles();
for(int x= 0;x<files.length;x++)
{
if(files[x].isDirectory())
listFile(files[x]);
else
System.out.println(files[x].getName());
}
}
public String getSpace(int level)
{
StringBuilder sb = new StringBuilder();
for(int x=0;x<level;x++)
{
sb.append("|--");
}
return sb.toString();
}
*/
//通过递归获取节点的层次关系
var str = "";
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0;x<nodes.length;x++)
{
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s = "";
for(var x=0;x<level;x++)
{
s+="|---";
}
return s;
}
function printInfo(node,level)
{
str+=getSpace(level)+"name:"+node.nodeName+"......type:"+node.nodeType+"......value:"+node.nodeValue+"<br/>";
}
function getNodes()
{
listNode(document,0);
document.write(str);
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="getNodes()" />
<div id="divid">
abdjiefjeifjei
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
<a href="http://ww.isna.com">非新浪网站</a>
<!--我是注释-->
<span>这是一个审判区域</span>
</body>
</html>************************************************************************
程序三、
<!--
1、定义数据封装的标签。(定义界面)
2、确定事件源。
3、注册事件
4、处理事件
需求：
页面中有一个新闻区域。
通过超链接：大 中 小。
可以让用户改变区域的大小
"javascript:void(0)":表示启动javaScript引擎解析一个一个函数。-->
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
第一种方法实现：分别定义三个方法changeMax、changeNorm、和changeMin
function changeMax()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "24px";
}
function changeNorm()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "16px";
}
function changeMin()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "9px";
}
*/
/*第二种实现方法：用一个方法实现，字体大小作为参数传递。
function changeSize(size)
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = size;
}
*/
/*
第三种方法：发现document、getElementById代码过长，可封装成doctool.js文件
通过<script type="text/javascript" src="doctool.js"></script>将文件导入。
doctool.js文件内容：
var doc = document;
function byId(id)
{
Return doc.getElementById(id);
}
function changeSize(size)
{
var divNode = byId("newsid");
divNode.style.fontSize = size;
}
第四种方法：发现每次只能对字体大小进行设置，如果进行其他设置，非常麻烦，可以封装样式。样式封装要单独写在<head></head>中，不能写在<script></script>中
<style type="text/css">
function changeSize(className)
{
divNode = byid("newsid");
divNode.className = className;
}
.norm{
background-color:#CC9933;
color:#99FF66;
font-size:36px;
width:300px;
}
.max{
background-color:#330099;
color:#993300;
font-size:24px;
width:500px;
}
.min{
background-color:#66FF66;
color:#FF99FF;
font-size:10px;
width:200px;
}
</style>
*/
</script>
</head>
<body>
<div id="newsid" >
<h2>唐诗三百首</h2>
<!-- 第一种实现方法使用
<a href="javascript:void(0)" onclick="changeMax()">大</a>
<a href="javascript:void(0)" onclick="changeNorm()">中</a>
<a href="javascript:void(0)" onclick="changeMin()">小</a><br />
-->
<!--
<a href="javascript:void(0)" onclick="changeSize('36px')">大</a>
<a href="javascript:void(0)" onclick="changeSize('16px')">中</a>
<a href="javascript:void(0)" onclick="changeSize('9px')">小</a><br />
-->
<a href="javascript:void(0)" onclick="changeSize('max')">大</a>
<a href="javascript:void(0)" onclick="changeSize('norm')">中</a>
<a href="javascript:void(0)" onclick="changeSize('min')">小</a><br />
床前明月光，<br/>
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</div>
</body></html>
程序四、
需求：通过点击实现一个展开闭合效果
<html >************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
function change1()
{
var divNode = document.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
if(b)
{
divNode.style.height = "8px";
divNode.style.overflow = "hidden";
b = false;
}
else
{
divNode.style.height = "8px";
divNode.style.overflow = "visible";
b = true;
}
}
function change2()//通过样式实现
{
var divNode = byTag("div")[0];
if(divNode.className=="close")
{
divNode.className = "open";
}
else
{
divNode.className = "close";
}
}
</script>
<style type="text/css">
.open{
height:8px;
overflow:visible;
}
.close{
height:8px;
overflow:hidden;
}
</style>
</head>
<body>
<div onclick="change()">
静夜思
</div>
</body>
</html>************************************************************************
程序五、
需求：通过点击实现一个展开闭合效果（对程序五的扩展）
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
//只有一个dl时
function list_1()
{
var dtNode = byTag("dt")[0];
alert(dtNode.nodeName);
var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
/*
获取事件源对象的两种方式
1、通过event对象的srcElement属性
2、将事件源对象通过this传入
*/
//有多个dl，可以同时展开
function list_2(dtNode)
{
//var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
//alert(dtNode.nodeName);
//var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
//有多个dl只能展开一个
function list(dtNode)
{
var dlNode = dtNode.parentNode;
var dlNodes = byTag("dl");
for(var x=0;x<dlNodes.length;x++)
{
if(dlNodes[x]==dlNode)
{
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
else
dlNodes[x].className = "close";
}
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
</body>
</html>************************************************************************
程序六、
实现如下图所示的功能：
1、
实现图一的菜单列表
2、
当单击菜单中的一个列表项时会自动展开，同时前面展开的要关闭。
3、
保证只展开一个列表项
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:#000066 1px solid;
}
table td{
border:#00CC33 1px solid;
background-color:#FF6633;
}
table td div{
background-color:#99FFCC;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
color:#990000;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2()
{
var aNode = event.srcElement;
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
var tabNode = document.getElementsByTagName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for(var x=0;x<divNodes.length;x++)
{
if(divNodes[x] == divNode)
{
if(divNode.className =="open")
{
divNode.className = "close";
}
else
{
divNode.className = "open";
}
}
else
{
divNodes[x].className = "close";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
</table>
</body>
</html>************************************************************************
程序七、
实现如下图所示功能，输入行数和列数后单击“创建表格”，会自动生成对应的表格。
删除行和删除列可以完成删除输入的指定的行和列。
DOM编程：
1、定义界面
通过html的标签将数据进行封装。
2、定义一些静态的样式。
通过css
3、需要动态的完成和用户的交互
a)先明确事件源
b)明确事件将事件注册到事件源上、
c)通过javascript的函数对象事件进行处理。
d)在处理过程需要明确被处理的区域。
思路：
1、在页面上通过按钮创建一个表格
思路：
1、
创建一个table节点。Document.createElement(“table”);
2、
通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。
3、
通过行对象的inertCell()方法创建单元格对象，并添加到cell是集合中。
4、
给单元格中添加数据：
a)
创建一个节点如文本节点，document.createTextNode(“文本内容”)
通过单元格对象appendChild方法将文本节点添加到单元格的尾部。
b)
可以通过单元格的innerHTML，添加单元格中的元素
5、
建立好表格节点，添加到Dom树中，也就是页面的指定位置上。
2、如何删除表格中的行或列
思路：
1、
删除行：获取表格对象，通过表格对象中的deleteRow方法将指定的行索引传入deleteRow方法中。
2、
删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作，获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除。
3、对表格中的数据进行排序。
思路：
1、
获取表格中的所有元素。
2、
定义临时存储，将需要进行排序的行对象存入到数组中。
3、
对数组进行排序。通过比较每一个行对象中指定单元格中的数据如果是整数需要用parseInt转换
4、
将排序后的数组通过遍历，将每一格行对象重新添加回表格，通过tbody节点的appendChild方法
5、
其实排序就是每一行对象的引用取出。
4、表格的行颜色间隔显示，并在鼠标指定的行上高亮显示。
思路：
1、
获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的制定，那么前提是：先定义好类选择器。
2、
为了完成高亮显示，需要用到两个事件，onmouseover（鼠标进入）onmouseout（鼠标移出）
3、
为了方便可以在便利行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理。这样在鼠标离开时，可以将原样式还原。
4、
该样式需要在页面加载完成后直接显示，所以使用的window.onload事件完成。
5、完成一个与css手册中一样的示例。
通过下拉菜单选择显示指定样式属性的使用效果
6、表单中的组件。
单选框、复选框。
这两个组件都有一个属性来表示其选中与否的状态(checked)
完成一个对多个复选框进行全选的操作。
思路：将全选的那个复选框的checked状态付给所有的其他checkbox即可。
7、获取鼠标的坐标，让指定的区域随着鼠标移动。
获取鼠标坐标：event.x,event.y；
指定区域随鼠标移动其实就是改变了指定区域的left、top的值。
这里需要用到的事件：body对象的onmousemove事件。
还需要用到一个css样式。直接定义页面，所有的区域都在同一层次。
为了对某一个区域进行定位。将该区域分离出来，分离到另一个层次，
用到了css中的position属性。
其中两个相关文件：
1、
tab.css
@charset "utf-8";
/* CSS Document */
table{
border:#009933 1px solid;
width:60%;
}
table th{
border:#00FF66 1px solid;
background-color:#009999;
}
table td{
border:#660099 1px solid;
}
2、
doctool.js
// JavaScript Document
var doc = document;
function byId(id)
{
return doc.getElementById(id);
}
function byTag(tag)
{
return doc.getElementsByTagName(tag);
}
function byName(name)
{
return doc.getElementsByName(name);
}
编写程序如下：
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function createTab1()
{
var tabNode = doc.createElement("table");
var tbdNode = doc.createElement("tbody");
var trNode = doc.createElement("tr");
var tdNode = doc.createElement("td");
var textNode = doc.createTextNode("单元格一");
tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
tbdNode.appendChild(trNode);
tabNode.appendChild(tbdNode);
byTag("div")[0].appendChild(tabNode);
}
function createTab2()
{
var tabNode = doc.createElement("table");
var trNode = tabNode.insertRow();
var tdNode = trNode.insertCell();
tdNode.innerHTML = "hahah";
byTag("div")[0].appendChild(tabNode);
}
function createTab()
{
var tabNode = doc.createElement("table");
tabNode.setAttribute("id","tabid");
var row = byName("rownum")[0].value;//byNme:getElementsByName()
var col = byName("colnum")[0].value;
for(var x=1;x<=row;x++)
{
var trNode = tabNode.insertRow();
for(var y=1;y<=col;y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"..."+y;
}
}
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled = true;//作用：控制只创建一次
}
function delRow()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var rownum = byName("delrow")[0].value;
if(rownum>0 && rownum<=tabNode.rows.length)
{
tabNode.deleteRow(rownum-1);
}
else
{
alert("删除的行不存在，学习数数很重要!");
}
}
function delCol()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var colnum = byName("delcol")[0].value;
if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
{
for(var x=0;x<tabNode.rows.length;x++)
{
tabNode.rows[x].deleteCell(colnum-1);
}
}
else
{
alert("删除的列不存在");
}
}
</script>
</head>
<!--
通过页面的按钮动态的创建一个表格
-->
<body>
行: <input type="text" name="rownum" /><br />
列: <input type="text" name="colnum" /><br />
<input type="button" value="创建表格" onclick="createTab()" /><br />
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delRow()"><br />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delCol()" />
<div>
</div>
</body>
</html>************************************************************************
程序八、
创建如下表格，实现功能：单击年龄后按升序排列，再单击后按降序排列
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序。
思路：
1、每一个人的信息是一行。
那么先将行都取出，临时存入到数组中，
2、并对数组中行对象的其中一个单元格中的数据进行排序
3、将排序后的行对象重新添加到表格对象中。
*/
var b=true;
function sorttab()
{
//1、获取表格中的所有行对象。
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
//alert(trs.length);
//2、定义临时容器，将表格中需要参与排序的行对象临时存储。
var arr = new Array();//临时容器中存入的都是表格行对象引用
for(var x=1;x<trs.length;x++)
{
arr[x-1]=trs[x];
}
//alert(arr.length);
sortt(arr);
var tbdNode = tabNode.childNodes[0];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0;x<arr.length;x++)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = false;
}
else
{
for(var x=arr.length-1;x>=0;x--)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0;x<arr.length;x++)
{
for(var y=x+1;y<arr.length;y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>刘德华</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>张惠妹</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序九、
表格颜色隔行显示为彩色，要求鼠标指向某行时变成高亮显示，鼠标离开时变回原来颜色。
<html>****************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
background-color:#3366FF;
}
.two{
background-color:#FFFF66;
}
.over{
background-color:#00FF00;
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function trcolor()
{
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
for(var x=1;x<trs.length;x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "two";
trs[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
var name;
/*
function over(trNode)
{
name = trNode.className;
trNode.className = "over";
}
function out(trNode)
{
trNode.className = name;
}
*/
window.onload = trcolor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>黄建翔</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>赵欣欣</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序十、
实现以下商品列表，具有两个全选功能，并能够计算出总金额。
<html xmlns="http://www.w3.org/1999/xhtml">******************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//1、获取被选中的checkbox，通过checked属性的状态完成。
//2、获取被选中checkbox的value的金额。
//3、求和。
//4、定义span区域存储总金额
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0;x<items.length;x++)
{
if(items[x].checked)
sum+= parseInt(items[x].value);
}
var spanNode = byId("sum");
var str = sum+"元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
for(var x=0;x<items.length;x++)
{
items[x].checked = allNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(0)" />全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="all" onclick="checkAll(1)" />全选<br />
<input type="button" value="获取总金额" onclick="getSum()"/><span id="sum"></span>
</body>
</html>************************************************************************
<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
详细请查看：<ahref="http://edu.csdn.net" target="blank">http://edu.csdn.net</a>
程序一、
利用<input>标签的onclick事件演示documen.getElementById( )方法
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
divobj.style.backgroundColor = "red";
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="demo()" />
<div id="divid">
abdjiefjeifjei
</div>
</body>
</html>************************************************************************
程序二、
演示documen对象的各方法和属性的使用document.getElementById（）、parentNode、childNodes等。并将HTML文档中的各标签以树形结构列出来，和列出指定文件目录中的文件操作类似。
<html>**********************************
<head>
<title>无标题文档</title>
<script type="text/javascript">
function demo()
{
var divobj = document.getElementById("divid");
//获取父节点
var parent = divobj.parentNode;
//getNodeInfo(parent);
//获取子节点
var childs = divobj.childNodes;
//alert(childs.length);
//getNodeInfo(childs[0]);//div中的文本节点
//获取兄弟节点
//1、获取上一个兄弟节点
var preNode = divobj.previousSibling.previousSibling;
//getNodeInfo(preNode);
//2、获取下一个兄弟节点
var nextNode = divobj.nextSibling;
//getNodeInfo(nextNode);
//需求：获取a标签的文本
var aNode = divobj.nextSibling.nextSibling;
var aText = aNode.childNodes[0];
//getNodeInfo(aText);
//需求：获取单元格一文本
//先获取表格节点
var tabNode = divobj.nextSibling;
//getNodeInfo(tabNode.childNodes[0].childNodes[0].childNodes[0].childNodes[0]);
var tdNodes = tabNode.getElementsByTagName("td");
//getNodeInfo(tdNodes[0].childNodes[0]);
}
var info="";
function getDocAll()
{
var nodes = document.all;
for(var x=0;x<nodes.length;x++)
{
info += nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
}
/*getNodeInfo(nodes[x]);*/
//var node = document.all(7);
//getNodeInfo(node);
document.write(info);
}
function getNodeInfo(node)
{
alert("name:"+node.nodeName+"....type:"+node.nodeType+"....value:"+node.nodeValue+"<br>");
}
/*
puvlic void listFile(File dir)
{
System.out.println(dir.getName());
File[] files = dir.listFiles();
for(int x= 0;x<files.length;x++)
{
if(files[x].isDirectory())
listFile(files[x]);
else
System.out.println(files[x].getName());
}
}
public String getSpace(int level)
{
StringBuilder sb = new StringBuilder();
for(int x=0;x<level;x++)
{
sb.append("|--");
}
return sb.toString();
}
*/
//通过递归获取节点的层次关系
var str = "";
function listNode(node,level)
{
printInfo(node,level);
level++;
var nodes = node.childNodes;
for(var x=0;x<nodes.length;x++)
{
if(nodes[x].hasChildNodes())
listNode(nodes[x],level);
else
printInfo(nodes[x],level);
}
}
function getSpace(level)
{
var s = "";
for(var x=0;x<level;x++)
{
s+="|---";
}
return s;
}
function printInfo(node,level)
{
str+=getSpace(level)+"name:"+node.nodeName+"......type:"+node.nodeType+"......value:"+node.nodeValue+"<br/>";
}
function getNodes()
{
listNode(document,0);
document.write(str);
}
</script>
</head>
<body>
<input type="button" value="演示" onclick="getNodes()" />
<div id="divid">
abdjiefjeifjei
</div>
<table>
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
<a href="http://ww.isna.com">非新浪网站</a>
<!--我是注释-->
<span>这是一个审判区域</span>
</body>
</html>************************************************************************
程序三、
<!--
1、定义数据封装的标签。(定义界面)
2、确定事件源。
3、注册事件
4、处理事件
需求：
页面中有一个新闻区域。
通过超链接：大 中 小。
可以让用户改变区域的大小
"javascript:void(0)":表示启动javaScript引擎解析一个一个函数。-->
<html>*************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
第一种方法实现：分别定义三个方法changeMax、changeNorm、和changeMin
function changeMax()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "24px";
}
function changeNorm()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "16px";
}
function changeMin()
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = "9px";
}
*/
/*第二种实现方法：用一个方法实现，字体大小作为参数传递。
function changeSize(size)
{
var divNode = document.getElementById("newsid");
divNode.style.fontSize = size;
}
*/
/*
第三种方法：发现document、getElementById代码过长，可封装成doctool.js文件
通过<script type="text/javascript" src="doctool.js"></script>将文件导入。
doctool.js文件内容：
var doc = document;
function byId(id)
{
Return doc.getElementById(id);
}
function changeSize(size)
{
var divNode = byId("newsid");
divNode.style.fontSize = size;
}
第四种方法：发现每次只能对字体大小进行设置，如果进行其他设置，非常麻烦，可以封装样式。样式封装要单独写在<head></head>中，不能写在<script></script>中
<style type="text/css">
function changeSize(className)
{
divNode = byid("newsid");
divNode.className = className;
}
.norm{
background-color:#CC9933;
color:#99FF66;
font-size:36px;
width:300px;
}
.max{
background-color:#330099;
color:#993300;
font-size:24px;
width:500px;
}
.min{
background-color:#66FF66;
color:#FF99FF;
font-size:10px;
width:200px;
}
</style>
*/
</script>
</head>
<body>
<div id="newsid" >
<h2>唐诗三百首</h2>
<!-- 第一种实现方法使用
<a href="javascript:void(0)" onclick="changeMax()">大</a>
<a href="javascript:void(0)" onclick="changeNorm()">中</a>
<a href="javascript:void(0)" onclick="changeMin()">小</a><br />
-->
<!--
<a href="javascript:void(0)" onclick="changeSize('36px')">大</a>
<a href="javascript:void(0)" onclick="changeSize('16px')">中</a>
<a href="javascript:void(0)" onclick="changeSize('9px')">小</a><br />
-->
<a href="javascript:void(0)" onclick="changeSize('max')">大</a>
<a href="javascript:void(0)" onclick="changeSize('norm')">中</a>
<a href="javascript:void(0)" onclick="changeSize('min')">小</a><br />
床前明月光，<br/>
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</div>
</body></html>
程序四、
需求：通过点击实现一个展开闭合效果
<html >************************************************************************
<head>
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
function change1()
{
var divNode = document.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
if(b)
{
divNode.style.height = "8px";
divNode.style.overflow = "hidden";
b = false;
}
else
{
divNode.style.height = "8px";
divNode.style.overflow = "visible";
b = true;
}
}
function change2()//通过样式实现
{
var divNode = byTag("div")[0];
if(divNode.className=="close")
{
divNode.className = "open";
}
else
{
divNode.className = "close";
}
}
</script>
<style type="text/css">
.open{
height:8px;
overflow:visible;
}
.close{
height:8px;
overflow:hidden;
}
</style>
</head>
<body>
<div onclick="change()">
静夜思
</div>
</body>
</html>************************************************************************
程序五、
需求：通过点击实现一个展开闭合效果（对程序五的扩展）
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//var b = true;
//只有一个dl时
function list_1()
{
var dtNode = byTag("dt")[0];
alert(dtNode.nodeName);
var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
/*
获取事件源对象的两种方式
1、通过event对象的srcElement属性
2、将事件源对象通过this传入
*/
//有多个dl，可以同时展开
function list_2(dtNode)
{
//var dtNode = event.srcElement;
var dlNode = dtNode.parentNode;
//alert(dtNode.nodeName);
//var dlNode = byTag("dl")[0];
//alert(dtNode.nodeName+"..."+dlNode.nodeName);
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
//有多个dl只能展开一个
function list(dtNode)
{
var dlNode = dtNode.parentNode;
var dlNodes = byTag("dl");
for(var x=0;x<dlNodes.length;x++)
{
if(dlNodes[x]==dlNode)
{
if(dlNode.className == "open")
{
dlNode.className = "close";
}
else
{
dlNode.className = "open";
}
}
else
dlNodes[x].className = "close";
}
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
<dl>
<dt onclick="list(this)">静夜思</dt>
<dd>床前明月光，</dd>
<dd>疑是地上霜。</dd>
<dd>举头望明月，</dd>
<dd>低头思故乡。</dd>
</dl>
</body>
</html>************************************************************************
程序六、
实现如下图所示的功能：
1、
实现图一的菜单列表
2、
当单击菜单中的一个列表项时会自动展开，同时前面展开的要关闭。
3、
保证只展开一个列表项
<html>***************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
table{
border:#000066 1px solid;
}
table td{
border:#00CC33 1px solid;
background-color:#FF6633;
}
table td div{
background-color:#99FFCC;
display:none;
}
table td a:link,table td a:visited{
text-decoration:none;
color:#990000;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2()
{
var aNode = event.srcElement;
var tdNode = aNode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
//alert(divNode.nodeName);
var tabNode = document.getElementsByTagName("table")[0];
var divNodes = tabNode.getElementsByTagName("div");
for(var x=0;x<divNodes.length;x++)
{
if(divNodes[x] == divNode)
{
if(divNode.className =="open")
{
divNode.className = "close";
}
else
{
divNode.className = "open";
}
}
else
{
divNodes[x].className = "close";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
<div>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</div>
</td>
</tr>
</table>
</body>
</html>************************************************************************
程序七、
实现如下图所示功能，输入行数和列数后单击“创建表格”，会自动生成对应的表格。
删除行和删除列可以完成删除输入的指定的行和列。
DOM编程：
1、定义界面
通过html的标签将数据进行封装。
2、定义一些静态的样式。
通过css
3、需要动态的完成和用户的交互
a)先明确事件源
b)明确事件将事件注册到事件源上、
c)通过javascript的函数对象事件进行处理。
d)在处理过程需要明确被处理的区域。
思路：
1、在页面上通过按钮创建一个表格
思路：
1、
创建一个table节点。Document.createElement(“table”);
2、
通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。
3、
通过行对象的inertCell()方法创建单元格对象，并添加到cell是集合中。
4、
给单元格中添加数据：
a)
创建一个节点如文本节点，document.createTextNode(“文本内容”)
通过单元格对象appendChild方法将文本节点添加到单元格的尾部。
b)
可以通过单元格的innerHTML，添加单元格中的元素
5、
建立好表格节点，添加到Dom树中，也就是页面的指定位置上。
2、如何删除表格中的行或列
思路：
1、
删除行：获取表格对象，通过表格对象中的deleteRow方法将指定的行索引传入deleteRow方法中。
2、
删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作，获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除。
3、对表格中的数据进行排序。
思路：
1、
获取表格中的所有元素。
2、
定义临时存储，将需要进行排序的行对象存入到数组中。
3、
对数组进行排序。通过比较每一个行对象中指定单元格中的数据如果是整数需要用parseInt转换
4、
将排序后的数组通过遍历，将每一格行对象重新添加回表格，通过tbody节点的appendChild方法
5、
其实排序就是每一行对象的引用取出。
4、表格的行颜色间隔显示，并在鼠标指定的行上高亮显示。
思路：
1、
获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的制定，那么前提是：先定义好类选择器。
2、
为了完成高亮显示，需要用到两个事件，onmouseover（鼠标进入）onmouseout（鼠标移出）
3、
为了方便可以在便利行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成该事件的处理。这样在鼠标离开时，可以将原样式还原。
4、
该样式需要在页面加载完成后直接显示，所以使用的window.onload事件完成。
5、完成一个与css手册中一样的示例。
通过下拉菜单选择显示指定样式属性的使用效果
6、表单中的组件。
单选框、复选框。
这两个组件都有一个属性来表示其选中与否的状态(checked)
完成一个对多个复选框进行全选的操作。
思路：将全选的那个复选框的checked状态付给所有的其他checkbox即可。
7、获取鼠标的坐标，让指定的区域随着鼠标移动。
获取鼠标坐标：event.x,event.y；
指定区域随鼠标移动其实就是改变了指定区域的left、top的值。
这里需要用到的事件：body对象的onmousemove事件。
还需要用到一个css样式。直接定义页面，所有的区域都在同一层次。
为了对某一个区域进行定位。将该区域分离出来，分离到另一个层次，
用到了css中的position属性。
其中两个相关文件：
1、
tab.css
@charset "utf-8";
/* CSS Document */
table{
border:#009933 1px solid;
width:60%;
}
table th{
border:#00FF66 1px solid;
background-color:#009999;
}
table td{
border:#660099 1px solid;
}
2、
doctool.js
// JavaScript Document
var doc = document;
function byId(id)
{
return doc.getElementById(id);
}
function byTag(tag)
{
return doc.getElementsByTagName(tag);
}
function byName(name)
{
return doc.getElementsByName(name);
}
编写程序如下：
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function createTab1()
{
var tabNode = doc.createElement("table");
var tbdNode = doc.createElement("tbody");
var trNode = doc.createElement("tr");
var tdNode = doc.createElement("td");
var textNode = doc.createTextNode("单元格一");
tdNode.appendChild(textNode);
trNode.appendChild(tdNode);
tbdNode.appendChild(trNode);
tabNode.appendChild(tbdNode);
byTag("div")[0].appendChild(tabNode);
}
function createTab2()
{
var tabNode = doc.createElement("table");
var trNode = tabNode.insertRow();
var tdNode = trNode.insertCell();
tdNode.innerHTML = "hahah";
byTag("div")[0].appendChild(tabNode);
}
function createTab()
{
var tabNode = doc.createElement("table");
tabNode.setAttribute("id","tabid");
var row = byName("rownum")[0].value;//byNme:getElementsByName()
var col = byName("colnum")[0].value;
for(var x=1;x<=row;x++)
{
var trNode = tabNode.insertRow();
for(var y=1;y<=col;y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"..."+y;
}
}
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled = true;//作用：控制只创建一次
}
function delRow()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var rownum = byName("delrow")[0].value;
if(rownum>0 && rownum<=tabNode.rows.length)
{
tabNode.deleteRow(rownum-1);
}
else
{
alert("删除的行不存在，学习数数很重要!");
}
}
function delCol()
{
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return;
}
var colnum = byName("delcol")[0].value;
if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
{
for(var x=0;x<tabNode.rows.length;x++)
{
tabNode.rows[x].deleteCell(colnum-1);
}
}
else
{
alert("删除的列不存在");
}
}
</script>
</head>
<!--
通过页面的按钮动态的创建一个表格
-->
<body>
行: <input type="text" name="rownum" /><br />
列: <input type="text" name="colnum" /><br />
<input type="button" value="创建表格" onclick="createTab()" /><br />
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delRow()"><br />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delCol()" />
<div>
</div>
</body>
</html>************************************************************************
程序八、
创建如下表格，实现功能：单击年龄后按升序排列，再单击后按降序排列
<html>*************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
/*
表格中按照年龄的顺序进行排序。
思路：
1、每一个人的信息是一行。
那么先将行都取出，临时存入到数组中，
2、并对数组中行对象的其中一个单元格中的数据进行排序
3、将排序后的行对象重新添加到表格对象中。
*/
var b=true;
function sorttab()
{
//1、获取表格中的所有行对象。
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
//alert(trs.length);
//2、定义临时容器，将表格中需要参与排序的行对象临时存储。
var arr = new Array();//临时容器中存入的都是表格行对象引用
for(var x=1;x<trs.length;x++)
{
arr[x-1]=trs[x];
}
//alert(arr.length);
sortt(arr);
var tbdNode = tabNode.childNodes[0];
//alert(tbdNode.nodeName);
if(b)
{
for(var x=0;x<arr.length;x++)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = false;
}
else
{
for(var x=arr.length-1;x>=0;x--)
{
//alert(arr[x].cells[1].innerText);
tbdNode.appendChild(arr[x]);
}
b = true;
}
}
function sortt(arr)
{
for(var x=0;x<arr.length;x++)
{
for(var y=x+1;y<arr.length;y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>刘德华</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>张惠妹</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序九、
表格颜色隔行显示为彩色，要求鼠标指向某行时变成高亮显示，鼠标离开时变回原来颜色。
<html>****************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
background-color:#3366FF;
}
.two{
background-color:#FFFF66;
}
.over{
background-color:#00FF00;
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function trcolor()
{
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
for(var x=1;x<trs.length;x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "two";
trs[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
var name;
/*
function over(trNode)
{
name = trNode.className;
trNode.className = "over";
}
function out(trNode)
{
trNode.className = name;
}
*/
window.onload = trcolor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void()" onclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>3</td>
<td>北京</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王武</td>
<td>30</td>
<td>广州</td>
</tr>
<tr>
<td>黄建翔</td>
<td>32</td>
<td>江苏</td>
</tr>
<tr>
<td>赵欣欣</td>
<td>28</td>
<td>山东</td>
</tr>
</table>
</body>
</html>************************************************************************
程序十、
实现以下商品列表，具有两个全选功能，并能够计算出总金额。
<html xmlns="http://www.w3.org/1999/xhtml">******************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//1、获取被选中的checkbox，通过checked属性的状态完成。
//2、获取被选中checkbox的value的金额。
//3、求和。
//4、定义span区域存储总金额
function getSum()
{
var items = byName("item");
var sum = 0;
for(var x=0;x<items.length;x++)
{
if(items[x].checked)
sum+= parseInt(items[x].value);
}
var spanNode = byId("sum");
var str = sum+"元";
spanNode.innerHTML = str.fontsize(7);
}
function checkAll(index)
{
var allNode = byName("all")[index];
var items = byName("item");
for(var x=0;x<items.length;x++)
{
items[x].checked = allNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" onclick="checkAll(0)" />全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="all" onclick="checkAll(1)" />全选<br />
<input type="button" value="获取总金额" onclick="getSum()"/><span id="sum"></span>
</body>
</html>************************************************************************
<a href="http://edu.csdn.net"target="blank">ASP.Net+Android+IOS开发</a>、<a href="http://edu.csdn.net"target="blank">.Net培训</a>、期待与您交流！ ----------------------
详细请查看：<ahref="http://edu.csdn.net" target="blank">http://edu.csdn.net</a>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 黑马程序员-DOM编程基础知识练习程序（11-17）
- 黑马程序员--网络编程--java学习日记10（基础知识）
- 黑马程序员---AWT编程基础知识课堂笔记---七个程序
- 黑马程序员--GUI界面编程--java学习日记9（基础知识）
- 黑马程序员_Java基础_网络编程_TCP协议编程,客户端服务端程序
- 黑马程序员——java基础知识之网络编程（二）
- Win32编程基础知识（包括对程序的分析）
- 黑马程序员_Java编程学习日记01（开博之言、java编程基础知识总结）
- 【黑马程序员】DOM基础知识
- 程序设计基础(Python语言)”编程练习（1）
- Java基础知识网络编程（TCP练习）
- 黑马程序员-- Dom基础知识学习笔记1
- Java基础知识强化之网络编程笔记10：TCP之客户端读取文本文件服务器控制台输出
- 黑马程序员--Dom基础知识学习笔记2
- 黑马程序员-java基础-网络基础知识,JAVA网络编程
- 黑马程序员--------java基础知识 程序流程控制
- 黑马程序员_JavaSE基础知识总结十八：网络编程
- 黑马程序员———网络编程基础知识
- 黑马程序员之WinForm编程基础学习笔记：日月选择器，假设2月份总是28天。1，3，4，7，8，10，12月份是31天，其他是30天。
- 黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM