目录
一、什么是BOM?
BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。
二、关于BOM知识的思维导图
三、主流浏览器的介绍
浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(firefox),Webkit(Safari chrome 等)以及 Presto(opera)。2013 年,谷歌开始研发 blink 引擎,chrome 28 以后开始使用,而 opera 则放弃了自主研发的 Presto 引擎,投入谷歌怀抱,和谷歌一起研发 blink 引擎,国内各种 chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 webkit,投入 blink 的怀抱。
移动端的浏览器内核主要说的是系统内置浏览器的内核。
目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
四、BOM对象
- window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
- document 对象,文档对象;
- location 对象,浏览器当前URL信息;
- navigator 对象,浏览器本身信息;
- screen 对象,客户端屏幕信息;
- history 对象,浏览器访问历史信息;
1)、Window对象:BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
window对象常用方法有:
弹框类的方法。前面省略window
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址",“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象
close() 关闭当前的网页。 注:存在兼容性问题:FF:禁止设置关闭浏览器的代码
Chrome:默认直接关闭
IE:询问用户
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
定时器,清除定时器。
setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器
2)、location对象
window.location对象:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。
属性
- location.herf = 'url地址'
- hash 返回#号后面的字符串,不包含散列,则返回空字符串。
- host 返回服务器名称和端口号
- pathname 返回目录和文件名。 /project/test.html
- search 返回?号后面的所有值。
- port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串
- portocol 返回页面使用的协议。 http:或https:
- hostname 返回不带端口号的服务器名称
- href 返回当前加载页面的完整URL
方法
- reload() 重新加载当前文档
- replace() 用新的文档替换当前文档
3)、navigator对象
window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。
- navigator.platform:操作系统类型;
- navigator.userAgent:浏览器设定的User-Agent字符串。
- navigator.appName:浏览器名称;
- navigator.appVersion:浏览器版本;
- navigator.language:浏览器设置的语言;
- userAgent是最常用的属性,用来完成浏览器判断。
if(window.navigator.userAgent.indexOf('MSIE')!=-1){
alert('我是IE');
}else{
alert('我不是IE');
}
4)、screen对象
window.screen 对象包含有关用户屏幕的信息。
- screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
- screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和
5)、 history对象
window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
- history.back() - 加载历史列表中的前一个 URL。返回上一页。
- history.forward() - 加载历史列表中的下一个 URL。返回下一页。
- go(“参数”) -1表示上一页,1表示下一页。
综合以上,页面跳转的方法有:
1、window.location.href = '你所要跳转到的页面';
2、window.open('你所要跳转到的页面’);
3、window.history.back(-1):返回上一页
4、window.history.go(-1/1):返回上一页或下一页五、
5、history.go("baidu.com");
6)、document 对象
document 对象既是window对象的一部分,又代表了整个HTML文档,可以用来访问页面中的所有元素。当使用document对象时,除了要符合各浏览器的标准外,也要符合W3C(万维网联盟)的标准
- getElementById():返回拥有指定id的第一个对象引用
- getElementsByName():返回带有指定 名称的对象集合
- getElementsByTagName():返回带有指定标签名的对象的集合
- write():向文档写文本,HTML表达式或JavaScript代码
五、窗口尺寸与大小
可视区尺寸: document.documentElement.clientWidth document.documentElement.clientHeight
滚动条滚动距离: document.documentElement.clientScrollTop document.documentElement.clientScrollLeft
存在兼容性问题(Chrome与其它浏览器不同),解决办法如下
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollTop||document.body.scrollLeft;
内容高/宽:元素.scrollHeight/scrollWidth
当一个时间发生时鼠标到页面可视区的距离:clientX/clientY
六、系统对话框
- alert():弹窗
<script type="text/javascript"> alert("Hello world!"); </script>
- confirm():确定框
<script type="text/javascript"> /* 判断用户点击了OK还是Cancel,可以检查confirm()方法返回的布尔值:true表示单击了OK,false表示单击了Cancel或单击了右上角的X按钮。 */ if (confirm("Are you sure?")) { alert("I'm so glad you're sure! "); } else { alert("I'm sorry to hear you're not sure. "); } </script>
- prompt():输入框
<script type="text/javascript">
/*
prompt()方法用来生成一个"提示"框,用于提示用户输入一些文本。提示框除了显示OK和Cancel按钮之外 ,还会显示一个文本输入域,用来输入文本内容。该方法接收两个参数:要显示给用户的文本提示和文本输入域的默认值(可以是一个空字符串)
*/
var result = prompt("What is your name? ", "");
if (result !== null) {
alert("Welcome, " + result);
}
</script>
七、JavaScript定时函数
- 超时调用
- 超时调用需要使用window对象的setTimeout()方法,接收两个参数 : 要执行的代码或函数和以毫秒表示的时间,只执行一次用于加载配置文件等。
var time; function Time(){ time=setInterval(aa,3000);//延时3秒钟后执行 aa() 函数 } function aa(){ alert("JavaScript"); } /* 代码执行会在三秒后以弹框的方式显示出JavaScript */ clearTimeout(time); //只要是在指定时间尚未过去之前调用clearTimeout()方法就可以完全取消超时调用
- 超时调用需要使用window对象的setTimeout()方法,接收两个参数 : 要执行的代码或函数和以毫秒表示的时间,只执行一次用于加载配置文件等。
- 间歇调用
- 间歇调用与超时调用类似,只不过它会按照指定时间间隔重复执行代码,直至间歇调用被取消或者页面被关闭。设置间歇调用的方法是setInterval(),它接收的参数与超时调用相同。
var time;
function Time(){
time=setInterval(aa,3000)
}
function aa(){
alert("JavaScript");
}
/*
代码执行会每隔三以弹框的方式显示出JavaScript
*/
clearInterval(time); //调用clearInterval()方法就可以完全取消间歇调用
八、JavaScript内置对象
在JavaScript中,系统的内置对象有String对象,Array对象,Date对象和Math对象等。主要了解后三个
1.Array对象
同Java中的数组一样,JavaScript中数组也是具有一个或多个值的集合。数组用一个名称储存一系列的值,用下标区分数组中的每个值,数组下标从0开始。不同的是在JavaScript中一个数组可以存放任意类型值
//创建数组
var arr = new Array(4);
//赋值
arr[0]=1;
arr[1]=true;
arr[2]='123';
arr[3]=10.2;
//访问数组
alert(arr[1]);
数组的常用属性和方法
| 类别 | 名称 | 描述 |
| ---- | --------- | ------------------------------------------------------------ |
| 属性 | length | 设置或者返回这个数组中元素的数目 |
| 方法 | join() | 把数组中的元素放入一个字符串,通过指定的分割符进行分隔 |
| 方法 | sort() | 对数组进行排序并返回这个数组 |
| 方法 | push() | 向数组末尾添加一个或者多个元素,并返回新的长度 |
| 方法 | forEach() | 遍历数组,forEach()方法不会直接修改原始数组,但是回调函数可能会修改 |
forEach()用法:
var num=[1,2,3,4,5,6];
num.forEach(function (value,index,array){
document.write(value);
});
//value:数组元素的值。
//index:可选参数,数组的索引。
//array:可选参数,当前被遍历的数组。
2.Date对象
- 如果没有参数,则表示当前日期和时间,如"var today=new Date();"。
- 参数是字符串格式"MM DD,YYYY,hh:mm:ss",表示日期和时间,如"var today=new Date("July 15,2021,10:07:42");".
var time = new Date(参数);
Date对象的常用方法
| 方法 | 说明 |
| ------------- | ------------------------------------------ |
| getDate() | 返回Date对象的一个月中的每一天,其值为1~31 |
| getDay() | 返回Date对象的星期中的每一天,其值为0~6 |
| getHours() | 返回Date 对象的小时数,其值为0~ -23 |
| getMinutes() | 返回Date 对象的分钟数,其值为0~ 59 |
| getSeconds() | 返回Date 对象的秒数,其值为0~ 59 |
| getMonth() | 返回Date 对象的月份,其值为0~11 |
| getFullYear() | 返回Date对象的年份,其值为4位数 |
| getTime() | 返回自某一时刻(1970年1月1日)以来的毫秒数 |
时钟效果
//动态时钟
setInterval(time,1000);
function time(){
var time=new Date();
var house=time.getHours(); //获取小时
var min=time.getMinutes(); //获取分钟
var sec=time.getSeconds(); //获取秒
document.getElementById("time").innerHTML=house+':'+min+':'+sec; //拼接时分秒
}
3.Math对象
Math对象提供了许多与数学相关的功能,它是JavaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法。
Math对象的常用方法
| 方法 | 说明 | 示例 |
| -------- | ------------------------ | ------------------------------------------------------- |
| ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26<br />Math.ceil(- -25.5);返回-25 |
| floor() | 对数进行下舍入 | Math.floor(25.5);返回25<br />Math.floor( -25.5);返回-26 |
| round() | 把数四舍五入为最接近的数 | Math.round(-25.5);返回25<br />Math.round(25.5);返回26 |
| random() | 返回0~1中的随机数 | Math.random0;例如,0.62736088 14137365 |
Math随机数用法
<div>
本次选择的颜色是:<span id="color"></span>
<input type="button" value="选择颜色" onclick="self()"/>
</div>
<script type="text/javascript">
/* var num=[1,2,3,4,5,6];
num.forEach(function (value,index,array){
document.write(value);
});*/
function self(){
var color=new Array("红",'黄','蓝','绿','橙');
var num=Math.ceil(Math.random()*5)-1;
document.getElementById("color").innerHTML=color[num];
}
</script>
本章总结
- window对象常用属性: hstoy,location、screen。
- window对象常用方法:alert()、confirm()、prompt()、open()、close()、 setInterval()、clearInterval()、setTimeout() clearTimeout()。
- history对象和location对象可以轻松地实现浏览器中“后退”、前进” 和” 刷新”的功能。
- document对象的getElementByld0方法用于访问唯一的元素。
- document对象的getElementsByName()方法用于访问相同name属性的一组元素。
- document对象的getElementsByTagName()方法用于访问相同标签的一组元素。
- JavaScript 内置对象Array对象用于在单独的变量名中存储一系列的值。
- JavaScript内置对象Date对象用于操作日期和时间。
- JavaScript内置对象Math对象可以执行常用的数学任务。
练习小作业:
- 查看不同手机介绍
- 模拟小球移动
- 求数组中元素的和丶最大值和最小值
- 制作时钟特效