JavaScript操作BOM对象
1、window对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>window对象</title> | |
| <!-- | |
| BOM:(浏览器对象模型 Browser Object Model) | |
| 浏览器页面的 前进 后退 刷新 页面跳转 都是Bom！ | |
| 对整个浏览器窗口进行交互的对象模型！ | |
| 包含的内容（对象）： | |
| 1.window对象 | |
| 01.history 属性 | |
| 02.location 属性 | |
| 2.document对象 | |
| window对象 | |
| 常用的属性： | |
| 01.history 属性 | |
| 02.location 属性 | |
| 常用的方法： | |
| alert() :只有一个对话框和一个确认按钮 | |
| prompt() ：提示用户输入的对话框 | |
| confirm（）：有一个确认按钮和取消按钮的对话框 | |
| close(): 关闭浏览器窗口 | |
| open()：打开一个新的浏览器窗口 | |
| 定时函数： | |
| 01.setTimeout():在指定毫秒数之后，执行某个方法！ 只执行一次 | |
| 02.setInterval():每间隔指定的毫秒数，都会执行一次！ | |
| window.open("弹出的窗口url"，"窗口的名称"，"窗口的特性") | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var flag= confirm("确定关闭本窗口吗？"); | |
| if(flag){ | |
| window.close(); //浏览器窗口关闭 | |
| }else{ | |
| //window.open("http://www.baidu.com","百度首页"); | |
| window.open("http://www.baidu.com","百度首页","height=400,width=400"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
2、history对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>history对象</title> | |
| <!-- | |
| history对象常用的三个方法： | |
| 01.back（） ：后退 | |
| 02.forward（）：前进 | |
| 03.go() ：跳转至指定的url | |
| --> | |
| </head> | |
| <body> | |
| <a href="02history对象.html">当前页面</a> | |
| <a href="03history对象2.html">下一个页面</a> | |
| <a href="javascript:history.forward()">history.forward()下一个页面</a> | |
| <a href="javascript:history.go(2)">history.go(2)下一个页面</a> | |
| <script type="text/javascript"> | |
| </script> | |
| </body> | |
| </html> |
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>history对象2</title> | |
| </head> | |
| <body> | |
| history对象2 第二个页面 | |
| <a href="javascript:history.back()">history.back()后退一个页面</a> | |
| <a href="javascript:history.go(-1)">history.go(-1)后退一个页面</a> | |
| </body> | |
| </html> |
3、location
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>location对象</title> | |
| <!-- | |
| location对象 | |
| 常用方法： | |
| reload（）:刷新页面 | |
| replace():使用新的页面替换当前页面 | |
| 常用属性： | |
| host：主机名+端口号 | |
| hostname:主机名 | |
| href：完整的url | |
| hash:返回#之后的所有字符串 | |
| search:返回?之后的所有字符串 | |
| --> | |
| </head> | |
| <body> | |
| <a href="javascript:doubleC();">百度</a> | |
| <script type="text/javascript"> | |
| document.write("host值为："+location.host+"<br/>"); | |
| document.write("hostname值为："+location.hostname+"<br/>"); | |
| document.write("href值为："+location.href+"<br/>"); | |
| document.write("hash值为："+location.hash+"<br/>"); | |
| document.write("search值为："+location.search+"<br/>"); | |
| var flag= confirm("确定跳转页面吗？"); | |
| if(flag){ | |
| location.href="http://www.baidu.com"; | |
| } | |
| //当用户点击百度 超链接时触发的事件 | |
| function doubleC(){ | |
| location.href="http://www.jd.com"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
4、document对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>document对象</title> | |
| <!-- | |
| document对象 | |
| 常用的方法： | |
| write（）:在页面中书写内容 | |
| getElementById(): 获取页面中指定id的对象！ 一个对象 | |
| getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ！ 数组 | |
| getElementsByTagName("div"): 获取页面中所有标签为div的对象 ！ 数组 | |
| 常用的属性： | |
| referrer: | |
| 当浏览器向web服务器发送请求的时候，一般会带上referrer， | |
| 告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。 | |
| url： 返回当前页面的url | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| document.write("document.referrer的值是："+document.referrer); | |
| </script> | |
| </body> | |
| </html> |
5、documentReferrer
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>referrer属性</title> | |
| </head> | |
| <body> | |
| <a href="05document对象.html">推广地址</a> | |
| </body> | |
| </html> |
6、 getElement系列
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| body{font-size:14px; | |
| line-height:30px; | |
| } | |
| input{margin:1px; | |
| width:90px; | |
| font-size:12px; | |
| padding:0; | |
| } | |
| #node{ | |
| width:100px; | |
| font-size:24px; | |
| font-weight:bold; | |
| float: left; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| /*改变层内容*/ | |
| function changeLink(){ | |
| //获取页面中id属性值是node的节点 | |
| var node= document.getElementById("node"); | |
| // node.innerText="<h1 style='color:red'>haha</h1>"; innerText：会把整个内容当成文本来输出！ | |
| node.innerHTML="<h3 style='color:red'>haha</h3>";//innerHTML:会编译内容中的html标签以及样式 | |
| } | |
| /*获取所有input标签中所有的value值*/ | |
| function all_input(){ | |
| var allInputs= document.getElementsByTagName("input"); // 是一个数组 | |
| var result=""; | |
| for(var i=0;i<allInputs.length;i++){ | |
| result+= allInputs[i].value+"<br/>"; | |
| } | |
| //把所有的结果 给 id=s的元素 | |
| document.getElementById("s").innerHTML=result; | |
| } | |
| /*获取所有name属性值是season的value*/ | |
| function s_input(){ | |
| var allSeasons= document.getElementsByName("season"); // 是一个数组 | |
| var result=""; | |
| for(var i=0;i<allSeasons.length;i++){ | |
| result+= allSeasons[i].value+"<br/>"; | |
| } | |
| //把所有的结果 给 id=s的元素 | |
| document.getElementById("s").innerHTML=result; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="node">新浪</div> | |
| <input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br /> | |
| <br /><input name="season" type="text" value="春" /> | |
| <input name="season" type="text" value="夏" /> | |
| <input name="season" type="text" value="秋" /> | |
| <input name="season" type="text" value="冬" /> | |
| <br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" /> | |
| <input name="b3" type="button" value="显示season内容" onclick="s_input()" /> | |
| <p id="s"></p> | |
| </body> | |
| </html> |
7、Date对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Date对象</title> | |
| <!-- | |
| Date对象: | |
| getDate()：获取是一个月中的哪一天？ 1-31 | |
| getDay（）：获取是一周中的哪一天？ 0-6 | |
| getHours（）：获取是一天中的小时 0-23 | |
| getMinutes（）：获取是分钟 0-59 | |
| getSeconds（）：获取是秒数 0-59 | |
| getMonth（）：获取是一年中的第几个月？ 0-11 | |
| getFullYear():获取年份 | |
| getTime():返回1970年1月1日到现在的毫秒数 | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var today=new Date(); //当前的系统时间 | |
| document.write(today); | |
| //获取年月日 | |
| var year= today.getFullYear(); | |
| var month= today.getMonth()+1; | |
| var date= today.getDate(); | |
| var hours= today.getHours(); | |
| var min= today.getMinutes(); | |
| var s= today.getSeconds(); | |
| document.write("当前系统时间是："+year+"年:"+month+"月:"+date+"日 "+hours+":"+min+":"+s) | |
| </script> | |
| </body> | |
| </html> |
8、Math对象
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>Math对象</title> | |
| <!-- | |
| Math对象: | |
| ceil（）:向上取整 | |
| floor()：向下取整 | |
| random（）:随机数 | |
| round（）：四舍五入 | |
| --> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>"); | |
| document.write("25.5floor===》"+Math.floor(25.5)+"<br/>"); | |
| document.write("25.5round===》"+Math.round(25.5)+"<br/>"); | |
| </script> | |
| </body> | |
| </html> |
9、定时函数
| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>定时函数</title> | |
| <!-- | |
| 01. setTimeout函数 在一个指定的时间点，去指定一个指定的函数 | |
| 02.setInterval函数 每隔多少时间就会执行一次指定的函数 | |
| --> | |
| </head> | |
| <body> | |
| <div id="nowTime"></div> | |
| <button type="button" onclick="setOne();"> setTimeout函数</button> | |
| <button type="button" onclick="clearOne();"> 清空setTimeout函数</button> | |
| <button type="button" onclick="setTwo();"> setInterval函数</button> | |
| <button type="button" onclick="clearTwo();"> 清空setInterval函数</button> | |
| <script type="text/javascript"> | |
| var num=0; //成员变量 | |
| function one(){ | |
| //获取页面中空元素 并赋值 | |
| document.getElementById("nowTime").innerHTML="数字："+(++num); | |
| } | |
| //声明 定时函数的变量 | |
| var timeout,intervar; | |
| function setOne(){ //设置定时函数 | |
| timeout=setTimeout("one()",2000); | |
| } | |
| function clearOne(){//清空定时函数 | |
| clearTimeout(timeout); | |
| } | |
| function setTwo(){ //周期性的执行 one（）函数 | |
| intervar=setInterval("one()",1000); | |
| } | |
| function clearTwo(){ //周期性的执行 one（）函数 | |
| clearInterval(intervar); | |
| } | |
| </script> | |
| </body> | |
| </html> |
