JavaScript:BOM

BOM

BOM (Browse Object Mode):即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是Window

BOM 由一系列相关对象构成,并且对每个对象提供了很多方法与属性
BOM 缺乏标准,兼容性比较差

Window

Window包含对象:document、 location 、navigation 、screen、 history

window 对象是浏览器的顶级对象,它具有双重角色

1:他是JS访问浏览器窗口的一个接口
2:他是一个全局对象。定义在全局作用域中的变量、函数都会成为window的属性和方法.在调用的时候可以省略window
注意:window下一个特殊属性window.name

<script>
	var num = 10;
	console.log(num);
	console.log(window.num);
	
	function fn(){
		console.log(11);
	}
	fn();
	window.fn();
</script>

获取window尺寸

<body>

<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>

</body>

窗口加载事件

window.noload = function(){}

window.addEvenlistener(“load”,function(){});

window.noload是窗口(页面)加载事件,当文档内容完全加载完成后会触发该事件(包括图像,脚本文件,CSS文件等),就调用处理函数。

注意:window.noload传统注册事件方式只能写一次,如果有多次,会以最后一个window.noload为准

<script>
	window.addEventListener('load',function(){
		var btn = document.querySelector('button');
		btn.addEventListener('click',function(){
			alert('点一点');
		});
	});
</script>

document.addEventListener(‘DOMContentLoaded’,function(){}) IE9以上才支持

DOMContentLoaded事件触发时,当DOM加载完成后触发该事件(不包含样式表,图片,flash等),就调用处理函数。执行顺序在window.onload前面

监听窗口大小调整事件

window.onresize = function(){}

window.addEventListener(“resize”,function(){})

window.onresize 当浏览器窗口大小改变时,就会触发该事件
(window.innerWidth获取当前屏幕的宽度,window.innerHeight获取当前屏幕高度)

其它Window方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

window.screen.availWidth - 可用的屏幕宽度
window.screen.availHeight - 可用的屏幕高度.以像素计,减去界面特性,比如窗口任务栏。

定时器

setTimeout()

window.setTimeout(回调函数,延迟的毫秒数)

setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行回调函数。

<script>
	function callBack(){
		console.log('2秒后');
	}
	//window.setTimeout(callBack,2000);
	//创建多个定时器,这里time1和time2就是不同的定时器了
	var time1 = window.setTimeout(callBack,2000);
	var time2 = window.setTimeout(callBack,3000);
	//清除定时器
	window.clearTimeout(time1);
</script>

setInterval()

window.setInterval(回调函数,间隔的毫秒数)

setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数

<script>
	function callBack(){
		console.log('2秒后');
	}
	//window.setInterval(callBack,2000);
	//创建多个定时器,这里time1和time2就是不同的定时器了
	var time1 = window.setInterval(callBack,2000);
	//清除定时器
	window.clearInterval(time1);
</script>

同步、异步

JS是单线程语言,也就是说同一时间执行一个任务

单线程意味着,所以任务都需要排队,前一个任务结束,才执行后一个任务。这样就导致一个问题:如果前面任务执行的时间过长,后面就必须要等待前面任务完成后才执行,在页面上的表现就是卡顿

为了解决上述问题H5提出wevb worker标准,允许JavaScript脚本创建多线程。于是JS中就出现了同步异步

同步

多个任务按顺序排列执行,前一个任务执行结束后才能继续执行下一个任务

异步

多个任务不按顺序一起执行,后面任务不需要等待前面的任务执行完成就可以开始执行

JS执行机制

1:在JS中同步任务都在主线程上执行,形成一个执行栈
2:异步任务不是开发者自己开辟子线程,而是调用特定函数时,由异步进程判定是否马上将异步任务放到任务队列中。
3:执行栈中所有同步任务执行完后,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行

同步任务

在JS中同步任务都在主线程上执行,形成一个执行栈

异步任务

在JS中异步任务是通过回调函数实现的,异步任务会被添加到任务队列中(任务队列也称为消息队列)等待主线程中的同步任务都执行完后再执行消息队列中的异步任务

一般而言,异步任务有以下三种类型
1:普通事件,如click,resize等
2:资源加载,如load,error等
3:定时器,包括setInterval,setTimeout等

console.log(1);
document.onclick = function(){
	console.log('click');
}
console.log(2);
setTimeout(function (){
	console.log(3);
},3000)
//最后在不点击按钮的情况下,执行顺序为: 1 2 3

//执行栈中同步任务为:console.log(1); console.log(2);

//异步进程中异步任务为:document.onclick ;setTimeout

//当时间过了3秒后将setTimeout加入到消息队列中,
//当document.onclick点击了的时候就将document.onclick放入消息队列中

Location对象

URL

一般语法格式

protocol://host[:port]/path/[query]#fragment
http://www.baidu.com/index.html?name=andy&age=18#link

组成说明
protocol通信协议 常用http ftp maito等
host主机(域名)www.baidu.com
port端口号,可选。省略时使用方案的默认端口号。http默认端口号80
path路径 由零或者多个‘/’符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query参数 以键值对的形式,通过&符合分隔开来
fragment片段 #后面内容常见于链接锚点

属性

location对象属性返回值
location.href获取或设置整个URL
location.host返回主机(域名)www.baidu.com
location.port返回端口号
location.pathname返回路径
location.search返回参数
location.hash返回片段
<button>点击跳转百度</button>
<script>
	var btn = document.querySelector('button');
	btn.addEventListener('click',function(){
		location.href = 'https://www.baidu.com';
	})
</script>

例子:不同页面直接传递数据

//登录页 
<body>
	<form action="index.html">
		用户名:
		<input type="text" name="uname" />
		<input type="submit" value="登录"/>
	</form>
</body>
//点击登录按钮将登录页面输入框数据传递给 index.html页面

//index.html页面 通过location.search拿到传递过来的参数
<script>
	//输出参数?uname=xxx
	console.log(location.search);
	//去掉问好
	var params = location.search.substr(1);
	//利用等号把字符串分割为数组
	var arr = params.split('=');
	console.log(arr);
</script>

方法

location对象方法返回值
location.assign()跟href一样,可以跳转页面
location.replach()替换当前页面,因为不记录历史,所以不能后退页面
location.reload()重新加载页面,相当于刷新按钮或者F5 。如果参数为trun 相当于强制刷新ctrl+f5

Navigator

navigator 对象包含了浏览器的信息,它有很多属性,我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值


<script>
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (!(bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) ){
        return false;
    } else {
        return true;
    }
}
var flag = browserRedirect();//false PC端  ;true 手机端 
</script>

其它方法

navigator.cookieEnabled - 浏览器 Cookie 属性返回 true,如果 cookie 已启用,否则返回 false:
navigator.appName - 属性返回浏览器的应用程序名称:
navigator.javaEnabled() - Java 是否启用?方法返回 true,如果 Java 已启用

History

window 对象给我们提供了history对象,与浏览器历史进行交互。该对象包含用户(在浏览器窗口中)访问过的URL

history对象方法作用
back()后退到上一次访问的网页
forward()前进到之前访问的网页
go(参数)跳转到指定访问过的页面。参数果然是1 前进1个页面。如果是-1 后退1个页面

Cookies

Cookie 是在您的计算机上存储在小的文本文件中的数据。H5之前,存储主要是用cookies。cookies缺点有在请求头上带着数据,大小是4k之内。主Domain污染。

//设置cookies cookie 的名字(cname),cookie 的值(cvalue),以及知道 cookie 过期的天数(exdays)
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//获取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
        if (c.indexOf(name)  == 0) {
            return c.substring(name.length, c.length);
         }
    }
    return "";
}

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}

本地存储

通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。

在 H5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

window.localStorage

存储没有截止日期的数据,即永久存储。
可存储约5M数据,只能存储字符串,可以将对象JSON.stringify()编码后存储

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//删除
localStorage.removeItem("lastname");
//清除所有数据
localStorage.clear()

//实例解释:
//创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
//取回 "lastname" 的值,并把它插到 id="result" 的元素中

window.sessionStorage

针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)
存储容易约20M,只能存储字符串,可以将对象JSON.stringify()编码后存储

// 存储
sessionStorage.setItem("lastname", "Gates");
// 取回
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
//删除
sessionStorage.removeItem("lastname");
//清除所有数据
sessionStorage.clear()

//实例解释:
//创建 localStorage 名称/值对,其中:name="lastname",value="Gates"
//取回 "lastname" 的值,并把它插到 id="result" 的元素中
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页