JavaScript—BOM

BOM是什么？

Browser Object Model是浏览器对象模型

官方：浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象

人话：用来获取或设置浏览器的相关的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号、浏览器提示语句、粘贴复制……

BOM有什么作用？

获取或设置屏幕的分辨率、禁止浏览器粘贴复制……

BOM和DOM有什么区别？

BOM：浏览器对象模型，获取或设置浏览器的属性

DOM：文档对象模型，获取或设置文档中标签的属性，例如：获取或设置input表单的value值、节点的增删改查，对标签的一些具体操作

BOM有什么缺陷？

不具备浏览器兼容性

BOM里面有什么？

window对象（全局对象）：

confirm

location

screen

history

事件对象

注：window就是一个全局的对象（Global），是一个全局的容器。所有的东西都是它的成员

---

window对象

1、弹窗

①、确认框（confirm）

window.confirm("sometext");用于验证是否接收用户操作，“确认”返回true，“取消”返回false

②、警告框（alert）

用于确保用户可以得到某些信息，当警告窗出现后，用户需要点击确定按钮才能继续进行操作。

window.alert("sonetext");

③、提示框（prompt）

用于提示用户进入页面前输入某个值。

点击按钮查看输入的对话框。
点我

2、reload（）方法：刷新

Window.location.href="url"；//href：获得或返回页面所在地址
Window.location.reload();

 

---

screen对象

获取屏幕分辨率：width、height

---

history对象

包含浏览器历史，与浏览器前进后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同。go(1)，参数表示跳转页面的个数，表示前进一个页面

history.back() - 与在浏览器点击后退按钮相同。go(-1)，表示页面跳转的个数，表示后退一个页面

history.go(0);表示刷新页面

实战：

 history1.html

    
    
    


    history对象跳转

    

history2.html

---

Location对象

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

---

事件对象

1、C#、js对比

C#中：

js中：

2、什么是事件对象？

用来记录一些事件发生时的相关信息的对象（比方说点击按钮时用的哪个鼠标、在屏幕什么位置等等）

3、如何编程？

事件是一个待执行方法，不是我们去调用，而是浏览器。因某个事情的触发而自动的调用。

4、语法：

事件 = function（）{ }；

这个函数是由浏览器自己调用，那么事件的参数也与浏览器有关。火狐浏览器会在调用事件执行方法的时候，传入一个参数，表示事件对象。

所以我们的代码需要修改成

事件=function(e）{ }；

早期的IE浏览器（实际上现在的IE也保留），没有这个参数

5、常用成员

鼠标坐标：screenX、screenY    与浏览器页面区域左上角为原点

         clientX、clientY   与浏览器页面区域左上角为原点

         layerX、layerY      与div左上角为原点

鼠标按键：button

功能键：altKey、ctrlKey、shiftKey（表示事件发生时键被按下并保持，为false则键没有按下，反之）

鼠标事件：onmouseover、onmouseout

• onmouseover: 事件会在鼠标指针移动到指定的元素上时发生
• onmouseout: 事件会在鼠标指针移出指定的对象时发生。

实战

①、点击鼠标左中右键，出现不同数字

②、鼠标坐标

③、功能键

---

计时事件

计时器：setInterval() - 间隔指定的毫秒数不停地执行指定的代码

创建：number window.setInterval（“javascript函数”，milliseconds）;每隔指定毫秒后调用一次回调函数，返回一个（我觉得有点循环执行的意思）

关闭：windo.clearInterval（计时器Id）

延时器：setTimeout() - 在指定的毫秒数后执行指定代码

创建：number window.setTimeout(callback,millisecond);等待指定时间调用回调函数，注意只会执行一次，返回的是延时器id

关闭：clearTimeout（延迟其Id）

实战

计时器

第一种方法：

    
    
    


    
现在时刻：
    

第二种方法：

    
    
    


    
现在时刻：
    

倒数跳转：10秒倒计时跳转到其他页面

    
    
    


    
请等待10秒后跳转

延时器

---

clipboardData对象—剪贴板

设置值：clipboardData.setData("text",value);

获取值：  clipboardData.getData("text");

清除值：clipboardData.clearData("text");

oncopy事件、onpaste事件、oncut事件

实战：

获取、设置值

禁止复制、禁止粘贴、复制添加版权案例

    
    
    
    


    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文
    
美文美文美文美文

---

项目实战—动画案例

高度变化

    
    
    

    


    
    

        
111111111
        
111111111
        
111111111
        
111111111
        
111111111
        
111111111
    

位置变化