实现伸缩二级菜单
<!DOCTYPE HTML>
<html>
<head>
<title>实现伸缩二级菜单</title>
<meta charset="utf-8" />
<style>
li{
list-style: none;
}
li span{
padding-left: 20px;
cursor: pointer;
}
.open{
background:url(img/minus.png) no-repeat center left;
}
.closed{
background:url(img/add.png) no-repeat center left;
}
.hide{
height: 0;overflow: hidden;
}
.show{
height: 100px;
}
</style>
</head>
<body>
<ul class="tree">
<li>
<span class="open" >考勤管理</span>
<ul class="show">
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li><span class="closed" >信息中心</span>
<ul class="hide">
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li><span class="closed" >协同办公</span>
<ul class="hide">
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>
</body>
<script>
//找到class为tree的ul下所有的span,保存spanArr
var spans = document.querySelectorAll("ul.tree span");
//遍历spanArr中每一个span
for(var i=0;i<spans.length;i++){
//为当前span绑定单击事件为 toggle
spans[i].onclick =toggle;
}
//定义函数toggle 处理单击时触发的功能
function toggle(){
//如果当前子菜单是开着的，className为open
if(this.className == "open"){
//修改span的className为closed；
this.className = "closed";
//获取当前span的下一个兄弟，className为hide
this.nextElementSibling.className ="hide";
}
else{
//否则 当前子菜单关闭
//找到class为tree的ul下class为open的span 存储在openSpan
var openSpan =document.querySelector("ul.tree span.open");
if(openSpan){//如果openSpan不为null
//修改span的className为closed
openSpan.className="closed";
//获取当前span下一个兄弟 修改className为hide
openSpan.nextElementSibling.className="hide";
}
//修改当前span的className为open
this.className="open";
//获取当前span的下一个兄弟，修改className为show
this.nextElementSibling.className="show";
}
}
</script>
</html>
实现带样式的表单验证
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>实现带样式的表单验证</title>
<style>
table{width:700px}
/*父元素下的第1个，第n个，最后一个td子元素*/
td:first-child{width:60px}
/*IE不支持nth-child*/
td:nth-child(2){width:200px}
/*IE*/
td:first-child+td{width:200px}
/*IE不支持--可以靠总宽度来调节
td:last-child{width:340px}*/
td span{color:red}
.vali_Info{/* 页面初始，验证消息不显示 */
display:none;
}
.txt_focus{/*当文本框获得焦点时穿上*/
border-top:2px solid black;
border-left:2px solid black;
background-color: #ffcc00;
}/*当文本框失去焦点时脱下*/
.vali_success,.vali_fail{
background-repeat:no-repeat;
background-position:left center;
display:block;
}
/* 验证消息：验证通过时的样式 */
.vali_success{
background-image:url("img/ok.png");
padding-left:20px;
width:0px;height:20px;
overflow:hidden;
}
/* 验证消息：验证失败时的样式 */
.vali_fail{
background-image:url("img/warning.png");
border:1px solid red;
background-color:#ddd;
color:Red;
padding-left:30px;
}
</style>
</head>
<body>
<form id="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td><td>
<input name="username"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">
10个字符以内的字母、数字或下划线的组合
</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd"/>
<span>*</span>
</td>
<td>
<div class="vali_Info">6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存"/>
<input type="reset" value="重填"/>
</td>
</tr>
</table>
</form>
<script>
// 获得name为username的元素 获取密码框
var txtName = document.getElementsByName("username")[0];
var txtPwd = document.getElementsByName("pwd")[0];
// 获取提示信息的元素对象 密码的规范元素
// var div =txtName.parentNode.nextElementSibling.firstElementChild;
// var divP = txtPwd.parentNode.nextElementSibling.firstElementChild;
// 为txtName添加获取焦点事件
txtName.onfocus =function(){
getFocus(this);
};
// 绑定获取焦点事件
txtPwd.onfocus=function(){
getFocus(this);
}
function getFocus(txt){//绑定获取焦点事件
// 为当前元素设置txt_focus的样式
txt.className = 'txt_focus';
// 显示规则提示,查找当前元素父元素兄弟元素的第一个子元素，将其样式清零
txt.parentNode.nextElementSibling.firstElementChild.className = "";
}
// 失去焦点事件 依然绑定在txtName
txtName.onblur=function(){ //this ==> txtName
// 定义规则正则reg:10个字符以内的字母、数字或下划线的组合 \w
vali(this,/^\w{1,10}$/);
}
// 绑定失焦事件
txtPwd.onblur=function(){// this ==> txtPwd
// 定义规则正则reg:6个数字 \d
vali(this,/^\d{6}$/);
}
function vali(txt,reg){
var msgDiv = txt.parentNode.nextElementSibling.firstElementChild;
// 将获取焦点时的样式清空
txt.className="";
// 判断输入的内容是否符合规范
// console.log(reg.test(this.value))
if(reg.test(txt.value)){//检验通过
// 正确的提示
msgDiv.className = "vali_success";
}else{//检验失败
// 错误的提示
msgDiv.className = "vali_fail";
}
}
</script>
</body>
</html>
读取并修改元素的属性
<!DOCTYPE HTML> <html> <head> <title>读取并修改元素的属性</title> <meta charset="utf-8" /> <style> *{ margin:0; padding: 0; } #tab li{ float: left; list-style: none; width: 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container{ position: relative; } #content1,#content2,#content3{ width: 300px; height: 100px; padding:30px; position: absolute; top: 40px; left: 0; } #tab1,#content1{ background-color: #ffcc00; } #tab2,#content2{ background-color: #ff00cc; } #tab3,#content3{ background-color: #00ccff; } .foreground { z-index: 1; } </style> <script> </script> </head> <body> <h2>实现多标签页效果</h2> <ul id="tab"> <li id="tab1">10元套餐</li> <li id="tab2">30元套餐</li> <li id="tab3">50元包月</li> </ul> <div id="container"> <!--<div id="content1" class="foreground">--> <!--强调：使用style.设置的属性，默认格式都是: "属性: 值;"--> <div id="content1" style="z-index: 1;"> 10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟 </div> <div id="content2"> 30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟 </div> <div id="content3"> 50元包月详情：<br /> 每月无限量随心打 </div> </div> <script> //给tab下所有的li添加单击事件 var lis = document.querySelectorAll("#tab>li"); for(var i=0;i<lis.length;i++){ //绑定单击事件show lis[i].onclick = show; } function show(){ //找id为container下所有的div var divs=document.querySelectorAll("#container>div"); //便历 修改显示属性 for(var i=0;i<divs.length;i++){ //清除当前div的zIndex属性 divs[i].style.zIndex = ""; } //获取当前li的id,将其中的tab替换为content,保存变量id var id = this.id.replace("tab","content"); //获取div的id值同id的，设置其zIndex为1 document.getElementById(id).style.zIndex="1"; } </script> </body> </html>