BCSP-玄子前端开发之JavaScript+jQuery入门CH03_BOM操作

4.3 BOM模型

BOM：浏览器对象模型（Browser Object Model）

BOM提供了独立于内容的、可与浏览器窗口进行互动的对象结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8FF4eyz-1681958812865)(./assets/image-20230420102821573.png)]

BOM可实现功能

• 弹出新的浏览器窗口
• 移动、关闭浏览器窗口以及调整窗口的大小
• 页面的前进、后退

4.3.1 Window 对象的常用属性

表示浏览器中打开的窗口

window.属性名= "属性值"; 

window.location="https://www.xuanzishare.com";
// 跳转网站

screen.width
// 返回浏览器屏幕的宽度，单位为像素

4.3.2 Window 对象的常用方法

4.3.3 open() 和 close() 方法

window.open( "弹窗内容的url", "窗口名称", "窗口特征", true|false );

window.close();

4.3.4 窗口特征

4.3.5 History 对象

保存用户上网的历史记录，可通过 window.history 属性访问

history.back() = history.go(-1)
// 等价于浏览器中的“后退”
history.forward()  = history.go(1) 
// 等价于浏览器中的“前进”

go() 方法的参数还可以是要访问的URL或URL的子串

4.3.6 Location 对象

包含有关当前URL的信息，可通过window.location属性访问

常用属性

常用方法

4.3.7 Document 对象

Document对象代表整个HTML文档

4.3.8 实际应用

• 动态改变层、标签中的内容

document.getElementById("phone").innerHTML="1+8 Pro Max";

• 访问相同name的元素

var aInput=document.getElementsByName("size");
var sStr="";
for(var i=0; i<aInput.length; i++){sStr+=aInput[i].value+"&nbsp;&nbsp;";
}
document.getElementById("replace").innerHTML=sStr;

• 访问相同标签的元素

var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0; i<aInput.length; i++){sStr+=aInput[i].value+"&nbsp;&nbsp;";
}
document.getElementById("replace").innerHTML=sStr;

4.4 定时函数

• 超时调用：setTimeout()

window.setTimeout("调用的函数", 等待的毫秒数);

var  myTime＝setTimeout("disptime()", 1000);
// 1秒(1000毫秒)后执行disptime()函数一次

• 间歇调用：setInterval()

window.setInterval("调用的函数", 间隔的毫秒数);

var  myTime＝setInterval("disptime()", 1000);
// 每隔1秒(1000毫秒)执行一次disptime()函数

4.4.1 清除函数

• clearTimeout()

clearTimeout(setTimeOut()返回的ID值)

var  myTime＝setTimeout("disptime()", 1000);
clearTimeout(myTime);

• clearInterval()

clearInterval(setInterval()返回的ID值)

var  myTime＝setInterval("disptime()", 1000);
clearInterval(myTime);

如果要多次调用，使用setInterval()或者让被调函数自身再次调用setTimeout()

4.5 JavaScript 内置对象

• Array：用于在单独的变量名中存储一系列的值
• String：用于支持对字符串的处理
• Math：用于执行常用的数学任务，包含若干个数字常量和函数
• Date：用于操作日期和时间

4.5.1 Array 对象

• 创建数组

new Array();
new Array(size);
new Array(element0, element1, …, elementN);

• 为数组元素赋值

var fruit = new Array("apple", "orange", " peach", "banana");
var fruit = ["apple","orange","peach","banana"];

• 访问数组

数组名[下标]

var fruit = new Array(4);
fruit [0] = "apple";
fruit [1] = "orange";
fruit [2] = "peach";
fruit [3] = "banana";

• forEach()方法

array.forEach(callback[, thisArg]);

• callback参数：为数组中的每个元素执行的函数
• thisArg参数：可选，callback函数中的this可以引用的对象

callback(currentValue[, index[, array]])

• currentValue：数组中正在处理的当前元素
• index：可选，数组中正在处理的当前元素的索引
• array：可选，forEach()方法正在操作的数组

4.5.2 Date对象

用于处理日期和时间，使用自UTC（Coordinated Universal Time，国际协调时间）1970年1月1日0时开始经过的毫秒数来保存日期

new Date();
new Date(dateString);

var today=new Date(); 
// 返回当前日期和时间
var sdate=new Date("July 15,2020,10:07:42");
// 返回指定日期和时间

4.5.3 Math对象

提供与数学相关的功能

实现返回一个1～100（含1和100）之间的整数

Math.floor(Math.random()*100+1);

BCSP-玄子前端开发之JavaScript+jQuery入门CH03_BOM操作