BOM编程
什么是BOM?
Brower Object Model(浏览器对象模型,)关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等,都是BOM编程
BOM和DOM的区别与联系?
BOM的顶级对象是:window
DOM的顶级对象是:document
实际上BOM是包括DOM的!
1、BOM编程中,window对象是顶级对象,代表浏览器窗口
2、window有open和close方法,可以开启窗口和关闭窗口
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')"/>
<input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')"/>
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')"/>
<input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')"/>
<input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','top')"/>
<input type="button" id="" value="打开表单验证" onclick="window.open('002-open.html')" />
002-open.html
<input type="button" id="" value="关闭当前窗口" onclick="window.close();" />
弹出消息框和确认框
<script type="text/javascript">
function del(){
/*var ok = window.confirm("亲,确认删库跑路吗?");
if (ok) {
alert("赶紧跑路吧,亲!")
}*/
if(window.confirm("亲,确认删库跑路吗?")){
alert("赶紧跑路吧,亲!")
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息框')" />
<input type="button" value="弹出确认框(确认删除)" onclick="del()" />
history对象
007.html页面body中的内容
<a href="006-history对象.html">006</a>
006-history对象.html
先打开007page
<input type="button" value="后退" onclick="window.history.back()" />
<input type="button" value="后退" onclick="window.history.go(-1)" />
设置浏览器地址栏上的URl
<script type="text/javascript">
gobaidu = function(){
//var locationobj = window.location;
//locationobj.href="http://www.baidu.com";
//window.location.href = "http://www.jd.com";
//window.location = "http://www.126.com";
//document.location.href = "http://www.sina.com.cn"
document.location = "http://www.sina.com.cn"
}
</script>
<input type="button" value="百度" onclick="gobaidu()"/>
总结:
有哪些方法可以通过浏览器发起请求?
1、表单form的提交。
2、超链接
3、document.location
4、window.location
5、window.open(“url”)
6、直接在浏览器地址栏上输入URl,然后回车(这个也可以手动输入,提交数据也可以成为动态的)
以上所有的请求方式均可以携带数据给服务器,只有通过表单数据提交的数据才是动态的。
灵魂画手的思维导图,好好学加油!奥里给,我居然现在才知道代码前面加上什么语言,代码就会变色!!??
JavaScript思维导图