JavaScript 内容串联 ---Document---四、五和正则表达式。
Document
（四）操作内容
1.表单元素（文本、按钮、选择）
取值：obj.value="";
赋值：var s=obj.value;
例1：
<body>
<form action="" method="get">
<input id="txt" name="txt" type="text" />
<input id="btn" name="btn" type="button" value="点击" onclick="Mclick()"/>
</form>
</body>
<script language="javascript">
function Mclick()
{
//一、把文本框的值取出来
//1.找到文本框
var a=document.getElementById("txt");
//2.把值取出来
var x=a.value;
//一、给按钮把值赋上
//1.找到按钮
var b=document.getElementById("btn");
//2.把值赋上
b.value=x;
}
</script>
例2：
<body>
<form action="" method="get">
<p>
<input id="agree" name="agree" type="radio" value="ture" onclick="Yclick()"/>同意
<input id="Nagree" name="agree" type="radio" value="false" checked="checked" onclick="Nclick()"/>不同意
</p>
<input id="btn" name="btn" type="button" value="下一步" disabled="disabled" />
</form>
</body>
<script language="javascript">
function Yclick()
{
var b=document.getElementById("btn");
b.removeAttribute("disabled");
b.setAttribute("type","submit");
}
function Nclick()
{
var b=document.getElementById("btn");
b.setAttribute("disabled","disabled");
}
</script>
第二种方法：调用同一个函数。
<body>
<form action="" method="get">
<p>
<input id="agree" name="agree" type="radio" value="true" onclick="Xclick(this)"/>同意
<input id="Nagree" name="agree" type="radio" value="false" checked="checked" onclick="Xclick(this)"/>不同意
</p>
<input id="btn" name="btn" type="button" value="下一步" disabled="disabled" />
</form>
</body>
<script language="javascript">
function Xclick(rb) //是你点击的那个radiobutton对象
{
var c=document.getElementById("btn");
if(rb.value=="true")
{
c.removeAttribute("disabled");
}
if(rb.value=="false")
{
c.setAttribute("disabled","disabled");
}
}
</script>
例3：
<body>
<form action="" method="get">
<p><input id="zc" name="cbz" type="checkbox" value="all" onclick="allclick()" />全选</p>
<div>
<input id="zc1" name="cb" type="checkbox" value="1" />豆浆
<input id="zc2" name="cb" type="checkbox" value="2" />牛奶
<input id="zc3" name="cb" type="checkbox" value="3" />果汁
<input id="zc4" name="cb" type="checkbox" value="4" />油条
<input id="zc5" name="cb" type="checkbox" value="5" />火烧
<input id="zc6" name="cb" type="checkbox" value="6" />油饼
</div>
<div><input type="button" id="sum" name="sum" value="结算" onclick="money()"/></div>
</form>
</body>
<script language="javascript">
function money()
{
//计算
//遍历累加 1.找到 2.for循环
var SUM=0;
var s=document.getElementsByName("cb");
for(var i=0;i<s.length;i++)
{
if(s[i].checked==true)//判断复选框是否被选中
{
SUM+=parseInt(s[i].value);
}
}
//显示
alert(SUM);
}
//全选
function allclick()
{
//获取“全选”的选中状态
var a=document.getElementById("zc");
var b=a.checked;
//把下面所有的复选框设置 与 ”全选“ 一样的状态
//1.找到下面所有的复选框
var allname=document.getElementsByName("cb");
//2.遍历，把每个复选框 设置成 跟 ”全选“ 一样的状态
for(var i=0; i<allname.length;i++)
{
allname[i].checked=b;
}
}
2.非表单元素
取值：obj.innerHTML="";
赋值：var s=obj.innerHTML;
例:
<head>
<style type="text/css">
.ccolor{ color:red;}
</style>
</head>
<body>
<form action="" method="get">
<p>
<label for="zhtxt">账号：</label>
<input id="zhtxt" name="zhtxt" type="text" />
<span id="hid" class="ccolor">*</span>
</p>
<p>
<label for="mmtxt">密码：</label>
<input id="mmtxt" name="mmtxt" type="password" />
<span id="hed" class="ccolor">*</span>
</p>
<p><input id="" name="" type="submit" value="登陆" onclick="return yanzheng()"/></p>
</form>
</body>
</html>
<script language="javascript">
function yanzheng()
{
var allok=true;
var a=document.getElementById("zhtxt");
var x=a.value;
var b=document.getElementById("mmtxt");
var y=b.value;
if(x.length==0)
{
document.getElementById("hid").innerHTML="用户名不能为空";
allok=false;
}
if(y.length==0)
{
document.getElementById("hed").innerHTML="密码不能为空";
allok=false;
}
return allok;
}
</script>
举例1：
<body>
<p>123 </p>
<p>asd</p>
<p>qwertty</p>
<p>zcbnnm</p>
<p>jlkl;uiy</p>
<p>54768gvc</p>
<p>
<input type="button" name="btn" id="btn" value="同意（10）" disabled="disabled" />
</p>
</body>
</html>
<script language="javascript">
var n=10;
function Dtime()
{
n--;
var a=document.getElementById("btn");
a.value="同意("+n+")";
if(n==0)
{
a.value="同意";
a.removeAttribute("disabled");
}
else
{
window.setTimeout("Dtime()",1000);
}
}
Dtime();
</script>
举例2：
<head>
<style type="text/css">
#thumb div
{
margin-top:3px;
}
</style>
</head>
<body>
<table width="870" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="600" align="center">
<img id="bigimage" src="pic1 (1).jpg" height="500px"/>
</td>
<td width="250" height="500px" align="center" valign="top">
<div id="thumb" style="overflow:scroll; height:500px;">
<div><img onclick="changPic(this)" src="pic1 (1).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (2).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (3).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (4).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (5).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (6).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (7).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (8).jpg"/></div>
<div><img onclick="changPic(this)" src="pic1 (9).jpg"/></div>
</div>
</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function changPic(ts)
{
//去传进来的（被点击了的）图片对象的路径
var a=ts.getAttribute("src");
var bigimag=document.getElementById("bigimage");
//bigimag.src=a;
bigimag.setAttribute("src",a);
}
</script>
举例3：QQ面板。
<head>
<style type="text/css">
#qqPane
{
width:250px;
border:1px solid navy;
}
.divTitle
{
background-color:navy;
color:white;
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
}
.divContent
{
height:300px;
background-color:#FF9;
display:none;
}
</style>
<script language="javascript">
function doShow(sid)
{
//找要显示的div
var dd = document.getElementById(sid);
//把所有divContent都给隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i=0;i<divs.length;i++)//遍历所有的div
{
if(divs[i].className=="divContent") //筛选出divContent
{
divs[i].style.display="none"; //把divContent统统隐藏
}
}
//切换显示状态
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display = "none";
}
}
</script>
</head>
<body>
<div id="qqPane">
<div class="divTitle" onclick="doShow('haoyou')">我的好友</div>
<div id="haoyou" class="divContent"></div>
<div class="divTitle" onclick="doShow('heimingdan')">黑名单</div>
<div id="heimingdan" class="divContent"></div>
<div class="divTitle" onclick="doShow('moshengren')">陌生人</div>
<div id="moshengren" class="divContent"></div>
</div>
</body>
（五）操作相关元素
相关元素：
1.obj.nextSibling;下一个元素（注意回车与空格)
例1：
<body>
<div id="d1">aaa</div><div id="d2">bbb</div><div id="d3">ccc</div>
</body>
<script language="javascript">
var x=document.getElementById("d1");
var y=x.nextSibling;
alert(y.innerHTML);
</script>
例2：
<body>
<div id="d1">aaa</div>
<div id="d2">bbb</div><div id="d3">ccc</div>
</body>
<script language="javascript">
var x=document.getElementById("d1");
var y=x.nextSibling;
alert(y.innerHTML);
</script>
注：若是后面有空格或回车等，则下个元素是空格或回车。
2.obj.previousSibling;上一个元素（注意回车与空格）
3.obj.parentNode父级元素。（只有一个）
例1：
<body>
<div>
<div id="d1">aaa
<div id="d2">bbb
<div id="d3">ccc</div>
</div>
</div>
</div>
</body>
<script language="javascript">
var x=document.getElementById("d3");
var y=x.parentNode;
alert(y.innerHTML);
</script>
例2：
<body>
<div>
<div id="d1">aaa</div>
<div id="d2">bbb</div>
<div id="d3">ccc</div>
</div>
</body>
<script language="javascript">
var x=document.getElementById("d2");
var y=x.parentNode;
y.style.border="5px red solid";
y.style.height="100px";
</script>
4.obj.childNodes所有的子级元（有很多个，是个数组）
例1：
<body>
<div>
<div id="d1">aaa<span>eee</span><div>fff</div></div>
<div id="d2">bbb</div>
<div id="d3">ccc</div>
</div>
</body>
<script language="javascript">
var x=document.getElementById("d1");
var y=x.childNodes;
alert(y.length); ///是3个（aaa,eee,fff）
</script>
如何在子级中找指定的元素？
1.遍历
例：
<body>
<div>
<div id="d1">aaa<span>eee</span><div>fff</div></div>
<div id="d2">bbb</div>
<div id="d3">ccc</div>
</div>
</body>
<script language="javascript">
var x=document.getElementById("d1");
var y=x.childNodes;
for(var i=0;i<y.length;i++)
{
if(y[i].tagName=="DIV")
{
y[i].style.backgroundColor="red";
}
}
</script>
2.obj.getElementsByxxxxx（obj.getElementsByTagname/Name）;
属性：
obj.firstChild ///第一个子元素
obj.lastChild ///最后一个子元素
obj.childNode[n] ///找第几个子元素
方法：
1、obj.appendChild(元素对象); //元素对象，不是一个HTML的字符串（插入到原来元素的后面）
2、d.insertBefore(要插入的元素对象,相对于哪个元素);
例如：x.insertBefore(n,x.childNodes[0]);
3、d.removeChild(要移除的元素对象);
例如：x.removeChild(x.childNodes[0]);
4、d.replaceChild(新元素，旧元素);
例如：x.replaceChild(n,x.childNodes[0]);
d.getElementsByxxx("id字符串");在子元素中找符合条件的元素
如何向元素中追加一个子元素？
1.造个元素。
var n = document.createElement("div"); //造元素
n.innerHTML = "this is a new div"; //设内容
n.style.backgroundColor="green"; //设样式
2.加进去。
d.appendChild(n); //插入到原来元素的后面
例<body>
<div>
<ul>
<li onclick="selectli(this)">山东</li>
<li onclick="selectli(this)">辽宁
<ul></ul>
</li>
<li onclick="selectli(this)">四川</li>
</ul>
</div>
<form action="" method="get">
<p>目标：<span id="dd"></span></p>
<p>新增：
<input id="txt" name="txt" type="text" />
<input name="addchild" type="button" value="添加子级" onclick="addzj()"/>
<input name="addsibling" type="button" value="添加同级" onclick="addtongji()"/>
</p>
</form>
</body>
</html>
<script language="javascript">
var node;//目标元素的对象
var parent;//目标元素的父元素
function selectli(li)
{
//把点击的这个元素记录下来
node=li;
//找”目标“后面的标签
var sp=document.getElementById("dd");
//操作“目标”后面的内容
sp.innerHTML=li.innerHTML;
}
function addzj()
{
//1.造个元素
var newnode=document.createElement("li");
newnode.innerHTML=document.getElementById("txt").value;
//2.追加到子元素
if(node!=null)
{
var uus=node.getElementsByTagName("ul"); //数组
var uu;
//判断是否有<Ul>,没有的话就建
if(uu==null)
{
uu=document.createElement("ul"); //元素
}
else
{
uu=uus[0];
}
uu.appendChild(newnode);
node.appendChild(uu);
}
//向子元素中追加newnode
}
function addtongji()
{
////先找到你要输入的地名：
// var x=document.getElementById("txt");
// var y=x.value;
//造个元素
var newnode=document.createElement("li");
newnode.innerHTML=document.getElementById("txt").value;
if(node!=null)
{
node.parentNode.insertBefore(newnode,node);
}
}
</script>
事件：
onclick ondbclick
onmouseover onmouseout
onkeydown onkeyup
onfocus onblur
onchange
例1：（onmouseover onmouseout）
1.如何为表格中所有的行，用代码加上同一个事件。
2.如何实现表格中奇偶行不同颜色。
3.如何实现光棒效果。
<head>
<style type="text/css">
#dd tr
{
background-color:#FFF;
}
</style>
<script language="javascript">
var bg;
function doover(tr)
{
bg=tr.style.backgroundColor;//记住这一行本来的颜色
tr.style.backgroundColor="red";
}
function doout(tr)
{
tr.style.backgroundColor=bg;
}
</script>
</head>
<body>
<form action="" method="get">
<table width="800" border="0" cellspacing="1" cellpadding="5" bgcolor="#000000" id="dd">
<tr onmouseover="doover(this)" onmouseout="doout(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript">
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
if(i%2!=0)
{
trs[i].style.backgroundColor="blue";
}
trs[i].setAttribute("onmouseover","doover(this)");
trs[i].setAttribute("onmouseout","doout(this)");
}
</script>
例2：导航栏（树状模型）的设定（onclick ondbclick）
<style type="text/css">
#menu ul
{
display:none;
}
#menu li
{
list-style-type:none;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<img src="jia.png" height="14px" class="prc"/>
<span>关于我们
<ul>
<li>公司介绍</li>
<li>公司新闻</li>
<li>公司地址</li>
</ul>
</span>
</li>
<li>
<img src="jia.png" height="14px" class="prc"/>
<span>产品服务
<ul>
<li>数码产品</li>
<li>家电产品</li>
<li>售后服务</li>
</ul>
</span>
</li>
<li>
<img src="jia.png" height="14px" class="prc"/>
<span>成功案例
<ul>
<li>家电系列</li>
<li>数码系列</li>
<li>家具系列</li>
</ul>
</span>
</li>
<li>
<img src="jia.png" height="14px" class="prc"/>
<span>会员管理
<ul>
<li>加入我们</li>
<li>会员注册</li>
</ul>
</span>
</li>
</ul>
</body>
</html>
<script language="javascript">
var ul=document.getElementById("menu");
for(var i=0;i<ul.childNodes.length;i++) //遍寻#mennu 下的所有子级
{
if(ul.childNodes[i].tagName=="LI") //如果找到子级中的LI
{
ul.childNodes[i].setAttribute("onclick","showsubmenu(this)"); //就给LI加上单击的事件
}
}
function showsubmenu(li)
{
var uls=li.getElementsByTagName("UL");
if(uls!=null)
{
if(uls[0].style.display!="block")
{
li.getElementsByTagName("img")[0].src="jian.png";
uls[0].style.display="block";
}
else
{
uls[0].style.display="none";
}
}
}
</script>
例3：论坛微博贴吧（onkeydown onkeyup）
<style type="text/css">
#zishu
{
color:red;
font-weight:bold;
}
</style>
<script language="javascript">
function showcount(tt)
{
var a=tt.value.length;
var b=140-a;
document.getElementById("zishu").innerHTML=b;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>请输入内容：<br/>
<label for="txtarea"></label>
<textarea name="txtarea" onkeyup="showcount(this)" id="txtarea" cols="80" rows="10" style="border:1px solid black;"></textarea>
<br/>
最多输入140字，你还可以输入<span id="zishu">140</span>字
<br/>
</p> <input type="button" name="btn" id="btn" value="发送" />
</form>
<p> </p>
</body>
</html>
例4：（onfocus onblur）
<script language="javascript">
function dofocus(txt)
{
txt.value="";
txt.style.color="black";
}
function doblur(txt)
{
if(txt.value.length==0)
{
txt.value="(必填)";
txt.style.color="#c0c0c0";
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>账号：
<label for="txtuid"></label>
<input type="text" name="txtuid" onfocus="dofocus(this)" onblur="doblur(this)" id="txtuid" value="(必填)" style="color:#CCC;"/>
</p>
<p>密码：
<label for="txtpwd"></label>
<input type="text" name="txtpwd" onfocus="dofocus(this)" onblur="doblur(this)" id="txtpwd" value="(必填)" style="color:#c0c0c0;"/>
</p>
<p>
<input type="submit" name="btn" id="btn" value="提交" />
</p>
</form>
</body>
</html>
正则表达式验证：
邮箱、身份证号、邮编、电话、手机号
邮箱：
1.有且只能含有一个@。
2.@后面至少有一个.
3.不能以@和.开头，不能以他们结尾。
4.@和.之间必须至少有一个字符。
5.如果有多个.的话，它们之间不能靠在一起。
使用正则表达式验证的步骤：
1.写正则表达式。
2.取要验证的字符串的值。
3.使用字符串的match()方法来判断该字符串是否满足正则表达式。
var reg = /^(\d{15}|\d{18})$/; //正则表达式
var email = "370111199203059087";
if(email.match(reg) == null)
{
alert("身份证格式错误");
}
else
{
alert("身份证格式正确");
}
正则表达式的限定符：——能看懂正则表达式即可。
1.正则表达式不使用引号引起来，而是使用//。
2.^——匹配开头。$——匹配结尾。
3.\d - 匹配一个数字
4.\w - 匹配一个字母或数字
5.{m,n}-把前面的表达式最少重复m次，最多重复n次。
6.{m,} - 把前面的表达式最少重复m次，最多不限。
7.｛m｝ - 把前面的表达式重复m次
8.[8,5,2] - 这个位置只能有8，5，2 中的一个。8，5，2数字的值和个数自己选择。
9.[0-9]- 等价于\d
10.[a-z,A-Z,0-9] 等价于\w
11.+等价于{1,}
12.*等价于{0,}
13.?等价于{0,1}
14.优先级()
15.转义\。
简化邮箱：\w+[@]\w+([.]\w+){1,2}
邮编：[1-9]\d{5}
身份证号：[1-9]\d{16}[0-9,X]
电话号：(\d{3,4}[-]|\(\d{3,4}\))?\d{7,8}
0533-3113118 （0533）3113118 010-23456789
