JavaWeb学习笔记(16)__BOM

最新推荐文章于 2020-04-12 16:01:01 发布

耿鬼不会笑

最新推荐文章于 2020-04-12 16:01:01 发布

阅读量137

点赞数

分类专栏： # JavaWeb开发基础文章标签： js javascript java window web

本文链接：https://blog.csdn.net/A233666/article/details/105457259

版权

JavaWeb开发基础专栏收录该内容

23 篇文章 2 订阅

订阅专栏

BOM

本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。

目录结构

- - BOM

1.基本概念

概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。
组成：
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象
属性：
1. 获取其他BOM对象：
  history
  location
  Navigator
  Screen:
2. 获取DOM对象
  document
特点
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

2.重要组成

1.Window：窗口对象

1.创建：系统自带，无需创建

2.方法

1.与弹出框有关的方法

alert() 显示带有一段消息和一个确认按钮的 警告框 。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

如果用户点击确定按钮，则方法返回true

如果用户点击取消按钮，则方法返回false

prompt() 显示可提示用户输入的对话框。

返回值：获取用户输入的值

        var flag = confirm("您确定要退出吗？");
        if(flag){
 		alert("欢迎再次光临！");
        }else{
            alert("手别抖...");
        }

        var result =  prompt("请输入用户名");
        alert(result);

2.与打开关闭有关的方法

close() 关闭浏览器窗口。

谁调用我，我关谁

open() 打开一个新的浏览器窗口

返回新的Window对象

        <input id="openBtn" type="button" value="打开窗口">
        <input id="closeBtn" type="button" value="关闭窗口">
        <script>
        //打开新窗口
                var openBtn = document.getElementById("openBtn");
                var newWindow;
                openBtn.onclick = function(){
                    //打开新窗口
                    newWindow = open("https://www.baidu.com");
                }
        //关闭新窗口
                var closeBtn = document.getElementById("closeBtn");
                closeBtn.onclick = function(){
                   // 关闭新窗口//关闭 newwindow对象的窗口,即 baidu.com
                   //不创建newwindow对象，即关闭当前窗口 close();
                    newWindow.close();
                }
        </script>

3.与定时器有关的方法

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

参数：

1.js代码或者方法对象

2.毫秒值

返回值：唯一标识，用于取消定时器

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

     //一次性定时器
            setTimeout("fun();",2000);
            //var id = setTimeout(fun,2000);
            //clearTimeout(id);
     //循环定时器
             var id = setInterval(fun,2000);
             clearInterval(id);
     
     		function fun(){
                 alert('boom~~');
             }

2.Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：

reload() 重新加载当前文档。刷新
属性

href 设置或返回完整的 URL。

	<body>
	    <input type="button" id="btn" value="刷新">
	    <input type="button" id="goItcast" value="去传智">
	    <script>
	        //reload方法，定义一个按钮，点击按钮，刷新当前页面
	        var btn = document.getElementById("btn");//1.获取按钮
	        btn.onclick = function(){ //2.绑定单击事件
	            location.reload(); //3.刷新页面
	        }
	        //获取当前href
	        var href = location.href ;
	        //alert(href);
	        
	        //点击按钮，去访问www.itcast.cn官网
	        //1.获取按钮
	        var goItcast = document.getElementById("goItcast");
	        //2.绑定单击事件
	        goItcast.onclick = function(){
	            //3.去访问www.itcast.cn官网
	            location.href = "https://www.baidu.com";
	        }
	
	    </script>
	</body>

3.History：历史记录对象

创建(获取)：
1. window.history
2. history
方法：
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
属性：

length 返回当前窗口历史列表中的 URL 数量。

    <body>
        <input type="button" id="btn" value="获取历史记录个数">
        <a href="09_History对象2.html">09页面</a>
        <input type="button" id="forward" value="前进">
    <script>
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单机事件
        btn.onclick = function(){
            //3.获取当前窗口历史记录个数
            var length = history.length;
            alert(length);
        }
        //1.获取按钮
        var forward = document.getElementById("forward");
        //2.绑定单机事件
        forward.onclick = function(){
           //前进
           // history.forward();
            history.go(1);
        }
    </script>
    </body>

耿鬼不会笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记(16)__BOM

BOM本文章基于黑马程序员视频教程《JavaWeb从入门到精通》进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。目录结构BOM1.基本概念2.重要组成1.Window：窗口对象2.Location：地址栏对象3.History：历史记录对象1.基本概念1.概念：Browser Object Model 浏览器对象模型* 将浏览器的各个组成部分封装成对象。2.组...
复制链接

扫一扫