BOM的概念
BOM全称Browser object model
顶级对象:window=======页面中所有的内容都属于window
window.属性/ window.方法------一般可以省略window不写
对话框:
- alert() 弹框
<script>
//直接用
alert("你好")
</script>
页面中的弹框,这种情况,一般 我们不用,测试的时候用
- prompt() 确定框(确定or取消)
var flag = connfirm("您要注册吗?") //bool类型
console.log(flag); //返回true和false
- confirm() 用户输入的框 String
var s = prompt("请输入你的名字:");
console.log(s);
页面加载事件
- onload()
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}
在html页面中,一般运行顺序是从上到下,当你先写输出语句,再写包装函数时,结果没有显示
这个时候就需要用到onlaod事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
my$("btn").onclick=function(){
alert("123");
}
}
</script>
</head>
<body>
<button id="btn">显示内容</button>
<script src="common.js"></script>
</body>
- onunload()
关闭页面时触发 onbeforeunload:页面关闭前触发----ie有的
location对象
获取地址栏后的#及后面的内容
console.log(window.location.hash);
主机名及端口号
console.log(window.location.host);//localhost:63342
主机名
console.log(window.location.hostname);//localhost
文件的路径---相对路径 console.log(window.location.pathname);///01.%E8%AF%BE%E5%A0%82%E6%A1%88%E4%BE%8B/13location%E5%AF%B9%E8%B1%A1.html
端口号
console.log(window.location.port);//63342
协议
console.log(window.location.protocol);//http:
搜索的内容
console.log(window.location.search);//?_ijt=hnd6q0gvff78gubhmh21pqna3g
my$("btn").onclick=function(){
//获取地址栏后的#及后面的内容
console.log(window.location.hash);
// location.href="05-onload事件.html";//跳转页面,有后退
// location.assign("http://www.baidu.com");//跳转页面,有后退
// location.replace("05-onload事件.html");//跳转页面,没有后退
location.reload();//刷新
定时器
setInterval( 参数1,参数2)
参数1:要重复执行的事情,是一个函数(function())
参数2:时间,单位为毫秒,每个这个时间执行一次参数1这个函数
执行过程:页面加载完毕后,过一秒,执行一次,再过一秒,执行一次,累加
clearInterval() 清楚定时器
claerInterval (定时器的ID)
*只要定义了定时器,就一定要清除*
var timeId = window.setInterval(function () {
alert("你好");//断言
}, 1000);
my$("btn").onclick = function () {
//清除定时器
window.clearInterval(timeId);
}
setTimeout( 函数,时间)
页面加载完成后,过一段时间,就执行函数,但只执行一次
返回值:当前定时器的ID
clearTimeout( 定时器ID)
var timeId = setTimeout(function () {
alert("你好");
}, 1000);
my$("btn").onclick=function(){
clearTimeout(timeId);
}