1.open，setTimeout，setInterval，clearInterval，clearTimeout

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script type="text/javascript">
  7.  
  8.             // BOM：浏览器对象，broswer object model
  9.             // window对象:窗口默认自带的对象，也就是js默认的对象
  10.             function test() {
  11.                 // 最常用的
  12.                 window.open("http://www.baidu.com","百度","500px");// 打开一个页面
  13.                 //window.close();// 关闭一个页面
  14.             }
  15.  
  16.             function test2() {
  17.             // 在setTimeout中默认有一个参数，如果有两个参数的话，第一个test参数就代表test()函数，一定不能带括号(test())
  18.             // 第二个参数就是延迟的时间，以毫秒为单位
  19.                 timeout = window.setTimeout(test, 3000);// 延迟加载，定时器
  20.             }
  21.  
  22.             function test3() {
  23.                 interval = setInterval(function(){// 周期函数：实现周期性的执行
  24.                     alert("我是恶意弹窗");
  25.                 }, 5000);// 每次执行间隔的时间，单位是毫秒数
  26.             }
  27.  
  28.             function test4() {
  29.                 clearInterval(interval);// 清除周期函数
  30.             }
  31.  
  32.             function test5() {
  33.                 clearTimeout(timeout);
  34.             }
  35.             function go1() {
  36.                 window.history.go(1);
  37.             }    
  38.  
  39.         </script>
  40.     </head>
  41.  
  42.     <body>
  43.  
  44.         <input type="button" value="测试" onclick="test2();" />
  45.         <input type="button" value="测试Interval" onclick="test3();" />
  46.         <input type="button" value="测试Interval" onclick="test4();" />
  47.         <input type="button" value="测试timeout" onclick="test5();" />
  48.         <input type="button" value="前进" onclick="go1();" />
  49.         <a href="20170711_js_2.html">跳转</a>
  50.     </body>
  51.  
  52. </html>

2.前进后退：

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             // history
  8.             function go1() {
  9.                 window.history.go(1);
  10.             }
  11.             function go2() {
  12.                 window.history.go(-1);
  13.             }                
  14.  
  15.         </script>
  16.     </head>
  17.  
  18.     <body>
  19.         <input type="button" value="前进" onclick="go1();" />
  20.         <input type="button" value="后退" onclick="go2();" />
  21.     </body>
  22.  
  23. </html>

3.navigator.userAgent：

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             function test() {
  8.                 // navigator
  9.                 // userAgent是在http中存放，存放的是用户(操作系统登录的用户)信息
  10.                 var broswer = window.navigator.userAgent.toLowerCase();
  11.                 if(broswer.indexOf("msie") > 0) {// IE浏览器
  12.                     alert("IE");
  13.                 } else if(broswer.indexOf("firefox") > 0) {
  14.                     alert("火狐");
  15.                 } else if(broswer.indexOf("google") > 0) {
  16.                     alert("谷歌");
  17.                 } else {
  18.                     alert("没有浏览器");
  19.                 }
  20.             }
  21.  
  22.         </script>
  23.     </head>
  24.  
  25.     <body>
  26.         <input type="button" value="测试" onclick="test();" />
  27.     </body>
  28.  
  29. </html>

4.location.href，top.location.href:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             function test() {
  8.                 // location
  9.                 //window.open();// 重新打开一个页面
  10.                 //****************
  11.                 //window.location.href = "http://www.baidu.com";// 在本页面上实现了一个页面跳转
  12.                 window.top.location.href = "http://www.baidu.com";// 必须输全url，重新加载页面
  13.             }
  14.         </script>
  15.     </head>
  16.  
  17.     <body>
  18.  
  19.         <input type="button" value="测试" onclick="test();" />
  20.  
  21.     </body>
  22.  
  23. </html>

5.五种方法获取标签的属性：

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             // 需求：需要在div中写上一个字:我是div
  8.             // 第一步：选中这个div标签
  9.             // 第一种：通过form来选中，document.forms<----是一个form的数组，不属于form表单的标签无法被选中
  10.  
  11.             function test() {
  12.                 var div1 = document.forms[0].ins;
  13.                 alert(div1);
  14.             }
  15.  
  16.             // ****第二种：通过document对象:通过id选中document.getElementById("");
  17.             function test2() {
  18.                 var div1 = document.getElementById("span1");//JS中前面没有#
  19.                 alert(div1);
  20.             }
  21.  
  22.             // ****第三种：通过document对象：通过class样式选中document.getElementsByClassName("");---如果有多个，返回的是一个集合
  23.             function test3() {
  24.                 var classes = document.getElementsByClassName("div2"); //此处获得一个数组
  25.                 alert(classes);
  26.             }
  27.  
  28.             // ****第四种：通过document对象:通过标签选中document.getElementsByTagName("");---如果有多个，返回的是一个集合
  29.             function test4() {
  30.                 var div2 = document.getElementsByTagName("div"); //此处获得一个数组
  31.                 alert(div2);
  32.             }
  33.  
  34.             // 第五种：通过document对象:通过name属性来选中
  35.             function test5() {
  36.                 var span1 = document.getElementsByName("span1");//此处获得一个数组
  37.                 alert(span1[0].innerHTML);
  38.             }
  39.  
  40.         </script>
  41.  
  42.     </head>
  43.  
  44.         <body>
  45.             <form class="div2" action="">
  46.                 <!-- 因为div并不属于form -->
  47.                 <div class="div2" id="div1" name="div1" style="width:200px; height:200px; background:red;" onclick="test5();"></div>
  48.                 <!-- 因为span标签并不属于form表单 -->
  49.                 <span class="div2" id="span1" name="span1">我是span</span>
  50.                 <input class="div2" name="ins" type="text" />
    　　　　　　　　　　<input type="button" value="测试" onclick="test5();"/>
  51.                 <div></div>
  52.             </form>
  53.  
  54.             <form action="">
  55.                 <div style="width:200px; height:200px; background:red;"></div>
  56.             </form>
  57.  
  58.         </body>
  59.  
  60. </html>

6.setAttribute:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.  
  7.         <script>
  8.             function test1() {
  9.             // 1.0
  10.                 // 选中span标签
  11.                 var span1 = document.getElementById("span1");
  12.                 // 需求：需要给文字换一个颜色
  13.                 // 使用setAttribute设置一个属性：有两个参数：第一个参数：需要设置的属性名；第二个参数：设置的值
  14.                 // 设置的属性，该标签必须支持
  15.                 var a1 = document.getElementsByTagName("a")[0];// 通过下标获取选中的集合元素
  16.                 a1.setAttribute("href","http://www.baidu.com");
  17.                 //span1.setAttribute("style", "color:red");
  18.                 // 使用getAttribute获得某个标签的属性值
  19.                 // alert(span1.getAttribute("style"));
  20.             }
  21.             function test2() {
  22.                 // 2.0
  23.                 // 需求：需要span标签更换字体颜色
  24.                 var span1Style = document.getElementById("span1").style;
  25.                 span1Style.color = "red";
  26.  
  27.             }
  28.  
  29.             function test3() {
  30.                 // 终极版
  31.                 var span1 = document.getElementById("span1");
  32.                 span1.style.color = "red";
  33.             }
  34.  
  35.             function test4() {
  36.                 // jiuji版
  37.                 document.getElementById("span1").style.color = "red";
  38.             }
  39.  
  40.         </script>
  41.  
  42.     </head>
  43.  
  44.         <body>
  45.             <a>我是a标签</a>
  46.             <span id="span1">我是span标签</span><br />
  47.             <input id="ins1" type="text" />
  48.             <input type="button" value="测试" onclick="test1();" />
  49.             <input type="button" value="测试2" onclick="test2();" />
  50.             <input type="button" value="测试3" onclick="test3();" />
  51.             <input type="button" value="测试4" onclick="test4();" />
  52.         </body>
  53.  
  54. </html>

7.innerHTML:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             <!-- document对象操作文字/html页面 -->
  8.             function test1() {
  9.                 // 获取到了span标签
  10.                 var span1 = document.getElementsByClassName("span1")[0];
  11.                 // span1.innerHTML = "我是span标签";
  12.                 // 如果innerHTML传入的是一个文本，就会把文本显示到选中的标签中
  13.                 // 如果传入的html标签，首先把html标签转化，只是把文本显示出来
  14.                 span1.innerHTML = "<a href='http://www.baidu.com'><i>我是span标签</i></a>";
  15.             }
  16.         </script>
  17.  
  18.     </head>
  19.  
  20.         <body onclick="test1();">
  21.             <input type="button" value="测试" onclick="test1();"/>
  22.             <span class="span1"></span>
  23.         </body>
  24.  
  25. </html>

8.获取form表单信息：

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             function test() {
  8.                 // 第一种获取form对象
  9.                 var forms1 = document.forms["form1"];
  10.                 // 第二种获取form对象
  11.                 var forms2 = document.forms[0];
  12.                 // 第三种获取form对象
  13.                 var forms3 = document.getElementById("form1");
  14.  
  15.                 /**var ins = forms1.username;// name为username的input对象
  16.                 var insValue = ins.value;// input框中输入的值
  17.                 if(insValue.length < 6 || insValue.length > 20) {
  18.                     alert("用户名的长度在6位到20位之间");
  19.                 } else {
  20.                     alert("用户名格式正确");
  21.                 }*/
  22.  
  23.                 //var goods = forms1.goods;
  24.                 //alert(goods.value);// 选择被选中的那一个，如果input中没有设置value，获取到一个on:单选框中已经有选项被选中
  25.                 /**var hobbys = forms1.hobby;// 返回的是一个数组
  26.                 for(var i = 0;i < hobbys.length; i++) {
  27.                     if(hobbys[i].checked) {
  28.                         alert(hobbys[i].value);
  29.                     }
  30.  
  31.                 }*/
  32.                 // alert(hobbys[0].checked);// checked判断一个选项被选中，返回true或者false
  33.  
  34.                 var optionValue` = document.getElementById("selectIt").value;// 最常用的，获取下拉列表所选中的value值，而不是文本
  35.                 // 第一步：获取到form表单对象
  36.                 // 第二步：获取select对象
  37.                 var uy = forms1.university;
  38.                 // 第三步：option数组对象
  39.                 //alert(uy.options[0].text);// 使用text获取下拉框中的文本信息
  40.                 var uyOptions = uy.options;// 获取一个option数组
  41.                 for(var i = 0;i < uyOptions.length; i++) {
  42.  
  43.                     if(uyOptions[i].selected) {
  44.                         alert("获取文本："+uyOptions[i].text);
  45.                         alert("获取值："+uyOptions[i].value);
  46.                     }
  47.                 }
  48.                 //uy.options[0].value;// 使用value获取下拉框中的值
  49.  
  50.             }
  51.         </script>
  52.  
  53.     </head>
  54.         <h1>登录页面</h1>
  55.  
  56.         <body>
  57.             <form id="form1" action="" name="form1">
  58.                 用户名：<input type="text" name="username" /><br />
  59.                 密码：<input type="password" name="pwd" /><br />
  60.  
  61.                 选择喜欢的商品：<input type="radio" name="goods" value="卫生纸" />卫生纸
  62.                                 <input type="radio" name="goods" value="fangbianmian" />方便面
  63.                                 <input type="radio" name="goods" />垃圾桶
  64.                                 <input type="radio" name="goods" />电脑
  65.                                 <input type="radio" name="goods" />床
  66.                                 <br />
  67.  
  68.                                 <!-- soccer：美式足球(橄榄球) football:英式足球(足球) -->
  69.                 请选择你的爱好：<input type="checkbox" name="hobby" value="football" />足球
  70.                                 <input type="checkbox" name="hobby" value="basketball" />篮球
  71.                                 <input type="checkbox" name="hobby" value="Pingpong" />国球
  72.                                 <input type="checkbox" name="hobby" value="soccer" />橄榄球
  73.  
  74.                                 <br />
  75.                 请选择你的院校:<select name="university" id="selectIt">
  76.                                     <option value="bjdx">北京大学</option>
  77.                                     <option value="qhdx">清华大学</option>
  78.                                     <option value="zzdx">郑州大学</option>
  79.                                     <option value="jlddx">家里蹲大学</option>
  80.                                 </select>
  81.  
  82.                 <br />
  83.                 <input type="submit" value="提交" />
  84.             </form>
  85.             <input type="button" value="测试" onclick="test();"  />
  86.         </body>
  87.  
  88. </html>

9.判断用户名密码是否符合要求：

A:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             function test() {
  8.                 var flag = true;
  9.                 var usernameValue = document.getElementById("username").value;
  10.                 if(usernameValue.length < 6 || usernameValue.length > 20) {
  11.                     alert("用户名格式错误");
  12.                     flag = false;
  13.                     return false;// 在Java中一旦return这个方法就不会继续执行，js中是同样的，但是如果不需要继续执行就return false，return true的话还是会被继续执行
  14.                 } else {
  15.                     alert("用户名格式正确");
  16.                     flag = true;
  17.                     // 如果不写就默认return true
  18.                 }
  19.                 return flag;
  20.             }
  21.         </script>
  22.  
  23.     </head>
  24.  
  25.         <body>
  26.             <form action="http://www.baidu.com">
  27.                 用户名：<input id="username" type="text" /><br />
  28.                 密码：<input type="password" /><br />
  29.                 <input type="submit" value="提交" onclick="return test();" /><!-- 如果要实现Java的效果，就必须要在绑定的事件中加上return关键字 -->
  30.                 <!-- 这里return并不是返回的意思，他是来接收返回值的，如果直接写return默认为true -->
  31.             </form>
  32.         </body>
  33.  
  34. </html>

B:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             function test() {
  8.                 var flag = true;
  9.                 var usernameValue = document.getElementById("username").value;
  10.                 if(usernameValue.length < 6 || usernameValue.length > 20) {
  11.                     alert("用户名格式错误");
  12.                     flag = false;
  13.                 } else {
  14.                     alert("用户名格式正确");
  15.                     flag = true;
  16.                     // 如果不写就默认return true
  17.                 }
  18.                 return flag;
  19.             }
  20.         </script>
  21.  
  22.     </head>
  23.  
  24.         <body>
  25.             <form action="http://www.baidu.com" onsubmit="return test();"><!-- 当提交的时候执行的事件 -->
  26.                 用户名：<input id="username" type="text" /><br />
  27.                 密码：<input type="password" /><br />
  28.                 <input type="submit" value="提交" />
  29.  
  30.             </form>
  31.         </body>
  32.  
  33. </html>

C:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.         // 用户名和密码格式都正确的时候才允许form表单提交
  8.  
  9.             function test() {
  10.                 var flag = true;
  11.                 var usernameValue = document.getElementById("username").value;
  12.                 // 判断用户名格式
  13.                 if(usernameValue.length < 6 || usernameValue.length > 20) {
  14.                     alert("用户名格式错误");
  15.                     flag = false;
  16.                 } else {
  17.                     alert("用户名格式正确");
  18.                     flag = true;
  19.                     // 如果不写就默认return true
  20.                 }
  21.                 return flag;
  22.             }
  23.  
  24.             // 判断密码格式
  25.             function test2() {
  26.                 var flag = false;
  27.                 var pwdValue = document.getElementById("pwd").value;
  28.                 if(pwdValue.length < 6 || pwdValue.length > 20) {
  29.                     alert("密码格式错误");
  30.                     flag = false;
  31.                 } else {
  32.                     alert("密码格式正确");
  33.                     flag = true;
  34.                     // 如果不写就默认return true
  35.                 }
  36.                 return flag;
  37.             }
  38.  
  39.             function test3() {
  40.                 var flag1 = test();// flag1可能为true也可能为false
  41.                 var flag2 = test2();// flag2可能为true也可能为false
  42.                 return flag1&&flag2;
  43.             }
  44.  
  45.         </script>
  46.  
  47.     </head>
  48.  
  49.         <body>
  50.             <form action="http://www.baidu.com" onsubmit="return test3();">
  51.                 用户名：<input id="username" type="text" onblur="test();" /><br />
  52.                 密码：<input type="password" id="pwd" onblur="test2();"  /><br />
  53.                 <input type="submit" value="提交" />
  54.  
  55.             </form>
  56.         </body>
  57.  
  58. </html>

D:

  1. <!DOCTYPE>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"></meta>
  5.         <title></title>
  6.         <script>
  7.             function test(forms) {
  8.                 var username = forms.username;
  9.                 alert(username.value);
  10.             }
  11.         </script>
  12.  
  13.     </head>
  14.  
  15.         <body>
  16.             <form action="" onsubmit="return test(this);">
  17.                 用户名：<input type="text" id="username" name="username" />
  18.                 密码：<input type="password" />
  19.                 <input type="submit" value="提交" />
  20.  
  21.             </form>
  22.         </body>
  23.  
  24. </html>

java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）的更多相关文章

  1. js下 Day01、DOM对象，BOM浏览器对象模型

    一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...

  2. js ajax 传送xml dom对象到服务器

    客户端代码 1 <script> var isie = true; var xmlhttp = null; function createXMLHTTP() {//创建XMLXMLHttp ...

  3. 百万年薪python之路 -- JS的BOM与DOM对象

    BOM对象 location对象 location.href 获取URL location.href="URL" // 跳转到指定页面 location.reload() 重新加载 ...

  4. js es6遍历对象的6种方法（应用中推荐前三种）

        javaScript遍历对象总结 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2.使用Object.keys ...

  5. FORM中使用onSubmit="return false"防止表单自动提交，以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  6. Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  7. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  8. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  9. udp开发-dtd验证,dom解析

    //博主太懒了,并没有提供范例程序 6.基于UDP开发 (1)发送方:socket->准备数据包 DatagramSocket docket = new DatagramSocket(); // ...

随机推荐

  1. 并查集+优先队列+启发式合并 || 罗马游戏 || BZOJ 1455 || Luogu p2713

    题面:P2713 罗马游戏 题解: 超级大水题啊,特别水.. 并查集维护每个人在哪个团里,优先队列维护每个团最低分和最低分是哪位,然后每次判断一下哪些人死了,随便写写就行 并查集在Merge时可以用启 ...

  2. BZOJ1079 [SCOI2008]着色方案[组合计数DP]

    $有a_{1}个1,a_{2}个2,...,a_{n}个n(n<=15,a_{n}<=5),求排成一列相邻位不相同的方案数.$ 关于这题的教训记录: 学会对于复杂的影响分开计,善于发现整体 ...

  3. Axure案例：用中继器实现便捷好用的3级菜单--转载

    提示1:本篇教程可能不太适合新手,以及不了解中继器.全局变量.系统变量等使用的…新手 提示2:文字其实不多,截图太多,所以看上去很长,也可直接翻到末尾查看所有的用例,其实并不多 之前有介绍过使用中继器 ...

  4. CSS3背景定位 background-origin

    background-size 大小 语法 background-size :[ <length> | <percentage> | auto ]{1,2} | cover | ...

  5. vue history模式下的微信支付，及微信支付授权目录的填写,处理URL未注册

    微信公众号配置网页授权域名:填写网址域名 微信开发者平台配置url: 访问url:http://www.baidu.com/pay/ment 支付授权目录:http://www.baidu.com/p ...

  6. js面试之--判断一个对象是不是数组类型，一共几种方法？？？

  7. conda退出base　环境

    安装conda后取消命令行前出现的base,取消每次启动自动激活conda的基础环境   方法一: 每次在命令行通过conda deactivate退出base环境回到系统自动的环境 方法二 1,通过 ...

  8. “M_PI_2”: 重复定义的宏

    问题警告:“M_PI_2”: 重复定义的宏 分析:在Visual Studio上使用math.h库时与其他库数学库冲突,我们可以通过添加宏定义“_USE_MATH_DEFINES”来消除math.h定 ...

  9. 51 Nod 1486 大大走格子

    1486 大大走格子  题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题  收藏  关注 有一个h行w列的棋盘,里面有一些格子是不 ...

  10. CF 25 E 三个字符串 KMP模板

    Test Time Limit: 2000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64u Submit Status ...