JS BOM(浏览器对象模型)

一.JavaScript的组成

JavaScript由ECMAScript,BOM,DOM组成;

1.ECMAScript是一种语法标准语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象编码遵循ECMAScript标准。

2.BOM:Browser Object Model(浏览器对象模型)

 提供了独立于内容与浏览器窗口进行交互的对象。

3.DOM:Document Object Mode.(文档对象模型)

DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作HTML和XML功能的一类对象的集合,也有人称DOM是对HTML及XML的标准编程接口。

二.BOM 浏览器对象模型

1.window对象常用属性

(1)screen

说明:有关客户端的屏幕和显示性能的信息

属性:

screen.width/height - 屏幕的宽度/高度

screen.availWidth/availHeight - 除任务屏幕的宽度/高度

window.innerWidth/innerHeight - 屏幕的可视化宽度/高度;

(2)history

说明:有关客户访问过的URL的信息

属性:

history.forward() - 浏览器回到下一步

history.back() - 浏览器返回上一步

history.go(1) == history.forward()

history.go(-1) == history.back();

(3)location

说明:有关当前URL信息

属性:

location.reload() - 刷新

location.reload(true) - 刷新并强制更新缓存

location.href - 地址信息(全)

location.protocol - 协议 http:

location.hostname - 域名 www.baidu.com

location.port - 端口号:8080

location.pathname - 地址 /javascript/index.html

location.search - 查询 ?name=gxy&age=20

location.hash - 哈希值(锚点-?后面的值)

(4)navigator

说明:有关当前浏览器的信息

属性:

navigator.userAgent - 浏览器的头信息

判断当前浏览器是否是手机浏览器?

if((navigator.userAgent).includes("mobile")){

document.write("手机浏览器")

}else{

document.write("pc浏览器")

}

2.window对象的常用方法

(1)prompt:显示可提示用户输入的对话框;

(2)alert:显示一个提示信息和一个确定按钮的警示框

(3)confirm:显示一个带有提示信息和确定,取消按钮的对话框

(4)open方法

说明:打开一个新的浏览器窗口,加载给定的URL所指定的文档

语法:

window.open(URL,name,feature)

URL:打开文件的地址

name:名称

feature:声明浏览器的特征

(5)setTimeout:定时器

(6)setInterval:计时器

3.window对象的常用事件

(1)onload

说明:一个页面或一幅图像完成加载 在对象已加载时触发

(2)onresize

说明:当窗口发生大小变化

语法:

window.οnresize=function(){
                console.log("窗口大小变化");
                console.log("</br>宽"+window.innerWidth+",高"+window.innerHeight)
        }

(3)onscroll

说明:滚动条滚动事件

获取窗口滚动的垂直方向距离:

document.documentElement.scrollTop

获取窗口滚动的水平方向距离:

document.documentElement.scrollLeft

4.编码

(1)转/解URL编码

encodeURL(str);

decodeURL("%E4%B8%AD%E5%9B%BD");

(2)转/解URL编码  包含标点符号

encodeURLComponent;

decodeURLComponent;

(3)如何实现图片上传实时预览?

<input type="file" id="myf" οnchange="preimg()">
        <img src="" alt="" id="mypic">
        <script>
            function preimg() {
                var file = myf.files[0];//只取列表的第一个文件
                // 把图片转换为base46码
                // create创建object对象字符串编码
                var str = URL.createObjectURL(file)
                mypic.src = src
            }
        </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值