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

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 对象的常用属性

表示浏览器中打开的窗口

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息
screen	只读属性，包含客户端显示屏幕的信息

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

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

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

4.3.2 Window 对象的常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式
clearTimeout( )	用于停止执行setTimeout( )方法的函数代码
clearInterval( )	用于停止 setInterval( ) 方法执行的函数代码

4.3.3 open() 和 close() 方法

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

window.close();

4.3.4 窗口特征

属性名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的x坐标、y坐标，以像素计
toolbar=yes | no | 1 | 0	是否显示浏览器的工具栏，黙认是yes
scrollbars=yes | no | 1 | 0	是否显示滚动条，黙认是yes
location=yes | no | 1 | 0	是否显示地址地段，黙认是yes
status=yes | no | 1 | 0	是否添加状态栏，黙认是yes
menubar=yes | no | 1 | 0	是否显示菜单栏，黙认是yes
resizable=yes | no | 1 | 0	窗口是否可调节尺寸，黙认是yes
titlebar=yes | no | 1 | 0	是否显示标题栏，黙认是yes
fullscreen=yes | no | 1 | 0	是否使用全屏模式显示浏览器，黙认是no。处于全屏模式的窗口必须同时处于剧院模式

4.3.5 History 对象

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

类别	名称	说 明
属性	length	返回历史记录列表中的网址数
方法	back()	加载 History 对象列表中的前一个URL
forward()	加载 History 对象列表中的下一个URL
go()	加载 History 对象列表中的某个具体URL

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

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

4.3.6 Location 对象

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

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

4.3.7 Document 对象

Document对象代表整个HTML文档

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

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";

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join()	把数组的所有元素放入一个字符串，通过逗号或指定的分隔符进行分隔
sort()	对数组排序
push()	向数组末尾添加一个或更多元素，并返回新的长度
forEach()	遍历数组，forEach()方法不会直接修改原始数组，但是回调函数可能会修改

• 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");
// 返回指定日期和时间

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

4.5.3 Math对象

提供与数学相关的功能

方法	说明	示例
ceil()	对参数进行上舍入	Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25
floor()	对参数进行下舍入	Math.floor(25.5);返回25Math.floor(-25.5);返回-26
round()	把参数四舍五入为最接近的数	Math.round(25.5);返回26Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

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

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

---

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