Java后端需要掌握的JS——-BOM
Java后端需要掌握的JS——-BOM
1.什么是BOM
这个全称是Browser Object Model浏览器对象模型,将浏览器各个组成部分封装成对象
2.BOM的五大对象
先来看一张图：
五大基本的对象位置大概如上图，主要就是下面的五个：
Window：窗口对象（重点）
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象（重点）
Location：地址栏对象（重点）
上面的三个加黑的是常用到的，必须要熟练，具体使用如下：
1.Window：窗口对象（重点）
-
窗口对象的特点：
Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。 方法名();
这也是我们学习js常用的，像之前的alert()方法，其实可以写成
window.alert(),不过由于语法可以直接写，window省略了。 -
窗口对象的两个属性
-
获取其他BOM对象：
history
location
Navigator
Screen: -
获取DOM对象
document
-
-
常用的方法（重点）
这里我将其分为了几个小类，便于记忆：
-
与弹出窗口相关的方法
//1.与窗口弹出相关的方法 //1.警告窗口 alert("警告窗"); //2.误操作弹出窗 var b = confirm("你确定要删除吗？"); if (b) { alert(b+"删除成功"); }else{ alert(b+"取消删除"); } //3.输入框 var s = prompt("请输入你的名字"); alert("你的名字是"+s);上面的用的最多的是confirm()方法，需要重点掌握，开发中用到最多的也是这个方法。
-
与窗口关闭和打开相关的方法
<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()方法。否则关闭的是当前的页面。 -
与计时器相关的方法
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
qklbishe.com区块链毕设代做网专注|以太坊fabric-计算机|java|毕业设计|代做平台 » Java后端需要掌握的JS——-BOM
