Java后端需要掌握的JS——-BOM

Java后端需要掌握的JS——-BOM

1.什么是BOM

​ 这个全称是Browser Object Model浏览器对象模型,将浏览器各个组成部分封装成对象

2.BOM的五大对象

先来看一张图:
Java后端需要掌握的JS-------BOM

五大基本的对象位置大概如上图,主要就是下面的五个:

Window:窗口对象(重点)

Navigator:浏览器对象

Screen:显示器屏幕对象

History:历史记录对象(重点)

Location:地址栏对象(重点)

上面的三个加黑的是常用到的,必须要熟练,具体使用如下:

1.Window:窗口对象(重点)

  1. 窗口对象的特点:

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

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

    这也是我们学习js常用的,像之前的alert()方法,其实可以写成window.alert(),不过由于语法可以直接写,window省略了。

  2. 窗口对象的两个属性

    1. 获取其他BOM对象:
      history
      location
      Navigator
      Screen:

    2. 获取DOM对象

      document

  3. 常用的方法(重点)

    这里我将其分为了几个小类,便于记忆:

    1. 与弹出窗口相关的方法

      //1.与窗口弹出相关的方法         //1.警告窗口         alert("警告窗");         //2.误操作弹出窗         var b = confirm("你确定要删除吗?");         if (b) {             alert(b+"删除成功");         }else{             alert(b+"取消删除");         }         //3.输入框         var s = prompt("请输入你的名字");         alert("你的名字是"+s); 

      上面的用的最多的是confirm()方法,需要重点掌握,开发中用到最多的也是这个方法。

    2. 与窗口关闭和打开相关的方法

      <input type="button" id="openBtn" value="打开百度"> <input type="button" id="closeBtn" value="关闭百度">      //2.与窗口关闭和打开相关的方法         //1.打开新窗口         var baidu;         var openBtn = document.getElementById("openBtn");         openBtn.onclick = function(){             baidu = open("https://www.baidu.com");         };         //关闭打开的百度         var closeBtn = document.getElementById("closeBtn");             closeBtn.onclick = function(){             baidu.close();         } 

      上面的做了 一个处理,想要关闭新打开页面,就要给一个open()的返回值,通过这个返回值去调用close()方法。否则关闭的是当前的页面。

    3. 与计时器相关的方法

      function fun() {             alert("开始了...");         }          //1.一次性定时器以及取消一次性定时器         //setTimeout("fun()",2000);         var time = setTimeout(fun,2000);//设置2s的定时器         clearTimeout(time);//取消上面的定时器          //2.循环定时器以及取消循环定时器         var interval = setInterval(fun,2000);//设置2s的循环定时器         clearInterval(interval);//取消上面的定时器 

      这四个方法,在开发中也能用到,比如不用BootStrap,我们手写轮播图,就需要用到。

      那么这里我给个简单轮播图的写法,当然实际开发中,不许要我们手写,BootStrap可以帮我们解决。

      <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>轮播图</title> </head> <body>  <img src="../img/1.jpg" id="pic">  <script>      var pic = document.getElementById("pic");      var num = 1;//初始为第一张图片     function change(){          //当超过第四张的时候返回第一张         if (num >4){             num = 1;         }         num++;         pic.src="../img/"+num+".jpg";     }      //设置2s换一张图     setInterval(change,2000); </script> </body> </html> 

2.Location地址栏对象

1. 创建(获取): 	1. window.location 	2. location  2. 方法: 	 reload()	重新加载当前文档。刷新 3. 属性 	href	设置或返回完整的 URL。 

这里方法和属性有很多,不过毕竟是后端学习,我就没有学习那么多,就学用的最多的,举例:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Location</title> </head> <body> <input type="button" value="刷新" id="flush"> <input type="button" value="去百度" id="change">   <script>      var flush = document.getElementById("flush");     flush.onclick=function(){         location.reload();//刷新     }      var change = document.getElementById("change");     change.onclick=function(){         location.href="https://www.baidu.com";     }  </script> </body> </html> 

3.History历史记录对象

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

区块链毕设网(www.qklbishe.com)全网最靠谱的原创区块链毕设代做网站
部分资料来自网络,侵权联系删除!
资源收费仅为搬运整理打赏费用,用户自愿支付 !
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » Java后端需要掌握的JS——-BOM

提供最优质的资源集合

立即查看 了解详情