1.BOM的概念
<script>
/*
* BOM: 浏览器对象模型
* 在浏览器中有个顶级对象 : window ---->皇上 window对象可以省略
* 页面(文档)的顶级对象: document ----> 总管太监
* 页面中的内容都是属于浏览器的
*
*
* */
var num = 10;
console.log(window.num); // 变量就是window的
function f1() {
console.log(this);
console.log("呵呵")
}
window.f1();// 函数也是window
window.document.write("哈哈");
//window.write("1111");
//window.alert("你好啊"); // 以后不会用. 阻塞进程
//window.prompt("请输入你喜欢的人");
console.log(confirm("您确定退出吗"));// 返回的是布尔值
//基本不用. 自己用div+css
</script>
2.onload加载事件
<script>
//等页面加载完毕之后再获取按钮
//只要页面加载完毕, 就会触发这个事件
window.onload = function(){
document.getElementById("btn").onclick = function () {
console.log("呵呵")
}
}
</script>
</head>
<body>
<input type="button" value="点我啊" id="btn">
3.location对象
<body>
<input type="button" value="点击" id="btn">
<script src="common.js"></script>
<script>
/*
* location对象: 地址栏的对象
* */
console.log(window.location)
//地址栏上#即后面的内容
console.log(location.hash);
//主机名和端口号
console.log(location.host);
//主机名
console.log(location.hostname);
//文件的路径
console.log(location.pathname);
//端口号
console.log(location.port);
//协议
console.log(location.protocol);
//搜索的内容
console.log(location.search);
my$("btn").onclick = function () {
//点击跳转页面 (设置指定的地址)
location.href = "http://www.baidu.com";
//重新加载
//location.reload();
//替换地址 没有历史记录
//location.replace("http://www.baidu.com");
}
</script>
4.history对象
<body>
<input type="button" value="跳过来" id="btn1">
<input type="button" value="前进" id="btn2">
<script src="common.js"></script>
<script>
//点击跳转到指定的页面
my$("btn1").onclick = function () {
location.href = "09.test.html";
}
//点击前进 history.forward()
my$("btn2").onclick = function () {
// history.forward();
history.go(1)
console.log(history)
}
/*
* history对象
* .back() 返回上一个历史记录
* .forward() 返回下一个历史记录
* .go() 去到指定的历史记录
*
*
*
* */
</script>
1937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
