1、DOM邮件列表
邮件列表的全选，取消全选，删除程序如下
重点分析一下删除功能的原理：
//删除所选邮件。
function deleteMail(){
if (!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
由
复选框节点
遍历获得的所有的复选框节点，之后检测复选框对象的checked属性，如果是被选中的，就找复选框的父节点td，再父节点tr，之后要么直接灭九族删全部，要么再往上一层父节点到表节点，让父节点tab来删除行节点。
由于是一边遍历一边删除，所以x,collMailNodes的长度是在不断发生变化的。删完一个，剩下的元素都往前移动，角标还是从0开始，但是x又在不断的自增，所以就会出现遗漏的现象。具体如下图：
全部代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
</style>
<script type="text/javascript">
//行颜色间隔显示功能。
var name;
function trColor(){
//1,获取表格对象。
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;
}
}
}
onload = function(){
trColor();
}
//复选框的全选动作。
function checkAll(node){
//获取所有的mail复选框。
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
collMailNodes[x].checked = node.checked;
}
}
//定义操作复选框按钮的方法。
function checkAllByBut(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x<collMailNodes.length; x++){
if(num>1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}
}
//删除所选邮件。
function deleteMail(){
if (!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
</script>
</head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" οnclick="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" οnclick="checkAll(this)" />全选
</th>
<th colspan="3">
<input type="button" value="全选" οnclick="checkAllByBut(1)" />
<input type="button" value="取消全选" οnclick="checkAllByBut(0)" />
<input type="button" value="反选" οnclick="checkAllByBut(2)" />
<input type="button" value="删除所选附件" οnclick="deleteMail()" />
</th>
</tr>
</table>
</body>
</html>2、<input type = "radio" name= "wenjuan">这个是圆形点点的单选复选框，对于同一个name组的只有一个能被选中。想要二选一或者多选一，只需将这些同类型的radio都设成相同的name = "wenjuan"就ok。标签里check = “checked”就相当于默认选的
上面的写法很麻烦，可以改成下面的写法，借助with(公共部分)
调查问卷的程序如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
#contentid{
display:none;
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
</style>
<script type="text/javascript">
function showResult(){
//1,判断是否有答案被选中。
//获取所有no1的radio。并遍历判断checked状态。
var oNo1Nodes = document.getElementsByName("no1");
var flag = false;
var val;
for(var x=0; x<oNo1Nodes.length; x++){
if(oNo1Nodes[x].checked){
flag = true;
val = oNo1Nodes[x].value;
break;
}
}
if(!flag){
// alert("")
document.getElementById("errinfo").innerHTML = "没有任何答案被选中".fontcolor("red");
return;
}
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>
</head>
<body>
<!--
单选按钮演示。
1，是否参与调查问卷？
2，性格测试。
-->
<!--2，性格测试。-->
<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="查看测试结果" οnclick="showResult()" />
<span id="errinfo"></span>
<div id="res_1" class="close">1-3分：你的性格内向并扭曲，建议...</div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...</div>
</div>
<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode = document.getElementById("contentid");
with(oDivNode.style){
if(node.value=='yes'){
display = "block";
}else{
display = "none";
}
}
}
</script>
<!--问卷调查-->
<div>
您要参与问卷调查吗：
<input type="radio" name="wenjuan" value="yes" οnclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" οnclick="showContent(this)" />否
</div>
<div id="contentid">
问卷调查内容：<BR/>
您的姓名：<input type="text" /><br>
您的邮箱：<input type="text" />
</div>
</body>
</html>4、DOM示例下拉菜单-选择颜色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style tyle="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
.selClass{
width:100px;
}
</style>
</head>
<body>
<!--
-->
<script type="text/javascript">
function changeColor(node){
var colorVal = node.style.backgroundColor;
document.getElementById("text").style.color = colorVal;
}
</script>
<div class="clrclass" id="clr1" style="background-color:red" οnclick="changeColor(this)"></div>
<div class="clrclass" id="clr2" style="background-color:green" οnclick="changeColor(this)"></div>
<div class="clrclass" id="clr3" style="background-color:blue" οnclick="changeColor(this)"></div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
</div>
<hr/>
<script type="text/javascript">
function changeColor2(){
var oSelectNode = document.getElementsByName("selectColor")[0];
//获取所有的option。
/*with (oSelectNode) {
var collOptionNodes = options;
alert(options[selectedIndex].innerHTML);
}*/
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color = colorVal;
// for(var x=0;x<collOptionNodes.length; x++){
// alert(collOptionNodes[x].innerHTML);
// }
}
</script>
<select name="selectColor" οnchange="changeColor2()">
<option value="black">选择颜色</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
<select name="selectColor2" οnchange="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>
</body>
</html>效果如下所示：
5、DOM之下拉菜单-选择城市
当第一个下拉框省会确定后，第二个下拉框城市里面该有的内容也就确定了。第一个下拉框里面省会改变之后，第二个下拉框里的内容也要相应改变。这就要求城市下拉框中要删除之前省会对应的城市。删除的方法有2种
<pre name="code" class="html">
删除方法1： //将子菜单中的内容清空一下。
// for(var x=0;x<oSubSelNode.options.length; ){
// oSubSelNode.removeChild(oSubSelNode.options[x]);//将里面的条目都删除掉。
// }
删除方法2： //清除动作
oSubSelNode.length = 0;//直接令那个数组的长度为0
删除方法1这里有个经典问题就是for循环里面x<长度，但是里面的又在不断的删除，导致长度在变，这个问题之前也说过，之前是x++后还要x--，所以这里干脆就不让x++了，也就是如下所示
for(var x=0;x<oSubSelNode.options.length; )完整的程序如下所示：<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities = [['选择城市']
,['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
// var arr = {"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象。
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//获取到底选择的是哪个省。
var index = oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组。
var arrCities = collCities[index];
//将子菜单中的内容清空一下。
// for(var x=0;x<oSubSelNode.options.length; ){
// oSubSelNode.removeChild(oSubSelNode.options[x]);
// }
//清除动作
oSubSelNode.length = 0;
//遍历这个数组。并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0; x<arrCities.length; x++){
var oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
</script>
<select id="selid" οnchange="selectCity()">
<option>选择省市</option>
<option value="beijing">北京</option>
<option>山东</option>
<option>辽宁</option>
<option>河北</option>
</select>
<select id="subselid">
<option>选择城市</option>
</select>
</body>
</html>
效果图如下：
<img src="" alt="" />7、onfocus光标在那个文本框闪动，onblur就是光标离开那个文本框（点了别的文本框），两个都是触发机制，和onclick点击触发的意思是一样的。
程序如下
8、正则表达式
先生成一个正则对象（规则），在将要检验的东西，用match函数匹配。
java中match返回的是ture或者false,但是javascript中match返回的是匹配结果（以数组的形式），比较麻烦。
可以用test函数，它返回的是boolean类型。和java中的效果类似 。
正则这样写，现代了头尾之间有4个连续的字母。
正则表达式创建有2种方式，如下图，稍微有些区别
由于第一种方式里面是双引号"..."，里面是字符串，而反斜杠在双引号里面是一个单独的字符，想让它和d结合表示特殊含义，就要先对反斜杠转义一下表示一个特殊含义，“转义反斜线”，之后再和d结合才表示0-9
第二种方式就不需要这么复杂。
9、表单校验和表单提交的两种方式
<input type = "submit" value="提交数据">,submit的默认特点就是只要你一点，就会把submit所在的这个form表单里的数据通通打包提交发送。但是默认不校验，填进去的数据对不对，它都直接他都直接提交了，这样不靠谱。所以要在<form 。。。>标签里加上校验准则函数，对提交的数据正确与否进行校验，再决定是否提交 。
表单提交有2种方式：
一种是在表单内部用submit的方式来提交。另一种是在表单外面自定义一个button按钮或者超链接，点击后触发函数，在函数里面获取表单节点对象，并利用表单对象自带的提交方法来提交数据。
<form id="userinfo" οnsubmit="return checkForm()">
用户名称：<input type="text" name="user" οnblur="checkUser()" />
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" οnblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确定密码：<input type="text" name="repsw" οnblur="checkRepsw()" />
<span id="repswspan"></span>
<br/>
邮件地址：<input type="text" name="mail" οnblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>注意第一句
<form id="userinfo" οnsubmit="return checkForm()"> 的onsubmit = "return checkForm()"一定要有return，就算你的checkForm（）函数里面最后一句已经是return true。但是这里需要的是onsubmit = return true，而不是onsubmit = true,所以还是要再返回一次。邮件校验，还是要涉及到邮件的正则校验。<table><tbody><tr><td>//校验邮件</td></tr><tr><td value="116"> </td><td>function checkMail(){</td></tr><tr><td value="117"> </td><td>var reg = /^\w+@\w+(\.\w+)+$/i;</td></tr><tr><td value="118"> </td><td>return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");</td></tr><tr><td value="119"> </td><td>} </td></tr></tbody></table>
<pre name="code" class="html">var reg = /^\w+@\w+(\.\w+)+$/i;其中(\w+)是一个或多个,(@),(\.)转义为普通点，否则点是任意字符的意思。而（\.\w+）+是满足.com.cn这种一个或多个的情况。</pre><pre name="code" class="html">每个输入框都可以有它自己的校验，但是有个问题就是如下图所示，输入密码先写成1212，确认密码也写成1212，判断两次密码一致后，再把第一个的1212改成1213，校验界面仍显示正确，所以在点击提交时需要重新调用各个输入文本框的校验方法与一下，都对了，才提交。<img src="" alt="" />点击提交后<img src="" alt="" />完整程序如下所示：<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
</head>
<body>
<!--
表单校验。
-->
<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag;
var oUserNode = document.getElementsByName("user")[0];
var name = oUserNode.value;
//定义正则表达式8
var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。
// reg = new RegExp("^\\d{4}$");// 必须是四个数字。
// reg = /^\d{4}$/;
var oSpanNode = document.getElementById("userspan");
// if(name=="abc"){
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){
var flag;
var val = document.getElementsByName(name)[0].value;
var oSpanNode = document.getElementById(spanId);
if(reg.test(val)){
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 pass = document.getElementsByName("psw")[0].value;
//获取确认密码框内容。
var repass = document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域。
var oSpanNode = document.getElementById("repswspan");
if(pass==repass){
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(){
// alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());
if(checkUser() && checkPsw() && checkRepsw() && checkMail())
return true;
return false;
}
function mySubmit(){
var oFormNode = document.getElementById("userinfo");
oFormNode.submit();
}
</script>
<form id="userinfo" οnsubmit="return checkForm()">
用户名称：<input type="text" name="user" οnblur="checkUser()" />
<span id="userspan"></span>
<br/>
输入密码：<input type="text" name="psw" οnblur="checkPsw()" />
<span id="pswspan"></span>
<br/>
确定密码：<input type="text" name="repsw" οnblur="checkRepsw()" />
<span id="repswspan"></span>
<br/>
邮件地址：<input type="text" name="mail" οnblur="checkMail()" />
<span id="mailspan"></span>
<br/>
<input type="submit" value="提交数据" />
</form>
<hr/>
<!--自定提交按钮-->
<input type="button" value="我的提交" οnclick="mySubmit()" />
</body>
</html>
这里吧各个校验函数统一成一个函数，只需传入要校验的对象和政治表达式，正确显示什么信息，错误显示什么信息，就可以实现不同的校验功能，实现了代码的复用。
//校验邮件 | |
| function checkMail(){ |
| var reg = /^\w+@\w+(\.\w+)+$/i; |
| return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误"); |
| } |
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
