Bom的简单总结

Bom

简介：
Bom是前端高级语言javascrpt必不可少的一部分。
Bom（Browser object module）是浏览器对象模型的简称。
将浏览器的各个组成部分封装成对象。
1.Location地址对象

//浏览器交互的方法和接口
//location.href:返回完整的url
console.log(location.href);
//location.pathname:返回url路径名
console.log(location.pathname);
//location.search:返回url的查询部分?开始的内容
console.log(location.search);
//location.hash:返回一个url的锚点部分,url中#号部分
console.log(location.hash);
//location.host:返回一个url的主机名和端口号
console.log(location.host);
//location.hostname:返回url的主机名
console.log(location.hostname);
//location.port:返回url服务器使用的端口号
console.log(location.port);
//locatoin.protocol:返回使用的协议
console.log(location.protocol);

2.window窗口
2.1window事件

<button onclick="onclick1()">单击</button>
<br>
<button ondblclick="ondbl()">双击</button>
<br>
<button>双击</button>
<br>
<input type="text" id="btn">失去焦点和获取焦点
<div onmouseover="fun2()">
	鼠标移动过来啊
</div>
<form action="">
	<input type="text" name="name">
	<br>
	<input type="submit" vlaue="提交">
</form>

// window.alert("hello world");
//点击事件
function onclick1() {
	alert("这是一个单击事件");
};
//双击事件
function ondbl() {
	alert("这是一个双击事件");
};
let input = document.querySelector("input");
// console.log(input);
//获取焦点
// input.onfocus = function() {
// 	console.log("你获取了焦点");
// }
//失去焦点
function show() {
	alert("hello world");
}
// input.addEventListener('focus', show);
input.addEventListener('focus', function() {
	// alert("hello");
})
input.addEventListener('blur',function(){
	// alert("你失去了焦点");
})
// 加载事件:等页面加载完成后,再去执行里面的内容
// window.onload = function(){}
// onload = fun1;
function fun1(){
	alert("我能使用了");
}
//鼠标事件
//onmouseover:鼠标移动在该元素的上面就会触发
function fun2(){
	// alert("我是fun2");
}
//onmousemove:鼠标在该元素上移动就会触发
let div = document.querySelector("div");
div.onmousemove = function(){
	// alert("我是onmousemove");
}
//onmouseout:鼠标从该元素上移开时就可以使用
div.addEventListener('mouseout',function(){
	// alert("我是onmouseout");
});
//onmousedown:鼠标按钮按下时
div.onmousedown = function(){
	// alert("我是onmousedown");
}
//onmouseup:鼠标按钮松开时
div.addEventListener('mouseup',function(){
	// alert("我是onmouseup");
});
//键盘事件
//onkeydown:某个键被按下时.
onkeydown = function(){
	// alert("有键按下");
}
//onkeydown:当某个键被松开时
window.addEventListener('keydown',function(){
	// alert("按键被松开时");
});
//onkeypress:当某个键被按下并松开时.
onkeypress = function(){
	// alert("按下并松开");
}
//onchange:域控制事件
input.onchange = function(){
	alert("我是域控制事件");
}
//onsubmit:提交事件,button按钮被提交时,按钮被提交,return true提交  return false不能提交
let input1 = document.querySelectorAll("input")[1];
let form = document.querySelectorAll("form")[0];
form.onsubmit = function(){
	if(input1.value==""){
		alert("输入不能为空");
		return false;
	}
}

2.2定时器.

<button>停止setInterval</button>
<br>
<button>停止setTimeout</button>

//setInterval(函数,毫秒数)：以指定的时间为周期循环执行函数内的内容
//clearsetInterval(变量):清除setInterval变量。
//setTimeout(函数,毫秒数)：在指定的时间后执行该函数,只执行一次
//clearTimeout(变量):清除setTimeout函数。
let time1 = setInterval(function(){
	// alert("setTnterval");
},1000)
let but = document.querySelectorAll("button");
but[0].onclick=function(){
	clearInterval(time1);
};
let time2 = setTimeout(function(){
	alert("setTimeout");
},5000)
but[1].onclick = function(){
	clearTimeout(time2);
}