Javascript整理笔记(第二节)

技术2025-05-20 45

window对象学习

<html> <head> <title>window对象学习</title> <meta charset="UTF-8"/>   <script type="text/javascript"> //框体方法学习： //警告框 function testAlert(){ var a=window.alert("我是警告框"); alert(a); } //确认框 function testConfirm(){ var flag=window.confirm("你确定要删除吗?"); alert(flag); } //提示框 function testPrompt(){ var str=window.prompt("请输入昵称："); alert(str); } /*----------------------------------------------------------------------------------------------*/ var idi; var ids //定时执行 function testSetTimeout(){ idi=window.setTimeout(function(){ alert("我是定时执行"); },3000); } //间隔执行 function testSetInterval(){ ids=window.setInterval(function(){ alert("我是间隔执行"); },2000); } //停止当前的定时方法 function testClearTimeout(){ window.clearTimeout(idi); } function testClearInterval(){ window.clearInterval(ids); } </script> </head> <body> <h3>window对象学习</h3> <hr /> <input type="button" name="" id="" value="测试警告框" onclick="testAlert();" /> <input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" /> <input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/> <hr /> <input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/> <input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/> <input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" /> <input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" /> </body> </html> <html> <head> <title>js的window对象学习2</title> <meta charset="UTF-8"/>   <script type="text/javascript"> //1、子页面方法 function testOpen(){ window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes'); } //2、子页面调用父页面的函数 function testFather(){ alert("父页面"); } /*----------------------------------------------------------------------------*/ //1、地址栏属性学习--location function testLocation(){ window.location.href="http://www.baidu.com"; } function testLocation2(){ window.location.reload(); } //2、历史记录属性 function testHistory(){ window.history.forward(); } function testHistory2(){ window.history.go(0); } //3、屏幕属性学习 function testScreen(){ var x=window.screen.width; var y=window.screen.height; alert(x+":"+y) } //4、浏览器配置属性 function testNa(){ alert(window.navigator.userAgent); } </script> </head> <body> <h3>js的window对象学习2</h3> <hr /> <input type="button" name="" id="" value="测试open" onclick="testOpen()"/> <hr /> <input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" /> <input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" /> <br /><br /> <input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/> <input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/> <br /><br /> <input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" /> <input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" /> </body> </html>

js的document对象

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document对象学习</title>   <script type="text/javascript"> //document获取元素对象 //直接方式 //id方式 function testGetEleById(){ var inp=window.document.getElementById("uname"); alert(inp); } //name方式 function testGetEleByName(){ var favs=document.getElementsByName("fav"); alert(favs); } //标签名 function testGetEleByTagName(){ var inps=document.getElementsByTagName("input"); alert(inps); } //class属性 function testGetEleByClassName(){ var inps=document.getElementsByClassName("common"); alert(inps.length); } //间接获取方式 //父子关系 function testParent(){ //获取父级元素对象 var showdiv=document.getElementById("showdiv"); //获取所有的子元素对象数组 var childs=showdiv.childNodes; alert(childs.length); } //子父关系 function testChild(){ //获取子元素对象 var inp=document.getElementById("inp"); var div=inp.parentNode; alert(div); } //兄弟关系 function testBrother(){ var inp=document.getElementById("inp"); var preEle= inp.previousSibling;//弟获取兄 var nextEle=inp.nextSibling;//兄获取弟 alert(preEle+":::"+nextEle); } </script> <style type="text/css"> .common{} #showdiv{ border: solid 2px orange; width: 300px; height: 300px; } </style> </head> <body> <h3>document对象的概念和获取元素对象学习</h3> 直接获取方式学习：<br /> <input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()" /> <input type="button" name="" id="" value="测试获取HTML元素对象---name" onclick="testGetEleByName()" /> <input type="button" name="" id="" value="测试获取HTML元素对象---TagName" onclick="testGetEleByTagName()" /> <input type="button" name="" id="" value="测试获取HTML元素对象---className" onclick="testGetEleByClassName()" /> <hr /> 用户名：<input type="text" name="uname" id="uname" value="" /><br /><br /> <input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌 <input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞 <input type="checkbox" name="fav" id="fav" value="" />睡觉 <input type="checkbox" name="fav" id="fav" value="" />打游戏 <hr /> 间接获取方式学习：<br /> <input type="button" name="" id="" value="测试父子关系" onclick="testParent()"/> <input type="button" name="" id="" value="测试子父关系" onclick="testChild()"/> <input type="button" name="" id="" value="测试兄弟关系" onclick="testBrother()"/> <hr /> <div id="showdiv"><input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" /> <input type="" name="" id="" value="" /> <input type="" name="" id="" value="" /> <input type="" name="" id="" value="" /> <input type="" name="" id="" value="" /> </div> </body> </html>

该段代码复制过去自己测试每个元素之间的关系，如下图：

js操作元素的属性

<html> <head> <title>js操作HTML的元素属性</title> <meta charset="UTF-8"/>   <script type="text/javascript"> //声明函数---固有属性 //获取属性值 function testField(){ //获取元素对象 var inp=document.getElementById("uname"); //获取元素属性值 alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value); } //修改元素属性值 function testField2(){ //获取元素对象 var inp=document.getElementById("uname"); //修改元素属性 inp.value="哈哈"; inp.type="button"; } //声明函数---自定义属性 //获取 function testOwnField(){ //获取元素对象 var inp=document.getElementById("uname"); //获取自定义属性的值 alert(inp.getAttribute("abc")); } //修改 function testOwnField2(){ //获取元素对象 var inp=document.getElementById("uname"); //修改自定义属性的值 inp.setAttribute("abc","呵呵"); } //使用自定义方式操作固有属性 function testOper(){ //获取元素对象 var inp=document.getElementById("uname"); //操作对象属性 alert(inp.getAttribute("type")); alert(inp.getAttribute("value")); } </script> </head> <body> <h3>js操作HTML的元素属性</h3> <input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()" /> <input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()" /> <input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()" /> <input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()" /> <input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()" /> <hr /> 用户名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/> </body> </html>

js操作元素的内容

<html> <head> <title>js操作元素内容学习</title> <meta charset="UTF-8"/>  <style type="text/css"> #div01{ width: 200px; height: 200px; border: solid 1px orange; } </style>   <script type="text/javascript"> //获取元素内容 function getContext(){ //获取元素对象 var div=document.getElementById("div01"); //获取元素内容 alert(div.innerHTML); alert(div.innerText); } //修改元素内容 function updateContext(){ //获取元素对象 var div=document.getElementById("div01"); //修改元素对象内容 div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>"; } function updateContext2(){ //获取元素对象 var div=document.getElementById("div01"); //修改元素对象内容 div.innerText="<b>你先上，皇军给你殿后，八嘎</b>"; } </script> </head> <body> <h3>js操作元素内容学习</h3> <input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText" onclick="getContext()"/> <input type="button" name="" id="" value="测试修改元素内容--innerHTML" onclick="updateContext()"/> <input type="button" name="" id="" value="测试修改元素内容--innerText" onclick="updateContext2()"/> <hr /> <div id="div01"> <b>皇军，前面有八路的干活。</b> <b>皇军，前面有八路的干活。</b> </div> </body> </html>

js操作元素的样式

<html> <head> <title>js操作元素的样式</title> <meta charset="UTF-8"/>  <style type="text/css"> #showdiv{ width: 200px; height: 200px; border: solid 1px; } .common{ width: 200px; height: 200px; border: solid 1px; } .common2{ width: 200px; height: 200px; border: solid 1px; background-color: aqua; } </style>   <script type="text/javascript"> //js操作元素样式 //js给元素操作样式---style function testOperCss(){ //获取元素对象 var showdiv=document.getElementById("showdiv"); //添加元素样式 showdiv.style.backgroundColor="#FFA500"; //js修改元素样式 showdiv.style.border="solid 2px red"; //js删除样式 showdiv.style.border=""; } //js操作样式--className function testOperCss2(){ //获取元素对象 var div01=document.getElementById("div01"); //获取 alert(div01.className); //添加或者修改 div01.className="common2"; //删除 div01.className=""; } </script> </head> <body> <h3>js操作元素的样式</h3> <input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" /> <input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" /> <hr /> <div id="showdiv" style="border: solid 2px blue;"> </div> <div id="div01" class="common"> </div> </body> </html>

js操作元素的文档结构

<html> <head> <title>js操作元素的文档结构</title> <meta charset="UTF-8"/>   <script type="text/javascript"> function testAdd(){ //获取元素对象 var showdiv=document.getElementById("showdiv"); //给div追加上传按钮 showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' οnclick='delInp(this)'/></div>"; } function delInp(btn){ //获取父级div var showdiv=document.getElementById("showdiv"); //获取要删除的子div var cdiv=btn.parentNode; //父div删除子div showdiv.removeChild(cdiv); } </script> </head> <body> <h3>js操作元素的文档结构</h3> <input type="button" name="" id="" value="继续上传" onclick="testAdd()"/> <hr /> <div id="showdiv"> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js操作文档结构2</title>   <script type="text/javascript"> function testOper2(){ //获取元素对象 var showdiv=document.getElementById("showdiv"); //创建input元素对象 var inp=document.createElement("input"); inp.type="file"; //创建按钮元素对象 var btn=document.createElement("input"); btn.type="button"; btn.value="删除"; btn.onclick=function(){ showdiv.removeChild(inp); showdiv.removeChild(btn); showdiv.removeChild(br); } //创建换行符 var br=document.createElement("br"); //将创建的元素对象存放到div中 showdiv.appendChild(inp); showdiv.appendChild(btn); showdiv.appendChild(br); } </script> </head> <body> <h3>js操作文档结构2</h3> <input type="button" name="" id="" value="继续上传" onclick="testOper2()"/> <hr /> <div id="showdiv"> </div> </body> </html>

js操作form表单

js操作form表单操作，数据不会提交。 --> <script type="text/javascript"> // function testForm(){ //获取form表对象 var fm=document.getElementById("fm"); //alert(fm); //使用form表单的name属性值来获取 var frm=document.frm; //alert(frm===fm); //获取form表单元素对象集合 //alert(fm.elements.length); //form表单的常用方法 //fm.submit();很重要 fm.reset(); //form的属性操作 fm.action="http://www.baidu.com/s"; } </script> </head> <body> <h3>js操作form表单</h3> <input type="button" name="" id="" value="测试操作form" onclick="testForm()" /> <hr /> <form action="#" method="get" id="fm" name="frm"> <b>用户名：</b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br /><br /> 密码： <input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br /><br /> <input type="submit" name="" id="" value="登录" /> </form> </body> </html>

document操作表单元素

<html> <head> <title>操作表单元素</title> <meta charset="UTF-8"/>   <script type="text/javascript"> //多选框操作 function testCheckBox(){ //获取所有的多选元素对象数组 var favs=document.getElementsByName("fav"); //遍历数组 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ alert(favs[i].value+":"+favs[i].checked); } } } //全选 function testCheckBox2(){ var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++){ favs[i].checked=true; } } //反选 function testCheckBox3(){ var favs=document.getElementsByName("fav"); for(var i=0;i<favs.length;i++){ favs[i].checked=!favs[i].checked; } } //操作下拉框 function testSel(){ //获取下拉框对象 var sel=document.getElementById("address"); //alert(sel.value); //获取option对象集合 var os=sel.options; for(var i=0;i<os.length;i++){ if(os[i].selected){ alert(os[i].value+":"+os[i].text); } } } </script> </head> <body> <h3>操作表单元素</h3> <hr /> <b>操作多选框</b><br /><br /> <input type="checkbox" name="fav" id="fav" value="1" />远走高飞<br /> <input type="checkbox" name="fav" id="fav" value="2" />当<br /> <input type="checkbox" name="fav" id="fav" value="3" />李白<br /> <input type="checkbox" name="fav" id="fav" value="4" />杜甫<br /> <input type="checkbox" name="fav" id="fav" value="5" />see you again<br /> <input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br /> <input type="button" name="" id="" value="播放" onclick="testCheckBox()"/> <input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/> <input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/> <hr /> <select name="" id="address" onchange="testSel()"> <option value="0">--请选择--</option> <option value="1" >北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> </body> </html>

event对象的学习

<html> <head> <title>event对象学习</title> <meta charset="UTF-8"/>  <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } </style> <script type="text/javascript"> function getMouse(event){ //获取event对象 var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象 var x=eve.clientX; var y=eve.clientY; alert(x+":"+y); } function getKey(event){ //获取event对象 var eve=event || window.event;//因为浏览器差异问题，使用此种方式获取event对象 var code=eve.keyCode; alert(code); } </script> </head> <body> <h3>event对象学习</h3> <hr /> <div id="showdiv" onmousemove="getMouse(event)"> </div> <br /><br /> <input type="text" name="" id="" value="" onkeydown="getKey(event)"/> </body> </html>

大概效果就是鼠标停留在方框中时，会弹出该鼠标停留的坐标。

js表单校验

<html> <head> <title>js校验form表单</title> <meta charset="UTF-8"/>  <style type="text/css"> /*设置背景图片*/ body{ background-image: url(img/b.jpg); } /*设置tr样式*/ tr{ height: 40px; } /*设置div样式*/ #showdiv{ border: solid 1px #FF0000; border-radius: 10px; width: 500px; margin: auto; margin-top: 40px; } /*设置table*/ table{ margin: auto; color: white; } span{ font-size:13px; } #codeSpan{ font-size:20px; } </style>  <script type="text/javascript"> //常见验证码 function createCode(){ //创建随机四位数字 var code=Math.floor(Math.random()*9000+1000); //获取元素对象 var span=document.getElementById("codeSpan"); //将数字存放到span中 span.innerHTML=code; } //验证用户名 function checkUname(){ //获取用户的用户名信息 var uname=document.getElementById("uname").value; //创建校验规则 var reg=/^[\u4e00-\u9fa5]{2,4}$/ //获取span对象 var span=document.getElementById("unameSpan"); //开始校验 if(uname=="" || uname==null){ //输出校验结果 span.innerHTML="用户名不能为空"; span.style.color="red"; return false; }else if(reg.test(uname)){ //输出校验结果 span.innerHTML="用户名ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="用户名不符合规则"; span.style.color="red"; return false; } } //验证密码 function checkPwd(){ //获取用户的密码信息 var pwd=document.getElementById("pwd").value; //创建校验规则 var reg=/^[a-z]\w{5,7}$/; //获取span对象 var span=document.getElementById("pwdSpan"); //开始校验 if(pwd=="" ||pwd==null){ //输出校验结果 span.innerHTML="*密码不能为空"; span.style.color="red"; return false; }else if(reg.test(pwd)){ //输出校验结果 span.innerHTML="*密码ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML="*密码格式不正确"; span.style.color="red"; return false; } checkPwd2(); } //校验确认密码 function checkPwd2(){ //获取第一次密码 var pwd=document.getElementById("pwd").value; //获取确认密码 var pwd2=document.getElementById("pwd2").value; //获取span对象 var span=document.getElementById("pwd2Span"); //比较两次密码是否相同 if(pwd2==""||pwd2==null){ span.innerHTML="确认密码不能为空"; span.style.color="red"; return false; }else if(pwd==pwd2){ span.innerHTML="确认密码ok"; span.style.color="green"; return true; }else{ span.innerHTML="两次密码不一致"; span.style.color="red"; return false; } } //校验手机号 function checkPhone(){ return checkField("phone",/^1[3,4,5,7,8]\d{9}$/); } //校验邮箱 function checkMail(){ return checkField("mail",/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/ ) } //校验籍贯 function checkAddress(){ //获取用户选择的数据 var sel=document.getElementById("address").value; //获取span var span=document.getElementById("addressSpan"); //校验 if(sel!=0){ span.innerHTML="籍贯选择成功"; span.style.color="green"; return true; }else{ span.innerHTML="籍贯不能为请选择"; span.style.color="red"; return false; } } //校验爱好 function checkFav(){ //获取所有的爱好 var favs=document.getElementsByName("fav"); //获取span var span=document.getElementById("favSpan"); //遍历 for(var i=0;i<favs.length;i++){ if(favs[i].checked){ span.innerHTML="爱好选择成功"; span.style.color="green"; return true; } } span.innerHTML="爱好至少选则一项"; span.style.color="red"; return false; } //校验是否同意公司协议 function checkAgree(){ document.getElementById("sub").disabled=!document.getElementById("agree").checked; } //提交判断 function checkSub(){ checkUname(); checkPwd(); checkPwd2(); checkPhone(); checkMail(); checkAddress(); checkFav(); return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav(); } /*-------------------------------------------------------------------------------------------------*/ //封装校验:相同的保留，不同的传参。 function checkField(id,reg){ //获取用户数据 var inp=document.getElementById(id); var va=inp.value; var alt=inp.alt; //创建校验规则 //获取span对象 var span=document.getElementById(id+"Span") //开始校验 if(va=="" ||va==null){ //输出校验结果 span.innerHTML=alt+"不能为空"; span.style.color="red"; return false; }else if(reg.test(va)){ //输出校验结果 span.innerHTML=alt+"ok"; span.style.color="green"; return true; }else{ //输出校验结果 span.innerHTML=alt+"不符合规则"; span.style.color="red"; return false; } } </script> </head> <body onload="createCode()"> <div id="showdiv"> <form action="#" method="get" onsubmit="return checkSub()"> <table> <tr> <td width="80px">用户名:</td> <td width="200px"> <input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名"/><span id="unameSpan">*2-4位汉字</span> </td> </tr> <tr> <td>密码:</td> <td> <input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()"/> <span id="pwdSpan"></span> </td> </tr> <tr> <td>确认密码:</td> <td> <input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()"/> <span id="pwd2Span"></span> </td> </tr> <tr> <td>手机号:</td> <td> <input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/> <span id="phoneSpan"></span> </td> </tr> <tr> <td>邮箱：</td> <td> <input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()"/> <span id="mailSpan"></span> </tr> <tr> <td>性别</td> <td> 男 <input type="radio" name="sex" id="sex" value="0" checked="checked"/> 女 <input type="radio" name="sex" id="sex" value="1" /> </td> </tr> <tr> <td>籍贯:</td> <td> <select name="address" id="address" onchange="checkAddress()"> <option value="0">--请选择--</option> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <span id="addressSpan"></span> </td> </tr> <tr> <td>爱好:</td> <td> <input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL <input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉 <input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br /> <input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆 <input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影 <input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌 <span id="favSpan"></span> </td> </tr> <tr> <td>个人介绍:</td> <td> <textarea name="intro" rows="4" cols="40" id="intro"></textarea> </td> </tr> <tr> <td>验证码:</td> <td> <input type="text" name="code" id="code" value="" style="width: 100px;"/>      <span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></span> </td> </tr> <tr> <td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()"/>是否同意本公司协议</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled"/></td> </tr> </table> </form> </div> </body> </html>

效果图：动态监听鼠标或键盘事件

js操作表格

<html> <head> <title>操作表格</title> <meta charset="UTF-8"/>   <style type="text/css"> body{ text-align: center; } /*设置表格居中*/ #ta{ margin: auto; } /*设置表格的行样式*/ #ta tr{ height: 35px; } </style>  <script type="text/javascript"> //声明删除行 function delRow(btn){ //获取table对象 var ta=document.getElementById("ta"); //获取要删除的行对象 var tr=btn.parentNode.parentNode; //删除行 ta.deleteRow(tr.rowIndex); } //修改功能 function updateRow(btn){ //获取单元格对象 //获取行对象 var tr=btn.parentNode.parentNode; //获取行对象 var cell=tr.cells[3]; //判断cell.innerHTML的值是否是数字 if(!isNaN(Number(cell.innerHTML))){ //修改单元格内容 cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' οnblur='updateRow2(this)'/>"; } } function updateRow2(inp){ //获取单元格对象 var cell=inp.parentNode; //实现保存 cell.innerHTML=inp.value; } /*---------------------------------------------------------------------------------*/ //选择删除 function chooseDel(){ //获取表格对象 var ta=document.getElementById("ta"); //获取要删除的行号 var chks=document.getElementsByName("chk"); for(var i=1;i<chks.length;i++){ if(chks[i].checked){ //删除行 ta.deleteRow(i); i--; } } } //添加行 function addRow(){ //获取table表格对象 var ta=document.getElementById("ta"); //添加行 var tr=ta.insertRow(1); //添加单元格 var cell0=tr.insertCell(0); cell0.innerHTML="<input type='checkbox' name='chk'/>"; var cell1=tr.insertCell(1); cell1.innerHTML=document.getElementById("uname").value; var cell2=tr.insertCell(2); cell2.innerHTML="李思"; var cell3=tr.insertCell(3); cell3.innerHTML="49.88"; var cell4=tr.insertCell(4); cell4.innerHTML="5"; var cell5=tr.insertCell(5); cell5.style.textAlign="center"; cell5.innerHTML="<input type='button' value='修改数量' οnclick='updateRow(this)'/><input type='button' value='删除' οnclick='delRow(this)'/>"; } //复制行 function copyRow(){ //获取表格对象 var ta=document.getElementById("ta"); //获取选择行对象 var chks=document.getElementsByName("chk") for(var i=0;i<chks.length;i++){ if(chks[i].checked){ var tr=ta.insertRow(ta.rows.length); //复制行 tr.innerHTML=ta.rows[i].innerHTML; } } } //全选 function chooseAll(){ var ck=document.getElementById("ck"); var chks=document.getElementsByName("chk"); if(ck.checked){ for(var i=0;i<chks.length;i++){ chks[i].checked=true; } }else{ for(var i=0;i<chks.length;i++){ chks[i].checked=false; } } } //隔行变色 function operCss(){ //获取所有的行对象数组 var trs=document.getElementById("ta").rows; //遍历 for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="red"; }else{ trs[i].style.backgroundColor="green"; } } } </script> </head> <body> <h3 align="center">操作表格学习</h3> <input type="button" name="" id="" value="删除" onclick="chooseDel()"/> <input type="button" name="" id="" value="添加行" onclick="addRow()"/> <input type="button" name="" id="" value="复制行" onclick="copyRow()"/> <input type="button" name="" id="" value="隔行变色" onclick="operCss()"/> 书名：<input type="text" name="uname" id="uname" value="" /> <hr /> <table border="1px" id="ta"> <tr style="text-align: center;font-weight: bold;"> <td width="50px" align="left"><input type="checkbox" name="chk" value="0" id="ck" onclick="chooseAll()"/></td> <td width="200px">书名</td> <td width="100px">作者</td> <td width="100px">价格</td> <td width="200px">购买数量</td> <td width="200px" >操作</td> </tr> <tr id="t1"> <td><input type="checkbox" name="chk" id="chk" value="0" /></td> <td>java从入门到放弃</td> <td>wollo</td> <td>43.50</td> <td>3</td> <td align="center"> <input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/> <input type="button" name="" id="" value="删除" onclick="delRow(this)"/> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="chk" value="1" /></td> <td>javaScript入门</td> <td>高淇</td> <td>77.60</td> <td>2</td> <td align="center"> <input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/> <input type="button" name="" id="" value="删除" onclick="delRow(this)"/> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="chk" value="2" /></td> <td>Spring入门</td> <td>卢俊杰</td> <td>78.88</td> <td>3</td> <td align="center"> <input type="button" name="" id="" value="修改数量" onclick="updateRow(this)"/> <input type="button" name="" id="" value="删除" onclick="delRow(this)"/> </td> </tr> </table> </body> </html>

模拟淘宝

<html> <head> <title>模拟淘宝网</title> <meta charset="UTF-8"/>  <script type="text/javascript"> //创建函数进行照片的联动和样式设置 function operInImg(img,src){ //设置图片的样式 img.style.border="solid 1px"; //设置大图的img路径 //获取大图对象 var big=document.getElementById("big"); //设置路径 big.src="img/"+src; } function operOutImg(img){ img.style.border=""; } </script>  <style type="text/css"> /*设置div的样式*/ #showdiv{ width: 370px; height: 400px; border: solid 1px; border-radius: 20px; } /*设置table的样式*/ #ta{ margin: auto; margin-top: 10px; } </style> </head> <body> <div id="showdiv"> <table width="349px" id="ta"> <tr height="300px"> <td colspan="5"><img src="img/show1_big.jpg" id="big"/></td> </tr> <tr height="60px"> <td><img src="img/show1.jpg" onmouseover="operInImg(this,'show1_big.jpg')" onmouseout="operOutImg(this)"/></td> <td><img src="img/show2.jpg" onmouseover="operInImg(this,'show2_big.jpg')" onmouseout="operOutImg(this)"/></td> <td><img src="img/show3.jpg" onmouseover="operInImg(this,'show3_big.jpg')" onmouseout="operOutImg(this)"/></td> <td><img src="img/show4.jpg" onmouseover="operInImg(this,'show4_big.jpg')" onmouseout="operOutImg(this)"/></td> <td><img src="img/show5.jpg" onmouseover="operInImg(this,'show5_big.jpg')" onmouseout="operOutImg(this)"/></td> </tr> </table> </div> </body> </html>

大概效果是鼠标停留在下面的某个小图，则方框里显示对应的大图！！

Processed: 0.010, SQL: 9