Bom 相关知识点

一、Bom对象

screen
location
history
navigator

二、Bom方法

confirm、alert、prompt
open 与 close
setTimeout clearTimeout setInterval clearInterval
onload、onresize、onscroll 方法的监听

三、Bom属性

localStorage、sessionStorage
cookie

Bom对象：

首先是screen看代码：

//屏幕的分辨率，即屏幕的宽高
console.log(screen.width,screen.height);
//屏幕可用宽高，可用高度比高度少40px是因为任务栏的高度为40px
console.log(screen.availWidth,screen.availHeight);

location：location属性值: 协议 protocol; 主机ID hostname;地址 href; 端口 port; 路径 pathname(包含了问号); 地址内容 search(包括?) 获取#开始内容 hash;

//location属性值: 协议 protocol; 主机ID hostname;地址 href; 端口 port; 路径 pathname(包含了问号); 地址内容 search(包括?) 获取#开始内容 hash;
	//整个网站地址
			 
           console.log(location.href);//http://127.0.0.1:8848/js/%E4%BD%9C%E4%B8%9A/2022-6-21/01.html
			console.log(location.protocol);//http:
			//去除冒号
			console.log(location.protocol.slice(0,location.protocol.length-1));//http
			console.log(location.hostname);//127.0.0.1
			console.log(location.port);//端口 8848
			console.log(location.pathname);// /js/%E4%BD%9C%E4%B8%9A/2022-6-21/01.html
			console.log(location.search);
			console.log(location.hash);
			
			// location.search()//
			// location.search().slice(1).split("&")//获得数组
			// location.search().slice(1).split("&").forEach(function(item){                          
                    console.log(item);  
               })//遍历数组
			// location.search().slice(1).split("&").forEach(function(item){
                    console.log(item.split("="));
               })//拆分数组

history：有三个属性值 forward() back() go(参数);

//history 有三个属性值  forward() back() go(参数)
			 history.forward();
			 history.back();
			 history.go();//相对于本身的页面，负数为后退，正数为前进  0 为刷新页面

navigator:用户代理

// navigator
			 console.log("用户代理:"+navigator.userAgent); //用户代理

Bom方法：

confirm(" ")：只有一个参数点击是返回true 点击否返回false

//提示信息框 confirm
			 var result=confirm("")//只有一个参数 点击是 返回true 点击否 返回false

prompt(" "," ")：两个参数，如果不点击的话，字符类型为null

 var inputStr=prompt("","")//两个参数，如果不点击的话，字符类型为null

alert(" "):无返回值

alert("nihao ");//无返回值

open(" "," "," "):三个参数 1、网址 2、新网页打开方式(空白)(自身) 3、设置新页面宽高

open("http://www.baidu.com","_blank","width=300,height=300px")//三个参数 1、网址 2、新网页打开方式(空白)(自身) 3、设置新页面宽高

close():关闭打开的页面

 myweb.close();//关闭打开的页面

setTimeout: 延迟执行

setTimeout(function(){
	console.log("wancheng");
},1000)			//延迟事件 1s后输出wancheng

clearTimeout：关闭延迟

setInterval：计数器

clearInterval：关闭计数器

var i=5;
var timer=setInterval(function(){
	console.log(i);
		i--;
		if(i==0){
			clearInterval(timer)
		}
	},1000)

onload：浏览器资源加载完毕后自动调用页面内所有标签加载成功或者失败都会输出加载完毕

window.onload=function(){
	console.log("加载ok！");
}

onresize：页面大小改变后悔自动触发 window.onresize

window.onresize=function(){
	console.log("改变页面大小");
}

onscroll：滚动条滚动输出滚动条滚动了

window.onscroll=function(){
	console.log("滚动条滚动了");
}

Bom属性：

localStorage:

<span onclick="set1()">设置</span>
<span onclick="get1()">获取</span>
<span onclick="remove1()">删除</span>
<span onclick="clear1()">清空</span>
<script>
function set1(){
	localStorage.setItem("name","张亮");//设置
}
function get1(){
		//获取
	alert(localStorage.getItem("name","张亮"))
}
function remove1(){
	localStorage.removeItem("name","张亮");//删除
}
function clear1(){
	localStorage.clear();//清空
}
</script>

sessionStorage:

//sessionStorage
sessionStorage.setItem("name", "zzy");
sessionStorage.getItem('name','zzy');
sessionStorage.removeItem('name','zzy');
sessionStorage.getItem('name','zzy');

cookie:设置有效期

var now = new Date();//设置一个日期
now.setDate(now.getDate()+7);//日期的有效期为7天
document.cookie="name=qiku;expires="+now.toGMTString();

一、Bom对象

二、Bom方法

三、Bom属性

猜你喜欢