<html><head><title>window对象学习</title><meta charset="UTF-8"/><!--BOM浏览器对象模型：是规范浏览器对js语言的支持(js调用浏览器本身的功能)。BOM的具体实现是window对象 window对象使用学习：1、window对象不用new，直接进行使用即可，类似Math的使用方式，window关键字可以省略不写。2、框体方法alert:警告框 提示一个警告信息，没有返回confirm:确认框 提示用户选择一项操作（确定/取消）点击确定 返回true点击取消 返回falseprompt:提示框， 提示用某个信息的录入或者说收集点击确定，返回当前用书录入的数据，默认返回空字符串点击取消,返回null3、定时和间隔执行方法setTimeout:指定的时间后执行指定的函数参数1：函数对象参数2：时间，单位毫秒。返回值：返回当前定时器的idsetInterval:每间隔指定的时间执行指定的函数参数1：函数对象参数2：时间，单位毫秒。返回值：返回当前间隔器的idclearTimeout:用来停止指定的定时器参数：定时器的id clearInterval:用来停止指定的间隔器参数：间隔器的id--><!--声明js代码域--><script type="text/javascript">//框体方法学习：//警告框function testAlert(){var a=window.alert("我是警告框");alert(a);}//确认框function testConfirm(){var flag&#firm("你确定要删除吗?");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"/><!--js的window对象学习1、子窗口方法window.open('子页面的资源(相对路径)','打卡方式','配置');示例：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');注意:关闭子页面的方法window.close(),但是此方法只能关闭open方法打开的子页面。2、子页面调用父页面的函数window.opener.父页面的函数js的window对象的常用属性地址栏属性:locationwindow.location.href="新的资源路径（相对路径/URL）"load()重新加载页面资源历史记录属性window.history.forward() 页面资源前进，历史记录的前进。window.history.back() 页面资源后退，历史记录后退(index) 跳转到指定的历史记录资源注意(0)相当于刷新。屏幕属性window.srceen.width;//获取屏幕的宽度分辨率window.screen.height;//获取屏幕的高度分辨率浏览器配置属性主体面板属性(document)--><!--声明js代码域--><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、地址栏属性学习--locationfunction testLocation(){window.location.href="";}function testLocation2(){load();}//2、历史记录属性function testHistory(){window.history.forward();}function testHistory2(){(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>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>document对象学习</title><!--document对象学习:1、document对象的概念浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。2、使用document获取HTML元素对象直接获取方式：通过id通过name属性值通过标签名通过class属性值间接获取方式：父子关系子父关系兄弟关系--><!--声明js代码域--><script type="text/javascript">//document获取元素对象//直接方式//id方式function testGetEleById(){var inp=ElementById("uname");alert(inp);} //name方式function testGetEleByName(){var favs&#ElementsByName("fav");alert(favs);} //标签名function testGetEleByTagName(){var inps&#ElementsByTagName("input");alert(inps);}//class属性function testGetEleByClassName(){var inps&#ElementsByClassName("common");alert(inps.length);}//间接获取方式//父子关系function testParent(){//获取父级元素对象var showdiv&#ElementById("showdiv");//获取所有的子元素对象数组var childs=showdiv.childNodes;alert(childs.length);}//子父关系function testChild(){//获取子元素对象var inp&#ElementById("inp");var div=inp.parentNode;alert(div);}//兄弟关系function testBrother(){var inp&#ElementById("inp");var preEle= inp.previousSibling;//弟获取兄var nextEle&#Sibling;//兄获取弟alert(preEle+":::"+nextEle);}</script><style type="text/css">mon{}#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>
该段代码复制过去自己测试每个元素之间的关系，如下图：
<html><head><title>js操作HTML的元素属性</title><meta charset="UTF-8"/><!--js操作HTML元素属性学习：获取元素对象操作元素属性获取：元素对象名.属性名//返回当前属性的属性值。----固有元素对象名.getAttribute("属性名");//返回自定义属性的值-----自定义修改元素对象名.属性名=属性值元素对象名.setAttribute("属性名","属性值");//修改自定义属性的值----自定义注意：尽量的不要去修改元素的id值和name属性值。使用自定义方式获取固有属性内容，value的值获取的是默认值，不能够获取到实时的用户数据。--><!--声明js代码域--><script type="text/javascript">//声明函数---固有属性//获取属性值function testField(){//获取元素对象var inp&#ElementById("uname");//获取元素属性值pe+":"+inp.name+":"+inp.id+":"+inp.value); }//修改元素属性值function testField2(){//获取元素对象var inp&#ElementById("uname");//修改元素属性inp.value="哈哈";pe="button";}//声明函数---自定义属性//获取function testOwnField(){//获取元素对象var inp&#ElementById("uname");//获取自定义属性的值Attribute("abc"));}//修改function testOwnField2(){//获取元素对象var inp&#ElementById("uname");//修改自定义属性的值inp.setAttribute("abc","呵呵");}//使用自定义方式操作固有属性function testOper(){//获取元素对象var inp&#ElementById("uname");//操作对象属性Attribute("type"));Attribute("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>
<html><head><title>js操作元素内容学习</title><meta charset="UTF-8"/><!--声明css--><style type="text/css">#div01{width: 200px;height: 200px;border: solid 1px orange;} </style><!--操作元素内容学习：获取元素对象获取元素对象名.innerHTML//返回当前元素对象的所有内容，包括HTML标签元素对象名.innerHTML//返回当前元素对象的文本内容，不包括HTML标签修改元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。 --><!--声明js代码域--><script type="text/javascript">//获取元素内容function getContext(){//获取元素对象var div&#ElementById("div01");//获取元素内容alert(div.innerHTML);alert(div.innerText);}//修改元素内容function updateContext(){//获取元素对象var div&#ElementById("div01");//修改元素对象内容div.innerHTML="<b>你先上，皇军给你殿后，八嘎</b>";}function updateContext2(){//获取元素对象var div&#ElementById("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>
<html><head><title>js操作元素的样式</title><meta charset="UTF-8"/><!--声明css--><style type="text/css">#showdiv{width: 200px;height: 200px;border: solid 1px;}mon{width: 200px;height: 200px;border: solid 1px;}mon2{width: 200px;height: 200px;border: solid 1px;background-color: aqua;}</style><!--js操作元素样式：获取元素对象通过style属性元素对象名.style.样式名="样式值"//添加或者修改元素对象名.style.样式名=""//删除样式注意:以上操作，操作的是HTML的style属性声明中的样式。而不是其他css代码域中的样式。通过className元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式元素对象名.className=""//删除类样式。--><!--声明js代码域--><script type="text/javascript">//js操作元素样式//js给元素操作样式---stylefunction testOperCss(){//获取元素对象var showdiv&#ElementById("showdiv");//添加元素样式showdiv.style.backgroundColor="#FFA500";//js修改元素样式showdiv.style.border="solid 2px red";//js删除样式showdiv.style.border="";}//js操作样式--className function testOperCss2(){//获取元素对象var div01&#ElementById("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>
<html><head><title>js操作元素的文档结构</title><meta charset="UTF-8"/><!--js操作HTML文档结构:增加节点删除节点第一种方式：使用innerHTMLdiv.innerHTML=div.innerHTML+"内容"//增加节点div.innerHTML=""//删除所有子节点父节点.removeChild(子节点对象)//删除指定的子节点。--><!--声明js代码域--><script type="text/javascript">function testAdd(){//获取元素对象var showdiv&#ElementById("showdiv");//给div追加上传按钮showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' /><input type='button' value='删除' οnclick='delInp(this)'/></div>"; }function delInp(btn){//获取父级divvar showdiv&#ElementById("showdiv");//获取要删除的子divvar cdiv=btn.parentNode;//父div删除子veChild(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><!--js操作文档结构2：获取元素对象var obj&#ateElement("标签名");元素对象名.appendChild(obj);--><!--声明js代码域--><script type="text/javascript">function testOper2(){//获取元素对象var showdiv&#ElementById("showdiv");//创建input元素对象var inp&#ateElement("input");pe="file";//创建按钮元素对象var btn&#ateElement("input");pe="button";btn.value="删除";lick=function(){veChild(inp);veChild(btn);veChild(br);}//创建换行符var br&#ateElement("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>
操作，数据不会提交。--><script type="text/javascript">//function testForm(){//获取form表对象var fm&#ElementById("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="";}</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>
<html><head><title>操作表单元素</title><meta charset="UTF-8"/><!--js操作多选框、单选框被选中状态下在js中checked属性值为true,未选中状态为false;js操作下拉框：被选择的option对象在js中selected属性值为true，未选中为false--><!--声明js代码域--><script type="text/javascript">//多选框操作function testCheckBox(){//获取所有的多选元素对象数组var favs&#ElementsByName("fav");//遍历数组for(var i=0;i<favs.length;i++){if(favs[i].checked){alert(favs[i].value+":"+favs[i].checked);}}}//全选function testCheckBox2(){var favs&#ElementsByName("fav");for(var i=0;i<favs.length;i++){favs[i].checked=true;}}//反选function testCheckBox3(){var favs&#ElementsByName("fav");for(var i=0;i<favs.length;i++){favs[i].checked=!favs[i].checked;}}//操作下拉框function testSel(){//获取下拉框对象var sel&#ElementById("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>
<html><head><title>event对象学习</title><meta charset="UTF-8"/><!--event对象学习：1、event对象获取鼠标坐标2、event对象获取键盘值--><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>
大概效果就是鼠标停留在方框中时，会弹出该鼠标停留的坐标。
<html><head><title>js校验form表单</title><meta charset="UTF-8"/><!--声明css代码域--><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><!--声明js代码域--><script type="text/javascript">//常见验证码function createCode(){//创建随机四位数字var code=Math.floor(Math.random()*9000+1000);//获取元素对象var span&#ElementById("codeSpan");//将数字存放到span中span.innerHTML=code; }//验证用户名function checkUname(){//获取用户的用户名信息var uname&#ElementById("uname").value;//创建校验规则var reg=/^[u4e00-u9fa5]{2,4}$///获取span对象var span&#ElementById("unameSpan");//开始校验if(uname=="" || uname==null){//输出校验结果span.innerHTML="用户名不能为空";lor="red";return false;}else st(uname)){//输出校验结果span.innerHTML="用户名ok";lor="green";return true;}else{//输出校验结果span.innerHTML="用户名不符合规则";lor="red";return false;}}//验证密码function checkPwd(){//获取用户的密码信息var pwd&#ElementById("pwd").value;//创建校验规则var reg=/^[a-z]w{5,7}$/;//获取span对象var span&#ElementById("pwdSpan");//开始校验if(pwd=="" ||pwd==null){//输出校验结果span.innerHTML="*密码不能为空";lor="red";return false;}else st(pwd)){//输出校验结果span.innerHTML="*密码ok";lor="green";return true;}else{//输出校验结果span.innerHTML="*密码格式不正确";lor="red";return false;}checkPwd2();}//校验确认密码function checkPwd2(){//获取第一次密码var pwd&#ElementById("pwd").value;//获取确认密码var pwd2&#ElementById("pwd2").value;//获取span对象var span&#ElementById("pwd2Span");//比较两次密码是否相同if(pwd2==""||pwd2==null){span.innerHTML="确认密码不能为空";lor="red";return false;}else if(pwd==pwd2){span.innerHTML="确认密码ok";lor="green";return true;}else{span.innerHTML="两次密码不一致";lor="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&#ElementById("address").value;//获取spanvar span&#ElementById("addressSpan");//校验if(sel!=0){span.innerHTML="籍贯选择成功";lor="green";return true;}else{span.innerHTML="籍贯不能为请选择";lor="red";return false;}}//校验爱好function checkFav(){//获取所有的爱好var favs&#ElementsByName("fav");//获取spanvar span&#ElementById("favSpan");//遍历for(var i=0;i<favs.length;i++){if(favs[i].checked){span.innerHTML="爱好选择成功";lor="green";return true;}}span.innerHTML="爱好至少选则一项";lor="red";return false;}//校验是否同意公司协议function checkAgree(){ElementById("sub").disabled=!ElementById("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&#ElementById(id);var va=inp.value;var alt=inp.alt;//创建校验规则//获取span对象var span&#ElementById(id+"Span")//开始校验if(va=="" ||va==null){//输出校验结果span.innerHTML=alt+"不能为空";lor="red";return false;}else st(va)){//输出校验结果span.innerHTML=alt+"ok";lor="green";return true;}else{//输出校验结果span.innerHTML=alt+"不符合规则";lor="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>
效果图：动态监听鼠标或键盘事件
<html><head><title>操作表格</title><meta charset="UTF-8"/><!--js操作表格学习:1、删除行：行对象.rowIndex//返回行对象的角标表格对象.deleteRow(要删除的行对象的角标);2、修改单元内容单元格对象.innerHTML="新的内容";行对象.cells//返回当前行所有的单元格对象的数组--><!--声明css--><style type="text/css">body{text-align: center;}/*设置表格居中*/#ta{margin: auto;}/*设置表格的行样式*/#ta tr{height: 35px;} </style><!--声明js代码域--><script type="text/javascript">//声明删除行function delRow(btn){//获取table对象var ta&#ElementById("ta");//获取要删除的行对象var tr=btn.parentNode.parentNode;//删除行ta.wIndex);}//修改功能function updateRow(btn){//获取单元格对象//获取行对象var tr=btn.parentNode.parentNode;//获取行对象var cell&#lls[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&#ElementById("ta");//获取要删除的行号var chks&#ElementsByName("chk"); for(var i=1;i<chks.length;i++){if(chks[i].checked){//删除行ta.deleteRow(i);i--;}}}//添加行function addRow(){//获取table表格对象var ta&#ElementById("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&#ElementById("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);Align="center";cell5.innerHTML="<input type='button' value='修改数量' οnclick='updateRow(this)'/><input type='button' value='删除' οnclick='delRow(this)'/>";}//复制行function copyRow(){//获取表格对象var ta&#ElementById("ta");//获取选择行对象var chks&#ElementsByName("chk")for(var i=0;i<chks.length;i++){if(chks[i].checked){var tr=ta.ws.length);//复制行tr.innerHTML&#ws[i].innerHTML;}} }//全选function chooseAll(){var ck&#ElementById("ck");var chks&#ElementsByName("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&#ElementById("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"/><!--声明js代码域--><script type="text/javascript">//创建函数进行照片的联动和样式设置function operInImg(img,src){//设置图片的样式img.style.border="solid 1px";//设置大图的img路径//获取大图对象var big&#ElementById("big");//设置路径big.src="img/"+src;}function operOutImg(img){img.style.border="";}</script><!--声明css代码域--><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>
大概效果是鼠标停留在下面的某个小图，则方框里显示对应的大图！！
本文发布于:2024-02-01 17:34:18，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170678113138321.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
