JAVA后端需要会js吗_Java后端需要掌握的JS-------BOM

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

1.什么是BOM

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

2.BOM的五大对象

先来看一张图:

df5e679b819af5d139fa1e653b30afa2.png

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

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可以帮我们解决。

轮播图

1.jpg

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。

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

Location

flush.ο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 数量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值