BOM操作
操作浏览器,通过浏览器厂商提供的指定的方法
1,三大弹窗
window.alert() 提示窗
window.confirm() 确认框
点击确定,返回值true,点击取消,返回值是false
window.prompt() 输入框
执行结果是输入的数据内容
数据类型都是字符串类型
如果输入的是数据,要进行数据类型转化
2,获取浏览器滚动条上卷和左右移动的高度或者宽度
var height = document.documentElement.scrollTop || document.body.scrollTop;
var width = document.documentElement.scrollLeft || document.body.scrollLeft;
可以获取也可以设定,设定时,只要数值,不要px单位
设定时,为了兼容,最好也写两个设定
一.BOM 操作
BOM：浏览器对象模型
可以操作浏览器的方法
所谓的操作浏览器的方法,是各个浏览器厂商提供给我们的
浏览器厂商允许我们操作浏览器,我们才可以操作,如果不允许,就不能操作
各个浏览器厂商,都有自己的特点,因此,BOM操作,有兼容性需要考虑
二.浏览器三大弹窗操作
1,提示框 / 警告框
window.alert(‘弹出内容\n警告内容’);
转义符
类似于 HTML中的 字符实体 是为了解决 输入内容和JavaScript代码的冲突
例如,要在弹框中,实现换行
\n 换行
’ 单引号
" 双引号
\r 回车
\t 横向跳格 (Ctrl-I)
\ 反斜杠
\f 纵向的间隔
注意:各个浏览器对转移符的支持效果不同,执行效果也不一样
我们只要记住前三个就可以了
2,输入框
作用: window.prompt(‘提示内容’);
弹出一个输入框,可以输入数据,()中定义的内容,作为输入数据的提示内容
输入框执行结果,可以使用变量来存储
存储的内容,是数据的数据内容
问题: 输入的数据,存储的方式是,字符串类型
如果是输入数值,需要计算,必须把数据类型转化为数值
var userName = window.prompt(‘请输入账号’);
var userPwd = window.prompt(‘请输入密码’);
console.log(userName,userPwd);
将 纯数字的 字符串 转化为数值类型方法
方法1 : parseInt() 获取整数部分
var res1 = parseInt(window.prompt(‘请输入密码’));
console.log(res1);
方法2 : 执行非 加法的 不影响数值的 运算
var res2 = window.prompt(‘请输入密码’) - 0 ;
var res2 = window.prompt(‘请输入密码’) * 1 ;
var res2 = window.prompt(‘请输入密码’) / 1 ;
console.log(res2);
方法3 : 在数值前,添加 + 正号 / - 负号
获取 整数 的部分
但是要注意,正数和负数的问题
- 正号 : 正数获取的正数结果 负数获取的是负数结果
- 负号 : 正数获取的负数结果 负数获取的是正数结果
var res2 = -window.prompt(‘请输入密码’);
console.log(res2);
3,确认框
作用: window.confirm(‘提示内容’);
点击确定按钮,window.confirm()执行结果,返回值是 true
点击取消按钮,window.confirm()执行结果,返回值是 false
可以根据,返回值,执行不同的操作
var res = window.confirm(‘请问您是否确定删除这个邮件’);
console.log(res);
三.获取浏览器滚动条高度
获取 浏览器滚动条高度
获取浏览器滚动条,分为宽度和高度两个属性
获取浏览器滚动条的高度,宽度
1.获取高度的兼容性
有没有 文档类型声明
有 : document.documentElement.scrollTop;
没有 : document.body.scrollTop;
如果获取方式错误,程序不会报错,只是获取的结果是0
var height1 = document.documentElement.scrollTop;
var height2 = document.body.scrollTop;
console.log(height1 , height2);
实际当中要确保,始终可以获取到正确的数值,不管有没有文档类型声明
做 兼容处理
var 变量 = 方式1 || 方式2 ;
当方式1有结果时,数值会转化为 true , 方式2,就不会执行
变量中存储的是方式1,获取的结果
当方式1结果是0时,数值会转化为 false , 方式2会执行
变量中,先存储方式1的结果0,再存储方式2的结果,最终为方位2的结果
最终的效果,就是确保变量中,始终有数值存储,
console.log(document.documentElement.scrollTop);
console.log(document.body.scrollTop);
浏览器上卷(竖着)的高度
var height = document.documentElement.scrollTop || document.body.scrollTop
浏览器移动(横着)的宽度
var width = document.documentElement.scrollLeft || document.body.scrollLeft;
console.log(height , width);
2.利用属性来设定
设定滚动条,移动的宽度和高度
直接设定数值就可以,不要加PX
document.documentElement.scrollTop = 500;
document.documentElement.scrollLeft = 500;
四.浏览器滚动条demo
详解：
五.名词解释
服务器
所谓服务器,就是装载了服务器软件的电脑
作用:可以将电脑作为一个终端,电脑中的内容可以在网上被访问
也就是你写的网页,可以通过服务器软件,被其他电脑通过地址访问到
服务器软件 : Apache 阿帕奇服务器
IP地址
每一台电脑,在互联网上,都有一个地址,这个地址是唯一的,通过这个地址,可以访问这台电脑
前提是这台电脑,已经在服务器上配置好了,允许访问
如果你要搭建一个服务器,就要设定好服务器的IP地址,其他电脑就可以访问了
域名
IP地址是一长串数值,不方便记忆,通过转化,将IP地址转化为文字或者字母,方便记忆
2408:80f0:410c:1c:0:ff:b00e:347f 百度的IP地址
www.baidu.com 百度的域名
端口
端口是软件程序与计算机沟通的通道
每一个软件都必须设定一个独立的端口
如果端口重复冲突,软件会无法正常执行
一般的软件都设定好了端口,不用我们去专门设定
搭建服务器时,要设定服务器的端口,如果设定有问题,服务器无法执行
六.BOM操作地址栏信息
<button id="btn">点击刷新</button>
获取浏览器地址栏信息
window.location
console.log(window.location);
1, window.location.reload() 方法
页面重新加载/刷新方法
window.location.reload(); // 不能直接写,否则会一直刷新
一般是于判断和事件绑定执行,不能单独执行
点击刷新,5秒钟之后刷新
移动端,浏览器刷新不方便点击,可以设定按钮点击
btn.onclick = function(){
window.location.reload();
}
2, window.location.href
获取地址栏的信息内容
中文 显示为 %两位十六进制数值
可以将 %XX 转化为中文
直接获取地址栏信息
console.log(window.location.href);
将地址栏信息中文正常显示 decodeURIComponent()
console.log(decodeURIComponent(window.location.href)) ;
3, window.location.host
获取地址栏信息中,主机地址信息
当页面再服务器运行时,可以获取服务器主机地址信息,一般是IP地址或者域名
4, window.location.port
获取地址栏信息中,端口的数值
所谓的端口,是计算机程序,与计算机本身,沟通的通道
每一个软件,运行时,都要有独立的与计算机沟通的通道
这个通道,我们称为 端口
每个软件都有一个独立的端口
此时获取到的往往是 服务器 运行的端口
5, window.location.search
获取地址栏信息中,传参的数据
在浏览器地址栏中,可以实现数据的传递,也就是传递参数
格式是 地址?传参的数据
获取的是 ?以及之后的内容
七.window.location.href的demo
页面跳转和5s以后页面跳转
八.BOM操作值获取浏览器相关信息
BOM操作之获取浏览器相关信息
console.log(window.navigator);
获取浏览器版本号,内核,型号,等相关信息
console.log(window.navigator.userAgent);
浏览器软件名称
任何一个浏览器,获取结果都是 Netscape 网景公司
Netscape 是一个标准浏览器生成公司
现在为了致敬网景公司,appName,统一都是 Netscape
console.log(window.navigator.appName);
浏览器软件版本信息
console.log(window.navigator.appVersion);
本地电脑,操作系统信息
console.log(window.navigator.platform);
九.BOM操作之跳转
BOM 操作之浏览器的跳转 window.history
在一个浏览器窗口中,打开页面,会有前进,后退,操作
可以通过JavaScript程序,实现 浏览器按钮的 前进 后退 功能
一般多用于页面注册,填写信息,电商购物平台
上一步,下一步等类似操作使用
console.log( window.history )
window.history.length 当前窗口一共访问过几个页面
window.history.back() 功能就是 后退 功能
返回到上一个访问的页面
window.history.forward() 功能就是 前进 功能
前进到下一个访问的页面
window.history.go(数值) 跳转到指定位置的页面
通过设定跳转几个页面来实现
+数值 就是前进
-数值 就是后退
设定的数值是跳转的次数
问题1:
重复访问,length会不会增加?
只要通过超链接访问,或者window.location.href,跳转访问的页面
即时是重复页面,也会增加 length 长度
问题2:
length,只记录本窗口访问的次数,新窗口访问的不算
target="_blank" 不算length长度
问题3:
如果浏览页面过多,如何判断访问的页面
通过超链接来控制用户访问的页面和跳转的聂荣
例如:demo中
页面1,只能去页面2
页面2,只能去页面3
页面3,只能去页面4
页面4,只能去页面5
页面5,只能去页面6
页面6 就到头了
这样的话,每次跳转的内容就是固定的内容
十.BOM操作之浏览器常见事
BOM操作之浏览器常见事件
什么是事件
所谓的事件,就类似于一个约定
当触发条件时,就会执行,指定的程序
例如 click 点击事件
给标签绑定点击事件 当标签触发 点击条件时 执行绑定的程序
click 点击事件 — 事件类型
onclick 绑定点击事件 , 给标签绑定一个事件类型
function(){} 事件处理函数 , 触发事件时,执行的程序
也可以是一个已经定义好的函数
给div标签,绑定了一个事件类型
事件类型是点击事件类型
当div标签被点击时,触发执行程序
d1.onclick = function(){
console.log(‘我是div,有人点我’);
}
需要绑定已经定义的函数
必须绑定函数名称,或者变量名称
绝对绝对绝对,不能有()
这里绑定的是,函数名称,变量名称中存储的, 函数的地址
如果有 () , d2.onclick = fun() ×
将 fun() 的执行结果, 绑定给事件
function fun(){
console.log(‘我是定义好的函数程序,绑定给div点击事件’)
}
var fun2 = function(){
console.log(123)
}
给点击事件,绑定一个fun函数名称中,存储的函数地址
触发事件时,调用地址,找到对应的函数,执行函数程序
d2.onclick = fun ;
d3.onclick = fun2 ;
load 事件 window.onload = function(){}
页面加载事件
当页面程序都加载结束之后,执行的程序
如果JavaScript程序定义在其他程序(html,css)之前,
绑定 load 事件 , 让程序在 页面加载完毕之后,再执行
不推荐使用这种方法
一般是将script标签,写在程序的最下方
外部导入js文件,要么放在head中
要么也放在body的最下方
open 事件 window.open(‘url地址’)
定义打开的页面 — 新窗口打开页面
window.location.href = ‘url地址’ 当前窗口打开页面
loc.onclick = function(){
window.location.href = ‘https:/www.baidu.com’; → 当前页面中打开窗口
}
ope.onclick = function(){
window.open(‘https:/www.baidu.com’) ; → 在新页面中打开窗口
}
scroll 事件 window.onscroll = function(){}
滚动条事件
当浏览器 滚动条 位置发生改变时,触发事件
window.onscroll = function(){
console.log(‘我滚了’);
}
resize 事件 window.onresize = function(){}
当页面大小发生改变时,触发事件
window.onresize = function(){
console.log(‘我改了’);
}
close 事件 window.close()
关闭当前页面事件
c.onclick = function(){
window.close();
}
总结
常用的:
click scroll
其他不是很常用
有的有on,有的没有on,是JavaScript的固定语法形式,记住就行了
