javaScript2：（DOM对象，form表单操作）
Posted 咫尺天涯是路人丶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javaScript2：（DOM对象，form表单操作）相关的知识，希望对你有一定的参考价值。
1.open，setTimeout，setInterval，clearInterval，clearTimeout
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // BOM：浏览器对象，broswer object model // window对象:窗口默认自带的对象，也就是js默认的对象 function test() { // 最常用的 window.open("http://www.baidu.com","百度","500px");// 打开一个页面 //window.close();// 关闭一个页面 } function test2() { // 在setTimeout中默认有一个参数，如果有两个参数的话，第一个test参数就代表test()函数，一定不能带括号(test()) // 第二个参数就是延迟的时间，以毫秒为单位 timeout = window.setTimeout(test, 3000);// 延迟加载，定时器 } function test3() { interval = setInterval(function(){// 周期函数：实现周期性的执行 alert("我是恶意弹窗"); }, 5000);// 每次执行间隔的时间，单位是毫秒数 } function test4() { clearInterval(interval);// 清除周期函数 } function test5() { clearTimeout(timeout); } function go1() { window.history.go(1); } </script> </head> <body> <input type="button" value="测试" onclick="test2();" /> <input type="button" value="测试Interval" onclick="test3();" /> <input type="button" value="测试Interval" onclick="test4();" /> <input type="button" value="测试timeout" onclick="test5();" /> <input type="button" value="前进" onclick="go1();" /> <a href="20170711_js_2.html">跳转</a> </body> </html>
2.前进后退：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // history function go1() { window.history.go(1); } function go2() { window.history.go(-1); } </script> </head> <body> <input type="button" value="前进" onclick="go1();" /> <input type="button" value="后退" onclick="go2();" /> </body> </html>
3.navigator.userAgent：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> function test() { // navigator // userAgent是在http中存放，存放的是用户(操作系统登录的用户)信息 var broswer = window.navigator.userAgent.toLowerCase(); if(broswer.indexOf("msie") > 0) {// IE浏览器 alert("IE"); } else if(broswer.indexOf("firefox") > 0) { alert("火狐"); } else if(broswer.indexOf("google") > 0) { alert("谷歌"); } else { alert("没有浏览器"); } } </script> </head> <body> <input type="button" value="测试" onclick="test();" /> </body> </html>
4.location.href，top.location.href:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> function test() { // location //window.open();// 重新打开一个页面 //**************** //window.location.href = "http://www.baidu.com";// 在本页面上实现了一个页面跳转 window.top.location.href = "http://www.baidu.com";// 重新加载页面 } </script> </head> <body> <input type="button" value="测试" onclick="test();" /> </body> </html>
5.五种方法获取标签的属性：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> // 需求：需要在div中写上一个字:我是div // 第一步：选中这个div标签 // 第一种：通过form来选中，document.forms<----是一个form的数组，不属于form表单的标签无法被选中 function test() { var div1 = document.forms[0].ins; alert(div1); } // ****第二种：通过document对象:通过id选中document.getElementById(""); function test2() { var div1 = document.getElementById("span1"); alert(div1); } // ****第三种：通过document对象：通过class样式选中document.getElementsByClassName("");---如果有多个，返回的是一个集合 function test3() { var classes = document.getElementsByClassName("div2"); alert(classes); } // ****第四种：通过document对象:通过标签选中document.getElementsByTagName("");---如果有多个，返回的是一个集合 function test4() { var div2 = document.getElementsByTagName("div"); alert(div2); } // 第五种：通过document对象:通过name属性来选中 function test5() { var span1 = document.getElementsByName("span1"); alert(span1); } </script> </head> <body> <form class="div2" action=""> <!-- 因为div并不属于form --> <div class="div2" id="div1" name="div1" style="width:200px; height:200px; background:red;" onclick="test5();"></div> <!-- 因为span标签并不属于form表单 --> <span class="div2" id="span1" name="span1">我是span</span> <input class="div2" name="ins" type="text" /> <div></div> </form> <form action=""> <div style="width:200px; height:200px; background:red;"></div> </form> </body> </html>
6.setAttribute:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> function test1() { // 1.0 // 选中span标签 var span1 = document.getElementById("span1"); // 需求：需要给文字换一个颜色 // 使用setAttribute设置一个属性：有两个参数：第一个参数：需要设置的属性名；第二个参数：设置的值 // 设置的属性，该标签必须支持 var a1 = document.getElementsByTagName("a")[0];// 通过下标获取选中的集合元素 a1.setAttribute("href","http://www.baidu.com"); //span1.setAttribute("style", "color:red"); // 使用getAttribute获得某个标签的属性值 // alert(span1.getAttribute("style")); } function test2() { // 2.0 // 需求：需要span标签更换字体颜色 var span1Style = document.getElementById("span1").style; span1Style.color = "red"; } function test3() { // 终极版 var span1 = document.getElementById("span1"); span1.style.color = "red"; } function test4() { // jiuji版 document.getElementById("span1").style.color = "red"; } </script> </head> <body> <a>我是a标签</a> <span id="span1">我是span标签</span><br /> <input id="ins1" type="text" /> <input type="button" value="测试" onclick="test1();" /> <input type="button" value="测试2" onclick="test2();" /> <input type="button" value="测试3" onclick="test3();" /> <input type="button" value="测试4" onclick="test4();" /> </body> </html>
7.innerHTML:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> <!-- document对象操作文字/html页面 --> function test1() { // 获取到了span标签 var span1 = document.getElementsByClassName("span1")[0]; // span1.innerHTML = "我是span标签"; // 如果innerHTML传入的是一个文本，就会把文本显示到选中的标签中 // 如果传入的html标签，首先把html标签转化，只是把文本显示出来 span1.innerHTML = "<a href=‘http://www.baidu.com‘><i>我是span标签</i></a>"; } </script> </head> <body onclick="test1();"> <input type="button" value="测试" onclick="test1();"/> <span class="span1"></span> </body> </html>
8.获取form表单信息：
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> function test() { // 第一种获取form对象 var forms1 = document.forms["form1"]; // 第二种获取form对象 var forms2 = document.forms[0]; // 第三种获取form对象 var forms3 = document.getElementById("form1"); /**var ins = forms1.username;// name为username的input对象 var insValue = ins.value;// input框中输入的值 if(insValue.length < 6 || insValue.length > 20) { alert("用户名的长度在6位到20位之间"); } else { alert("用户名格式正确"); }*/ //var goods = forms1.goods; //alert(goods.value);// 选择被选中的那一个，如果input中没有设置value，获取到一个on:单选框中已经有选项被选中 /**var hobbys = forms1.hobby;// 返回的是一个数组 for(var i = 0;i < hobbys.length; i++) { if(hobbys[i].checked) { alert(hobbys[i].value); } }*/ // alert(hobbys[0].checked);// checked判断一个选项被选中，返回true或者false var optionValue` = document.getElementById("selectIt").value;// 最常用的，获取下拉列表所选中的value值，而不是文本 // 第一步：获取到form表单对象 // 第二步：获取select对象 var uy = forms1.university; // 第三步：option数组对象 //alert(uy.options[0].text);// 使用text获取下拉框中的文本信息 var uyOptions = uy.options;// 获取一个option数组 for(var i = 0;i < uyOptions.length; i++) { if(uyOptions[i].selected) { alert("获取文本："+uyOptions[i].text); alert("获取值："+uyOptions[i].value); } } //uy.options[0].value;// 使用value获取下拉框中的值 } </script> </head> <h1>登录页面</h1> <body> <form id="form1" action="" name="form1"> 用户名：<input type="text" name="username" /><br /> 密码：<input type="password" name="pwd" /><br /> 选择喜欢的商品：<input type="radio" name="goods" value="卫生纸" />卫生纸 <input type="radio" name="goods" value="fangbianmian" />方便面 <input type="radio" name="goods" />垃圾桶 <input type="radio" name="goods" />电脑 <input type="radio" name="goods" />床 <br /> <!-- soccer：美式足球(橄榄球) football:英式足球(足球) --> 请选择你的爱好：<input type="checkbox" name="hobby" value="football" />足球 <input type="checkbox" name="hobby" value="basketball" />篮球 <input type="checkbox" name="hobby" value="Pingpong" />国球 <input type="checkbox" name="hobby" value="soccer" />橄榄球 <br /> 请选择你的院校:<select name="university" id="selectIt"> <option value="bjdx">北京大学</option> <option value="qhdx">清华大学</option> <option value="zzdx">郑州大学</option> <option value="jlddx">家里蹲大学</option> </select> <br /> <input type="submit" value="提交" /> </form> <input type="button" value="测试" onclick="test();" /> </body> </html>
9.判断用户名密码是否符合要求：
A:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> function test() { var flag = true; var usernameValue = document.getElementById("username").value; if(usernameValue.length < 6 || usernameValue.length > 20) { alert("用户名格式错误"); flag = false; return false;// 在Java中一旦return这个方法就不会继续执行，js中是同样的，但是如果不需要继续执行就return false，return true的话还是会被继续执行 } else { alert("用户名格式正确"); flag = true; // 如果不写就默认return true } return flag; } </script> </head> <body> <form action="http://www.baidu.com"> 用户名：<input id="username" type="text" /><br /> 密码：<input type="password" /><br /> <input type="submit" value="提交" onclick="return test();" /><!-- 如果要实现Java的效果，就必须要在绑定的事件中加上return关键字 --> <!-- 这里return并不是返回的意思，他是来接收返回值的，如果直接写return默认为true --> </form> </body> </html>
B:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> function test() { var flag = true; var usernameValue = document.getElementById("username").value; if(usernameValue.length < 6 || usernameValue.length > 20) { alert("用户名格式错误"); flag = false; } else { alert("用户名格式正确"); flag = true; // 如果不写就默认return true } return flag; } </script> </head> <body> <form action="http://www.baidu.com" onsubmit="return test();"><!-- 当提交的时候执行的事件 --> 用户名：<input id="username" type="text" /><br /> 密码：<input type="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
C:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> // 用户名和密码格式都正确的时候才允许form表单提交 function test() { var flag = true; var usernameValue = document.getElementById("username").value; // 判断用户名格式 if(usernameValue.length < 6 || usernameValue.length > 20) { alert("用户名格式错误"); flag = false; } else { alert("用户名格式正确"); flag = true; // 如果不写就默认return true } return flag; } // 判断密码格式 function test2() { var flag = false; var pwdValue = document.getElementById("pwd").value; if(pwdValue.length < 6 || pwdValue.length > 20) { alert("密码格式错误"); flag = false; } else { alert("密码格式正确"); flag = true; // 如果不写就默认return true } return flag; } function test3() { var flag1 = test();// flag1可能为true也可能为false var flag2 = test2();// flag2可能为true也可能为false return flag1&&flag2; } </script> </head> <body> <form action="http://www.baidu.com" onsubmit="return test3();"> 用户名：<input id="username" type="text" onblur="test();" /><br /> 密码：<input type="password" id="pwd" onblur="test2();" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
D:
<!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script> function test(forms) { var username = forms.username; alert(username.value); } </script> </head> <body> <form action="" onsubmit="return test(this);"> 用户名：<input type="text" id="username" name="username" /> 密码：<input type="password" /> <input type="submit" value="提交" /> </form> </body> </html>
以上是关于javaScript2：（DOM对象，form表单操作）的主要内容，如果未能解决你的问题，请参考以下文章