实现伸缩二级菜单
<!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{700px} /*父元素下的第1个,第n个,最后一个td子元素*/ td:first-child{60px} /*IE不支持nth-child*/ td:nth-child(2){200px} /*IE*/ td:first-child+td{200px} /*IE不支持--可以靠总宽度来调节 td:last-child{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; 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; 80px; height: 40px; line-height: 40px; cursor: pointer; text-align: center; } #container{ position: relative; } #content1,#content2,#content3{ 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>