客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
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";// 必须输全url，重新加载页面 } </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");//JS中前面没有# 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[0].innerHTML); } </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" /> 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();"> |
请发表评论