JavaScript BOM基础笔记（2017/06/05）

来源：互联网发布：淘宝买二手手机可靠吗编辑：程序博客网时间：2024/06/06 05:22

day21 jsBOM基础
1、windows对象
1.1 window对象（全局对象）
- 什么是BOM
BOM(browser object model)浏览器对象模型
- BOM的对象有
window、navigator、screen、history、location、document、event

- window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过
JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象（全局对象）
* 所有的全局变量和全局方法都被归在window上

1.2 window对象方法（alert-confirm-prompt）
语法：window.alert("content");
功能：显示带有一段消息和一个确认按钮的警告框

语法：window.confirm("message")
功能：显示一个带有指定消息和OK及取消按钮的对话框
返回值：如果用户点击确定按钮，则confirm()返回true
如果用户点击取消按钮，则confirm()返回false

语法：window.prompt("text,defaultText");
参数说明：
text:要在对话框中显示的纯文本（而不是HTML格式的文本）
defaultText:默认的输入文本
返回值：如果用户点击提示框的取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示的文本

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="box"><span>iphone6s</span><input type="button" value="删除" id="btn"></div><script>var age=15;function sayAge(){alert('我'+age);}//声明一个全局变量window.username="marry";//var username="marry";//声明一个全局方法window.sayName=function(){alert("我是"+this.username);}sayAge();window.sayName();//confirm//获取按钮var btn=document.getElementById("btn");btn.onclick=function(){//弹出确认对话框var result=window.confirm("您确定要删除吗？");console.log(result);if(result){document.getElementById("box").style.display="none";}}//弹出输入框var message=prompt("请输入您的星座","天蝎座");console.log(message);</script></body></html>

1.3 window对象（open和close）
语法：window.open(pageURL,name,parameters)
功能：打开一个新的浏览器窗口或查找一个已命名的窗口
参数说明：
pageURL:子窗口的路径
name:子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters:窗口参数（各参数用逗号分隔）

语法：window.close()
功能：关闭浏览器窗口

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>open</title></head><body><input type="button" value="退出" id="quit"><script>window.onload=function(){//打开子窗口，显示newwindow.htmlwindow.open("newwindow.html","newwindow","width=400,height=200,top=0,toolbar=no,mebubar=no,scrollbars=no,location=no,statu=no");// left:窗口X轴坐标// top:窗口Y轴坐标// toolbar:是否显示浏览器的工具栏// menubar:是否显示菜单栏// scrollbars:是否显示滚动条// location:是否显示地址字段// status:是否添加状态栏//点击关闭当前窗口quit.onclick=function(){window.close();}}</script></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>newwindow</title></head><body><h1>hello window.open</h1></body></html>

1.4 window对象方法--定时器 setTimeout
JavaScript是单线程语言，单线程就是所执行的代码必须按照顺序

- 超时调用
语法：setTimeout(code,millsec)
功能：在指定的毫秒数后调用函数或计算表达式
参数说明：1.code:要调用的函数或执行的JavaScript代码串
2.millsec:在执行代码前需等待的毫秒数

- 清除超时调用
语法：clearTimeout(id_of_settimeout)
功能：取消由setTimeout()方法设置的timeout
参数说明：1.id_of_settimeout：由setTimeout()返回的ID的值，该值标识要取消的延迟执行代码块

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>setTimeout</title></head><body><script>//setTimeout("alert('hello')",4000);//自定义函数var fnCall=function(){alert("world");}//匿名函数//SetTimeout方法返回一个ID值通过它取消超时调用var timeout1=setTimeout(function(){alert("hello");},2000);clearTimeout(timeout1);//setTimeout(fnCall,5000);</script></body></html>

1.5 window对象方法--定时器setInterval
- 间歇调用
语法：setInterval(code,millisec)
功能：每隔指定的时间执行一次代码
参数说明：1.code:要调用的函数或者要执行的代码串
2.millisec:周期性执行或调用code之间的时间间隔，以毫秒计

- 清除间歇调用
语法：clearInterval(id_of_setinterval)
功能：取消setInterval()方法设置的interval

参数：1.id_of_setinterval:由setInterval()返回的ID值

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>setInterval</title></head><body><script>var intervalId=setInterval(function(){console.log("你好");},1000)//10秒之后停止打印// setTimeout(function(){// clearInterval(intervalId);// },10000);var num=1,max=10,timer=null;//每隔一秒钟num递增一次，直到num的值等于max清除// timer=setInterval(function(){// console.log(num);// num++;// if(num>max){// clearInterval(timer)// }// },1000)//使用超时调用实现function inCreamentNum(){console.log(num);num++;if(num<=max){setTimeout(inCreamentNum,1000);}else{clearTimeout(timer);}}timer=setTimeout(inCreamentNum,1000);</script></body></html>

2.location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能
它既是window对象的属性，也是document对象的属性。

2.1 location对象的常用属性
语法：location.href
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价

语法：location.hash
功能：返回URL中的hash(#号后跟零或多个字符)，如果不包含则返回空字符串

语法：location.host
功能：返回服务器名称和端口号（如果有）

语法：location.hostname
功能：返回不带端口号的服务器名称

语法：location.pathname
功能：返回URL中的目录和（或）文件名

语法：location.port
功能：返回URL中指定的端口，如果没有，返回空字符串
说明：假设网址为：locallhost:8080/hotel 那location.port值为8080

语法：location.protocol
功能：返回页面使用的协议

语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>location.href</title><style>.box1{height: 400px;background: #ccc}.box2{height: 400px;background: #666}</style></head><body><div class="box1" id="top"></div><div class="box2"></div><input type="button" id="btn" value="返回顶部"><script>console.log(location.href);console.log(location.hash);var btn=document.getElementById("btn");btn.onclick=function() {            location.hash = "#top";        }console.log(location.pathname);</script></body></html>

2.2 location对象
2.2.1 改变浏览器位置的方法
location.href属性

location对象其他属性也可改变URL：
location.hash
location.search

2.2.2 location.replace()
语法：location.replace(url)
功能：重新定向URL
说明：使用location.replace不会在历史记录中生成新记录

2.2.3 location.reload()
语法：location.reload()
功能：重新加载当前显示的页面
说明：location.reload()有可能从缓存中加载

location.reload(true)从服务器重新加载

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>location.href2</title></head><body><input type="button" value="刷新" id="roload"><script>// setTimeout(function(){// location.href='test1.html';// //window.location='test1.html';// location.replace("test1.html");// },1000)document.getElementById("reload").onclick=function(){location.reload(true);}</script></body></html>

编程练习：

（1）当点击”操作页面”按钮时，弹出确认框“刷新页面么？”

（2）当点击确认框的“确定”时，重新加载当前显示的页面

当点击确认框的”取消”时，打开慕课网网站，当前网页不能后退

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>location方法</title>    </head>    <body>        <input type="button" value="操作页面" id="ck">        <script type="text/javascript">           var ck=document.getElementById("ck");           ck.onclick=function(){               var result=window.confirm("确定刷新页面？");               if(result){                   location.reload();               }               else{                   location.replace("http://www.imooc.com");               }           }        </script>    </body></html>

3、history对象
history对象保存了用户在浏览器中访问页面的历史记录
3.1 history对象方法(back)
语法：history.back()
功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>back</title></head><body><a href="index11.html">index11.html</a></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><p>这是index11.html</p><p><input type="button" value="后退" id="btn"></p><script>var btn=document.getElementById("btn");//点击btn按钮时回到历史记录的上一步btn.onclick=function(){history.back();}</script></body></html>

3.2 history对象方法(forward)
语法：location.forward()
功能：回到历史记录的下一步
说明：相当于使用了history.go(1)

4、screen对象及属性
screen对象包含有关客户端显示屏幕的信息
语法：screen.availWidth
功能：返回可用的屏幕宽度
语法：screen.availHeight
功能：返回可用的屏幕高度

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>screen</title></head><body><script>// 获取窗口文档显示区的高度和宽度console.log("页面宽："+screen.availWidth);console.log("页面高："+screen.availHeight);// 获取显示屏幕的高度和宽度console.log("pageWidth:"+window.innerWidth);console.log("pageHeight:"+window.innerHeight);</script></body></html>

5、Navigator对象

UserAgent:用来识别浏览器名称、版本、引擎以及操作系统等信息的内容。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>userAgent</title></head><body><script>function getBrowser(){//获取userAgent属性var explorer = navigator.userAgent.toLowerCase(),browser;if(explorer.indexOf("msie")>-1){browser = "IE";}else if(explorer.indexOf("chrome")>-1){browser = "chrome";}else if(explorer.indexOf("opera")>-1){browser = "opera";}else if(explorer.indexOf("safari")>-1){browser = "safari";}return browser;}var explorer = getBrowser();console.log("您当前使用的是："+explorer+"浏览器");</script></body></html>

阅读全文

0 0