黑马毕向东Java课程笔记（35天day35-1——35-10）DOM（文档对象模型）+BOM（浏览器对象模型）：part3
1、DOM示例——邮件列表
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style>
.one
{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
style>
head>
<body>
<script>
//行颜色间隔显示功能。
function trColor()
{
var name;
//1、通过id选择器获取表格对象。
var oTabNode = document.getElementById("mailtable");
//2、获取表格中的行对象。
var collTrNodes = oTabNode.rows;
//3、对所有需要设置背景的行对象进行遍历。——第一行和最后一行不需要遍历
for(var x=1; x<collTrNodes.length-1 ;x++)
{
if(x%2 == 1)
{
collTrNodes[x].className = "one";
}
else
{
collTrNodes[x].className = "two";
}
//在遍历所有行的时候，顺便给所有行设置鼠标悬浮以及离开的事件
//这里需要注意，每一行都需要添加事件
collTrNodes[x].onmouseover = function()
{
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function()
{
this.className = name;
}
}
}
//设置窗口页面加载就执行trColor()函数，这样页面一加载各行的事件以及样式便设置好
onload = function()
{
trColor();
}
//复选框的全选动作。
function checkAll(node)
{
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length ;x++)
{
collMailNodes[x].checked = node.checked;//注意不能写反，是将node的状态赋予所有的mail
}
}
//定义操作复选框按钮的方法。——这里使用不同的全选方案，传入一个数，遍历所有行节点，用这个数指定行节点是否选中
function checkAllByBut(num)
{
//先获取所有name为mail的单元格节点
var collMailNodes = document.getElementsByName("mail");
for(var x=0 ;x<collMailNodes.length ;x++)
{
if(num>1)
{
//当num=2的时候，将所有复选框状态反选
collMailNodes[x].checked = !collMailNodes[x].checked;
}
else
{
//num=1选中，num=0则不选——注意这个技巧
collMailNodes[x].checked = num;
}
}
}
//删除所选邮件。
function deleteMail()
{
//先使用confirm方法弹窗提示是否要删除所选复选框
//confirm 显示一个确认对话框，其中包含一个可选的消息和确定取消按钮。
if(!confirm("你真的要删除所选的邮件吗？"))
{//不删除则退出，，既否时执行if内语句
return;
}
//同样找到所有的mail表格，获取包含其的行，再获取包含行的表格，删除该行即可
var collMailNodes = document.getElementsByName("mail");
for(var x=0 ;x<collMailNodes.length ;x++)
{
if(collMailNodes[x].checked)//只删除被选中的项
{
//获取mail对应的行节点
var oTrNode = collMailNodes[x].parentNode.parentNode;
//接下来行节点获取相应的表格节点，表格节点再删除行节点
oTrNode.parentNode.removeChild(oTrNode);
x--;//因为删除一行后，后面一行会顶替这一行，因此这一行必须继续检验，x--再x++检验这一行
}
}
trColor();//调用这个方法，保证删除后还是相隔行之间颜色不同
}
script>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
th>
<th>
发件人
th>
<th>
邮件名称
th>
<th>
邮件附属信息
th>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11
td>
<td>
我是邮件11
td>
<td>
我是附属信息11
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三22
td>
<td>
我是邮件22
td>
<td>
我是附属信息22
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三33
td>
<td>
我是邮件33
td>
<td>
我是附属信息33
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三44
td>
<td>
我是邮件44
td>
<td>
我是附属信息44
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三55
td>
<td>
我是邮件55
td>
<td>
我是附属信息55
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三66
td>
<td>
我是邮件66
td>
<td>
我是附属信息66
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三117
td>
<td>
我是邮件117
td>
<td>
我是附属信息17
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三118
td>
<td>
我是邮件118
td>
<td>
我是附属信息118
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三119
td>
<td>
我是邮件119
td>
<td>
我是附属信息119
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三1100
td>
<td>
我是邮件110
td>
<td>
我是附属信息110
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11a
td>
<td>
我是邮件11a
td>
<td>
我是附属信息11a
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11b
td>
<td>
我是邮件11b
td>
<td>
我是附属信息1b1
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11c
td>
<td>
我是邮件11c
td>
<td>
我是附属信息11c
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11d
td>
<td>
我是邮件11d
td>
<td>
我是附属信息11d
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三11e
td>
<td>
我是邮件11e
td>
<td>
我是附属信息11e
td>
tr>
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
th>
<th colspan="3">
<input type="button" value="全选" onclick="checkAllByBut(1)" />
<input type="button" value="取消全选" onclick="checkAllByBut(0)" />
<input type="button" value="反选" onclick="checkAllByBut(2)" />
<input type="button" value="删除所选附件" onclick="deleteMail()" />
th>
tr>
table>
body>
html>
2、DOM示例——调查问卷+性格测试
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<style type="text/css">
/*这里利用id选择器为无序列表设置样式，利用类选择器预设结果的样式*/
#no1ul
{
list-style:none;/*将原有样式去除*/
margin:0px;
}
.close
{
display:none;
}
.open
{
display:block;
}
style>
head>
<body>
<script type="text/javascript">
function showContent(node)
{
//获取id="contentid"的div节点
var oDivNode = document.getElementById("contentid");
//使用with语句简化代码，对象是div的style属性
with(oDivNode.style)
{
//样式： display 设置或获取对象是否要渲染。
if(node.value == "yes")
{//block:块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
display = "block";//这里本来应该是oDivNode.style.display = "block";
}
else
{//none:隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
display = "none";
}
}
}
script>
<div>
你要参加调查问卷吗？
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
div>
<div id="contentid">
调查问卷内容：<br />
你的姓名：<input type="text" /><br/>
你的邮箱：<input type="text" />
div>
<h2>欢迎你您参加性格测试h2>
<div>
<h3>第一题：h3>
<span>你喜欢的水果是什么？span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1" />葡萄li>
<li><input type="radio" name="no1" value="2" />西瓜li>
<li><input type="radio" name="no1" value="3" />苹果li>
<li><input type="radio" name="no1" value="4" />香蕉li>
<li><input type="radio" name="no1" value="5" />火龙果li>
ul>
div>
<div>
<input type="button" value="查看测试结果" onclick="showResult()"/>
<span id="errinfo">span>
<div id="res_1" class="close">1-3分：你的性格内向并扭曲，建议...div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...div>
div>
<script type="text/javascript">
function showResult()
{
//1、判断是否有答案被选中。——没有被选中将错误信息打印到相应地点，并退出 函数
//获取所有no1的radio。并遍历判断checked状态。
var oNo1Nodes = document.getElementsByName("no1");
var flag = false;//flag用于判断是否有单选框被选中
var val;//用于存储选中的单选框的值
for(var x=0; x<oNo1Nodes.length ;x++)
{
if(oNo1Nodes[x].checked)
{//有单选框被选中则将flag置true
flag = true;
val = oNo1Nodes[x].value;//将no1的值赋予val
break;//跳出循环
}
}
//如果没有被选中将错误信息打印到span区域，并退出 函数
if(!flag)
{
document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red");
return;
}
//如果有被选中，根据val的值，我们修改res_1与res_2区域的class来修改结果样式
if(val>=1 && val<=3)
{
document.getElementById("res_1").className = "open";
document.getElementById("res_2").className = "close";
}
else
{
document.getElementById("res_1").className = "close";
document.getElementById("res_2").className = "open";
}
}
script>
body>
html>
3、DOM示例——下拉菜单
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<style type="text/css">
/*先预定义clrclass的div区域的样式与text的div区域的样式*/
.clrclass
{
height:50px;
width:50px;
float:left;
margin-right:30px;/*与左边边距*/
}
#text
{
clear:left;/*取消text区域漂浮*/
margin-top:60px;/*text与上面组件的边距*/
}
#text2
{
clear:left;
margin-top:10px;
}
.selClass{
width:100px;
}
style>
head>
<body>
<script type="text/javascript">
function changeColor(node)
{
//先获取需要显示效果区域的div对象
var oDivNode = document.getElementById("text");
//获取node的style的background-color属性，将其赋予oDivNode
//background-color backgroundColor 设置或获取对象内容后的颜色。 第一个是css代码，第二个是js代码
//注意这里是获取前面div的背景颜色（backgroundColor），赋予后面div的文本（color）
oDivNode.style.color = node.style.backgroundColor;
}
script>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)">div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)">div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)">div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
div>
<hr/>
<script type="text/javascript">
function changeColor2()
{
//先获取select对象
var oSelectNode = document.getElementsByName("changeColor")[0]
//通过——selectedIndex 设置或获取选中选项option位于 select 对象中的位置。 ——属性获取select中option的下标
//options集合 获取 select 对象中 option 对象的集合。
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;//获取option选项的value颜色
document.getElementById("text2").style.color = colorVal;
}
script>
<select name="changeColor" onchange="changeColor2()">
<option value="black">选择颜色option>
<option value="red">红色option>
<option value="green">绿色option>
<option value="blue">蓝色option>
select>
<select name="selectColor2" onchange="changeColor3()" class="selClass">
<option style="background-color:black" value="black">选择颜色option>
<option style="background-color:red" value="red">option>
<option style="background-color:green" value="green">绿色option>
<option style="background-color:blue" value="blue">蓝色option>
select>
<div id="text2">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
div>
body>
html>
4、DOM示例——下拉菜单，选择城市——二级联动菜单
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<style type="text/css">
/*设置select的样式*/
select{
width:100px;
}
style>
head>
<body>
<script type="text/javascript">
//我们在第一个下拉菜单选中一个省，第二个下拉菜单就会有相应的市选择
function selectCity()
{
//先定义一个二元数组容器，用于保存每一个省的城市只
var collCities = [['选择城市'],
['海淀区','朝阳区','东城区','西城区'],
['济南','青岛','烟台','威海'],
['沈阳','大连','鞍山','抚顺'],
['石家庄','保定','邯郸','廊坊']];
//上面这部分也可以通过value设置为
// var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象。
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//获取到底选择的是哪个省。
var index = oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组。
var arrCities = collCities[index];
//将子菜单中的内容清空一下。
//可以通过for循环将子菜单所有的option一个一个删除
//这里x如果从1开始，保留“选择城市”项。另一方面，我们这里不需要x++，因为删除这一个option后，下面的option会补上来，我们直接删除x=1角标下的所有option即可
/*
for(var x=1; x
//当然也可以直接将oSubSelNode的长度置0
oSubSelNode.length = 0;//清除动作
//遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0; x<arrCities.length ;x++)
{
var oOptNode = document.createElement("option");//创建一个option节点
oOptNode.innerHTML = arrCities[x];//设置选项option的内容，为数组arrCities的内容
oSubSelNode.appendChild(oOptNode);//将option节点添加到子菜单
}
}
script>
<select id="selid" onchange="selectCity()">
<option>选择省市option>
<option value="beijing">北京option>
<option>山东option>
<option>辽宁option>
<option>河北option>
select>
<select id="subselid">
<option>选择城市option>
select>
body>
html>
5、DOM示例——添加删除附件
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
<style type="text/css">
table a:link,table a:visited
{
color:#179ed9;
text-decoration:none;
}
table a:hover
{
color:#f36021;
}
style>
head>
<body>
<script type="text/javascript">
function addFile()
{
/*
* 因为文件选取框定义在行对象中。
* 所以只要给表格创建新的行和单元格即可。
*/
//先获取table节点
var oTabNode = document.getElementById("fileid");
//insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。
var oTrNode = oTabNode.insertRow();//插入一行
//insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
var oTdNode_file = oTrNode.insertCell();//在行中插入单元格，该单元格用于保存插入的内容
oTdNode_file.innerHTML = "";//单元格内容为file组件
//再插入一个单元格，这个单元格用于添加删除的超链接，该删除超链接仍然是超链接
//该超链接用于删除添加的附件，既将添加的一行全部删除
var oTdNode_del = oTrNode.insertCell();
//oTdNode_del.innerHTML = "删除附件";
oTdNode_del.innerHTML = "
";
}
function deleteFile(node)
{
var oTrNode = node.parentNode.parentNode;//获取行节点，超链接父节点是td,td父节点是行tr
oTrNode.parentNode.removeChild(oTrNode);//获取tr父节点table，再用table节点删除tr
}
script>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件a>td>
tr>
table>
body>
html>
6、DOM示例——表单校验
相应的代码示例如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档title>
head>
<body>
<script type="text/javascript">
/*
//校验用户名
function checkUser()
{
//先获取用户名的节点与对应的值
var oUserNode = document.getElementsByName("user")[0];
var name = oUserNode.value;
//获取span节点方便往里面添加信息
var oSpanNode = document.getElementById("userspan");
JS的正则表达式对象：RegExp
语法1：
/pattern/attributes
语法2：
new RegExp(pattern, attributes);
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
//定义正则表达式
//^：reg的开始；$：reg的结束
//如果不限定头和尾，那么test只要查找到字符串中有符合reg的子串，就会返回true。比如“11sdaf”就符合
var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。i表示不区分大小写。
//reg = new RegExp("^\\d{4}$");// 必须是四个数字。
//上面也可以写作reg = /^\d{4}$/;//这里表示所有数字用“\d”而不需要使用“\\d”
//因为字符串有""，导致其里面的“\”表示特殊字符，因此其需要转义；而第二种方式没有字符串""，直接写正则表达式即可
var flag;
//if(name == "abc")
//test() 方法检索字符串中的指定值。返回值是 true 或 false。成功匹配就返回true，否则返回false
//字符串的match() 用来查找字符串中特定的字符，并且如果找到的话，将查找的结果作为数组返回。
if(reg.test(name))
{
oSpanNode.innerHTML = "用户名正确".fontcolor("green");
flag = true;
}
else
{
oSpanNode.innerHTML = "用户名错误".fontcolor("red");
flag = false;
}
return flag;
}
*/
/*
* 发现很多框的校验除了几个内容不同外，校验的过程是一样的。
* 所以进行了代码的提取。
*/
function check(name,reg,spanid,okinfo,errinfo)
{
//先获取text节点的值
var val = document.getElementsByName(name)[0].value;
//获取span区域节点
var oSpanNode = document.getElementById(spanid);
var flag;
if(reg.test(val))//val值与reg匹配
{
oSpanNode.innerHTML = okinfo.fontcolor("green");
flag = true;
}
else
{
oSpanNode.innerHTML = errinfo.fontcolor("red");
flag = false;
}
return flag;
}
//校验用户名。
function checkUser()
{
var reg = /^[a-z]{4}$/i;
return check("user",reg,"userspan","用户名正确","用户名错误");
}
//校验密码；
function checkPsw()
{
var reg = /^\d{4}$/;
return check("psw",reg,"pswspan","密码正确","密码错误");
}
//校验确定密码。只要和密码一致即可。
function checkRepsw()
{
var flag;
//获取密码框与确认密码框的值
var psw = document.getElementsByName("psw")[0].value;
var repsw = document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域。
var oSpanNode = document.getElementById("repswspan");
if(psw == repsw)
{
oSpanNode.innerHTML = "两次密码一致".fontcolor("green");
flag = true;
}
else
{
oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");
flag = false;
}
return flag;
}
//校验邮件
function checkMail()
{
var reg = /^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}
// 提交事件处理。
function checkForm()
{
if(checkUser() && checkPsw && checkRepsw() && checkMail())
return true;
return false;
}
function mySubmit()
{
var oFormNode = document.getElemantById("userinfo");
//submit 提交表单。
oFormNode.submit();
}
script>
<form id="userinfo" onsubmit="return checkForm()">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userspan">span>
<br/>
输入密码：<input type="text" name="psw" onblur="checkPsw()" />
<span id="pswspan">span>
<br/>
确认密码：<input type="text" name="repsw" onblur="checkRepsw()" />
<span id="repswspan">span>
<br/>
邮件地址：<input type="text" name="mail" onblur="checkMail()" />
<span id="mailspan">span>
<br/>
<input type="submit" value="提交数据" />
form>
<hr/>
<input type="button" value="我的提交" onclick="mySubmit()" />
body>
html>