目录
一.BOM基本介绍
1.基本概念:
①BOM全称 Browser Object Model 意为浏览器对象模型
②它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
③BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分
2.BOM 的组成
①window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
②document 对象,文档对象;
③location 对象,浏览器当前URL信息;
④navigator 对象,浏览器本身信息;
⑤screen 对象,客户端屏幕信息;
⑥history 对象,浏览器访问历史信息;
3.window对象
1.基本概念
①是浏览器的顶级对象
②是 JS 访问浏览器窗口的一个接口
③是一个全局对象,定义在全局作用域中的变量、函数都会变成 window 对象的属性 和方法
在调用的时候可以省略 window,前面的博客--《JavaScript的基础入门》中所提及到 的对话框都属于 window 对象方法,例如 alert()、prompt() 等。
2.常用属性
(1)location
location.href:获取或者设置整个 URL
location.href='目的路径'(设置自己想要跳转的页面,便会自动跳转过去)
location.reload(): 重新加载当前页面,相当于刷新,如果参数为 true,强制刷新
(2)screen
screen.width:返回显示器屏幕的宽度
screen.height:返回显示器屏幕的高度
(3)history:与浏览器的历史记录进行交互,该对象包含用户访问过的 URL
back() 可以后退
forward() 前进功能
go(n) 前进后退功能,参数如果是1,前进1个页面,如果是-1,后退一个页面
3.常用事件
(1).窗口加载事件
①.前言
a.在JS的执行机制中,代码的执行是与Java类似的,按照从上往下的顺序执行的,所 以如果我们要给一个按钮添加点击事件,只能先设置按钮,然后获得按钮在进行操作
<body>
<button class="button">按钮1</button>
<button class="button">按钮2</button>
<script>
var btn = document.getElementsByClassName('button');
btn.onclick = function(){
alert('耶,恭喜您获得好运')
}
</script>
</body>
b.那如果我们想要把绑定的点击事件放置到页面的前面,很明显按照上述方法是无法 操作的。那这个时候就可以通过窗口加载事件来完成想达成的效果
②.加载事件的基本概念
加载事件的方法为 window.onload
当文档内容完全加载完成会触发该事件
window.onload = function(){}
window.addEventListener("load",function(){});
注意:window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准(如果使用 addEventListener 则没有限制)
(2)有关鼠标的事件
①onmouseover:鼠标移入到某个元素上面触发
②onmouseout:鼠标移出某个元素上面触发
③onclick:鼠标移出某个元素上面触发
④onchange:域的内容改变时触发
(关于鼠标事件的详细可见之前的博客--《JavaScript的基础入门》)
4.常用方法
(1) open():可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
URL:在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符 串,那么窗口就不显示任何文档
窗口名称:被打开窗口的方式(这里列举几个常见的)
①_blank:在新窗口显示目标网页
②_top:框架网页中在上部窗口中显示目标网页
③_self:在当前窗口显示目标网页
参数字符串:设置窗口参数,各参数用逗号隔开(宽高等)
例子
需求:打开http://www.baidu.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,
有滚动条窗口:
<script type="text/javascript">
window.open('http://www.baidu.com','_blank','width=300,
height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
(2)close():关闭窗口
window.close();//关闭本窗口
<窗口对象>.close();//关闭指定窗口
(3)与定时器有关的事件
①setTimeout:在指定毫秒数之后调用函数或者计算表达式
window.setTimeout(调用函数 [,延迟的毫秒数]);
window 可以省略
延迟的毫秒数省略默认为 0,如果写必须是毫秒
②clearTimeout:清除由setTimeout()方法设置的timeout
window.clearTimeout();
③setInterval:按照所指定的周期(所定义的毫秒数)来调用函数或者表达式
window.setInterval(回调函数 [,间隔毫秒数]);
window 可以省略
间隔的毫秒数省略默认也是 0,如果写的话,必须是毫秒,表示每隔多少毫秒就自动调用这个函数
第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次
④clearInterval:清除结束定时器的循环调用函数
window.clearInterval(intervalID) 取消了先前调用 setInterval() 建立的定时器
里面的参数就是定时器标识符
例子:发送短信的倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//定义初始的时间
window.onload= function() {
var time = 10;
var bbtn = document.getElementById("btn");
console.log(bbtn);
bbtn.onclick = function() {
bbtn.disabled = true; //设置按钮不能重复按动
time = 10; //倒数计时结束后,又变成10s;
var jsq = setInterval(
function() {
time--;
bbtn.innerHTML = time + "s";
if (time == 0) {
bbtn.disabled = false;
bbtn.clearInterval(jsq);
bbtn.innerHTML = "发送短信";
}
},1000)
}
}
</script>
</head>
<body>
<input type="text">
<button id="btn">发送短信</button>
</body>
</html>
二.内置对象
1.Math数学对象
console.log(Math.PI);
console.log(Math.max(1,2,3,45)); // 取多个值中的最大数
Math.min(1,2,3);
Math.floor(3.4); // 向下取整 3
Math.ceil(3.4); // 向上取整 4
Math.round(1.1); // 四舍五入
Math.abs(-3); // 取绝对值 3
Math.pow(10,2) // 10的2次方
Math.sqrt(100) // 开平方
Math.random(); // 生成0~1之间的随机小数 [0,1) === 左闭右开区间
2.Date 日期对象
var date = new Date();
console.log(date); // Wed Apr 21 2021 19:34:46 GMT+0800
date.getFullYear(); // 返回当前年份
date.getMonth(); // 返回的月份小1月
date.getDate(); // 返回几号
date.getDay(); // 返回周几,周一是1,周日是0
date.getHours();
date.getMinutes();
date.getSeconds();
// 获得总毫秒数从1970年1月1日(时间戳)
date.valueOf();
date.getTime();
// H5 浏览器可以直接用 date 中的方法获取时间戳
var now = Date.now()
// 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳
var now = +new Date()
3.字符串对象
①indexOf(), lastIndexOf() 查找字符位置(和数组类似,可以将字符串也看做数组,第一个字符索引为0)
返回值:
查找的字符串 searchValue 的第一次出现的索引,如果没有找到,则返回 -1②charAt() 按索引返回字符串
var str = 'andy';
str.charAt(3); // 返回index位置的字符
str.charCodeAt(3); // 返回 index 位置的 ASCII 码
str[3]; // 获取指定位置处字符③concat() 拼接字符串
var str1 = "a";
var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = str1.concat(str2, str3);
console.log(str4);
// 输出结果
abc④substr() 按长度截取字符串
substr(start, length); // 从start索引位置开始,length 为取的个数,不输入 length,截取到末尾⑤substring() 截取字符串
substring 提取从 indexStart 到 indexEnd(不包括)之间的字符。⑥slice() 截取字符串
slice(start, end); // 从 start 位置开始,截取到 end 位置(不包括end)。不输入 end 默认截取到结尾substring()与slice()的不同
slice() 方法也可以使用在数组中,并且支持负数索引
substring() 只可以在字符串中使用,不支持负数索引关于字符串的截取
如果 indexStart 等于 indexEnd,substring 返回一个空字符串。
如果省略 indexEnd,substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN,则被当作 0。
如果任一参数大于 stringName.length,则被当作 stringName.length。
如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。⑦replace() 替换字符串
obj.replace('原始内容', '替换后的内容');
字符串替换只替换第一个匹配项目
批量替换需要使用正则⑧toUpperCase(), toLowerCase() 大小写转换
与JAVA用法类似