javaWeb(五)----- BOM

BOM

✔  概念:Browser Object Model 浏览器对象模型

* 将浏览器的各个组成部分封装成对象

✔  组成:

* Window   窗口对象

* Navigator   浏览器对象(不重要)

* Screen   显示器屏幕对象 (不重要)

* History   历史记录对象

* Location   地址栏对象

✔  Window:窗口对象

☛ 创建:Window对象不需要创建可以直接使用

☛ 方法:

(1)与弹出框有关的方法

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

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

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

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

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

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

(2)与打开关闭有关的方法

close() ---   关闭浏览器窗口,谁调用我 ,我就关谁

open() ---   打开一个新的浏览器窗口,返回新的Window对象

(3)与定时器有关的方式

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

* 参数:①   js代码或者方法对象 ;②  毫秒值

* 返回值:唯一标识,用于取消定时器

clearTimeout() ---   取消由 setTimeout() 方法设置的 timeout

setInterval() ---   按照指定的周期(以毫秒计)来调用函数或计算表达式

clearInterval() ---   取消由 setInterval() 设置的 timeout。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Window对象</title></head><body>   <input id="openBtn" type="button" value="打开窗口">   <input id="closeBtn" type="button" value="关闭窗口">   <script>       // alert 方法       alert("hello window");       window.alert("hello a");       // confirm 方法       var flag = confirm("您确定要退出吗?");       if (flag){           // 执行退出操作           alert("欢迎下次再光临!")       }else{           alert("不要手抖哦!")       }       // prompt 方法       var result = prompt("请输入用户名");       alert(result);       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.close();       }       // 一次性定时器       // setTimeout("fun();",3000);       var id = setTimeout(fun, 2000);       clearTimeout(id);       function fun(){           alert('boom~~~');       }       // 循环定时器       // setInterval(fun, 2000);   </script></body></html>

☛ 属性

①  获取其他BOM对象

history     location     Navigator     Screen

②  获取DOM对象

document

☛ 特点

①  Window对象不需要创建可以直接使用 window使用。 window.方法名();

②  window引用可以省略。  方法名();

☛ 案例:轮播图

<!DOCTYPE html><html lang="ch"><head>    <meta charset="UTF-8">    <title>轮播图</title></head><body>  <img id="banner_1" src="./imag/banner_1.jpg" width="100%">  <script>      var number = 1;      function fun(){          number  ;          // 判断number是否大于3          if(number > 3){              number = 1;          }          var image1 = document.getElementById("banner_1");          image1.src = "./imag/banner_" number ".jpg";      }      // 定时器      setInterval(fun, 3000);  </script></body></html> 

✔  Location:地址栏对象

☛ 创建(获取):

①  window.location       ②  location

☛ 方法:reload() ---   重新加载当前文档,即刷新

☛ 属性:href  ---   设置或返回完整的 URL

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Location对象</title></head><body>   <input type="button" id="btn" value="刷新">   <input type="button" id="go" value="去">   <script>       // reload 方法,定义一个按钮,点击按钮,刷新当前页面       // 获取按钮对象       var button = document.getElementById("btn");       button.onclick = function(){           location.reload();       }       // var h1 = location.href;       // alert(h1);       var button1 = document.getElementById("go");       button1.onclick = function(){           location.href="http://www.itcast.cn";       }  </script></body></html>

☛ 案例:页面的自动跳转

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自动跳转</title>    <style>        p{            text-align: center;        }        span{            color: red;        }    </style></head><body><p>     <span id="time">5</span>秒之后,自动跳转到首页...</p><script>    var second = 5;    var timeElement = document.getElementById("time");    function showTime(){        second -- ;        if (second<=0){            location.href="http://www.baidu.com";        }        timeElement.innerHTML = second "";    }    setInterval(showTime,1000);</script></body></html>

✔  History:历史记录对象

☛ 创建(获取):

①   window.history

②  history

☛ 方法:

①  back()    加载 history 列表中的前一个 URL

②  forward()    加载 history 列表中的下一个 URL

③  go(参数)    加载 history 列表中的某个具体页面

参数: 正数  ---  前进几个历史记录

负数  ---  后退几个历史记录

☛ 属性:length ---  返回当前窗口历史列表中的 URL 数量

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>History对象</title></head><body>   <input type="button" id="btn" value="获取历史记录的个数">   <a href="9_History对象2.html">09页面</a>   <input type="button" id="forward" value="前进">   <script>       var button = document.getElementById("btn");       button.onclick = function(){           // 获取当前窗口历史记录个数           var length = history.length ;           alert(length);       }       var button1 = document.getElementById("forward");       button1.onclick = function(){           history.forward() ;       }   </script></body></html>

来源:https://www.icode9.com/content-1-770501.html

(0)

相关推荐