BOM 事件
2018-08-26 本文已影响0人
努力进化
1.window.confirm(“msg”)
功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;
eg:点击确定按钮删除小米5
技术要点:点击确定resutl返回true,取消返回false
<div>
<p id="mi">小米</p>
<button id="btn">删除</button>
<script>
var mi=document.getElementById("mi");
var btn=document.getElementById("btn");
btn.onclick=function(){
var result = window.confirm("你确定删除小米吗？");
if(result){
mi.parentNode.removeChild(mi);
}
}
</script>
</div>
confirm.png
经自己敲代码发现，window.alert 和 window.confirm都是弹出对话框，只不过前者是弹出一个带确定按钮的警告框。后者是带确定和取消按钮的对话框。
2.window.prompt(“text,defaultText”) [ 不太熟悉，需要实际操作]
参数说明:
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
<script>
var ping= window.prompt("请问平帅帅不帅？","帅");
document.write(ping);
</script>
prompt.png
即点击确定就是显示对话框中的文本，点击取消按钮就是显示null。
3.window.open(pageURL,name,parameters)
参数说明:
pageURL:子窗口的路基
name:子窗口的句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters：窗口参数(各参数之间用逗号分隔)
<body>
<a href="#" onClick="window.open('01.html', '01', 'width=400, height=400, scrollbars=no'); return false">
[打开01.html]
</a>
</body>
open.png
参数.png
4.screen对象 (屏幕)
screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight
<script>
document.write("可用宽度："+screen.availWidth);
document.write("可用高度："+screen.availHeight);
</script>
screen.png
5.location对象
location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。
location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
语法：location.host
功能:返回服务器名称和端口号
语法：location.hostname
功能:返回不带端口号的服务器名称
语法：location.pathname
功能：返回URL中的目录和(或)文件名
语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串
eg:location.assign(加载新文档)
<button id="btn" onclick="myfunction()">fenbie</button>
<script>
function myfunction(){
location.assign("http://www.w3school.com.cn");
}
</script>
6. history对象
history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能:回到历史记录的上一步
相当于是用了history.go(-1)
//-1表示前一步,-2前两步
语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()
语法：history.go(-n)
功能:回到历史记录的前n部
语法:history.go(n)
功能:回到历史记录的后n步
1.history.back() 方法加载历史列表中的前一个 URL。
这与在浏览器中点击后退按钮是相同的
function goBack()
{
window.history.back()
}
2.history forward() 方法加载历史列表中的下一个 URL。
这与在浏览器中点击前进按钮是相同的
function goForward()
{
window.history.forward()
}
