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()方法,需要重点掌握,开发中用到最多的也是这个方法。
与窗口关闭和打开相关的方法
//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可以帮我们解决。
轮播图var num = 1;//初始为第一张图片
function change(){
//当超过第四张的时候返回第一张
if (num >4){
num = 1;
}
num++;
pic.src="../img/"+num+".jpg";
}
//设置2s换一张图
setInterval(change,2000);
2.Location地址栏对象
1. 创建(获取):
1. window.location
2. location
2. 方法:
reload()重新加载当前文档。刷新
3. 属性
href设置或返回完整的 URL。
这里方法和属性有很多,不过毕竟是后端学习,我就没有学习那么多,就学用的最多的,举例:
Locationflush.οnclick=function(){
location.reload();//刷新
}
var change = document.getElementById("change");
change.οnclick=function(){
location.href="https://www.baidu.com";
}
3.History历史记录对象
1. 创建(获取):
1. window.history
2. history
2. 方法:
* back()加载 history 列表中的前一个 URL。
* forward()加载 history 列表中的下一个 URL。
* go(参数)加载 history 列表中的某个具体页面。
* 参数:
* 正数:前进几个历史记录
* 负数:后退几个历史记录
3. 属性:
* length返回当前窗口历史列表中的 URL 数量。