BOM 事件

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()
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ★【知识点】: 1、掌握什么是BOM2、掌握BOM的核心-window对象3、掌握window对象的控制、弹出窗口...
    越IT阅读 2,489评论 0 2
  • 什么是BOM?BOM windowwindow是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通...
    Adapa阅读 443评论 0 0
  •   ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天晓阅读 897评论 0 0
  • DOM、BOM、事件知识总结 DOM相关知识 DOM(Document Object Model)文档对象模型 如...
    杜梦石阅读 499评论 0 3
  • 今天忙乎了一天,大家一起加班到十一点了才回家。洗洗睡了,明天还有事情。 计划 7:00 看书 8:00 ...
    郑清文阅读 63评论 0 0