JavaScript——BOM知识

2024-05-14 02:08:46

2014093009570524.gif

449064-20150901201202388-1759134225.png

BOM概述

BOM（浏览器对象模型，Browser Object Model），即可以将浏览器的各个部分抽象成对象在JavaScript中进行调用和完成特定的功能。比如对历史记录，地址栏，整个窗口等都可以进行操作。

注意

调用方法时，可以使用"_name()"或者_name，不可以"_name"这样调用。

BOM对象

1. Window对象

1.1 常用属性

  • closed：返回窗口是否已被关闭。

  • document：对 Document 对象的只读引用。请参阅 Document 对象。

  • location：用于窗口或框架的 Location 对象。请参阅 Location 对象。

  • Navigator：对 Navigator 对象的只读引用。请参数 Navigator 对象。

  • opener：返回对创建此窗口的窗口的引用。

  • parent：返回父窗口。

  • screen：对 Screen 对象的只读引用。请参数 Screen 对象。

  • self：返回对当前窗口的引用。等价于 Window 属性。

  • status：设置窗口状态栏的文本。

  • top：返回最顶层的先辈窗口。

  • window：window 属性等价于 self 属性，它包含了对窗口自身的引用。

1.2 常用方法

  • alert()：显示带有一段消息和一个确认按钮的警告框。

  • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

  • prompt()：显示可提示用户输入的对话框。

  • open()：打开一个新的浏览器窗口或查找一个已命名的窗口，通过返回值为子窗口对象，子窗口通过opener传递数据。

  • showModalDialog()：打开一个新的浏览器模式窗口，通过参数和返回值传递数据。

  • close()：关闭浏览器窗口。

  • focus()：把键盘焦点给予一个窗口。

  • blur()：把键盘焦点从顶层窗口移开。

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

  • clearInterval()：取消由 setInterval() 设置的 timeout。

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

1.3 集合

frames[]：返回窗口中所有命名的框架。[]中可以是索引，也可以是name。

1.4 窗口结构

self指代本窗口，和window相同，parent指代父窗口，top指代顶层窗口。结构如图：

spacer.gif

1.5 案例

父子传值（父子关系只存在于框架frame的情况）（chrome[本地]，IE11）

父子传值-父.html：

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>父子传值-父</title>     <link rel="stylesheet" type="text/css" href="css.css">    <script type="text/javascript">   function _father(){     var content = document.getElementById("input").value;       var _ch = self.frames[0].document.getElementById("content");        _ch.innerHTML = content;    }    </script></head> <body>  <br />    <div>父页面</div>  <br />    <div id="whole">      <input type="text" id="input" value="father"/>        <br /><br />        <input type="button" value="传值到子页面" οnclick="_father()">      <br /><br />        <div>传送显示内容：</div>       <div id="content"></div>    </div>    <!--以下是子窗口-->    <div id="sonFrame"><br />子窗口<br /><br />        <iframe id="iframe" src="父子传值-子.html"></iframe>    </div></body> </html>

父子传值-子.html：

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>父子传值-子</title>     <link rel="stylesheet" type="text/css" href="css.css">    <script type="text/javascript">    function _son() {        var content = document.getElementById("input").value;        var _fa = self.parent.document.getElementById("content");        _fa.innerHTML = content;    }    </script></head> <body>    <div id="whole">        <input type="text" id="input" value="son" />        <br />        <br />        <input type="button" value="传值到父页面" οnclick="_son()">        <br />        <br />        <div>传送显示内容：</div>        <div id="content"></div>    </div></body> </html>

效果：

spacer.gif

窗口创建和信息传递（chrome[本地]，IE11）

新窗口-父：

<!DOCTYPE html><html><head>  <meta charset="utf-8" />  <title>新窗口-父</title>    <style type="text/css">   #bank{      width: 200px;       height: 30px;       border: 2px solid red;      text-align: center;     line-height: 30px;  }   </style>  <script type="text/javascript">   function _open(){       /*      创建非模式窗口     //window.open(URL,name,features,replace)        window.open("新窗口-子.html", "城市列表", "width=100px;height=30px;");      */      // 创建模式窗口       var value = window.showModalDialog("新窗口-子.html");       document.getElementById('bank').innerHTML = value;  }   </script></head><body>    <div id="bank"></div>   <input type="button" value="请选择城市" οnclick="_open();"/></body></html>

新窗口-子：

<!DOCTYPE html><html><head>    <meta charset="utf-8" />  <title>新窗口-子</title>    <script type="text/javascript">   function _transfer(name){       /*      非模式窗口通过DOM传递信息      self.opener.document.getElementById("bank").innerHTML = name.value;     window.close();     */      // 模式窗口信息返回     window.returnValue = name.value;        window.close(); }   </script></head><body>    <input type="radio" id="bj" value="北京" name="city"  οnclick="_transfer(this);"/>  <label for="bj">北京</label>  <input type="radio" id="sh" value="上海" name="city"  οnclick="_transfer(this);"/>  <label for="sh">上海</label>  <input type="radio" id="gz" value="广州" name="city"  οnclick="_transfer(this);"/>  <label for="gz">广州</label>  <input type="radio" id="sz" value="深圳" name="city"  οnclick="_transfer(this);"/>  <label for="sz">深圳</label></body></html>

效果：

点击“请选择城市”弹出新网页，选择城市后新网页自动关闭，并将城市显示在原网页中。

spacer.gif

三种弹窗

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>三种弹窗</title></head> <body>    <script type="text/javascript">    alert("test");    var s = confirm("确定删除吗");    if (s) {        alert("你点了确定");    } else {        alert("你点了取消");    }    var t = prompt("请输入行数", 5);    for (var i = 0; i < t; i++) {        document.write("<hr width=" + (i * 20) + "px />");    }    </script></body> </html>

其他BOM对象

1. Navigator对象

1.1 常用属性

  • appName：返回浏览器的名称。

  • appVersion：返回浏览器的平台和版本信息。

  • cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值。

  • platform：返回运行浏览器的操作系统平台。

1.2 示例

alert(navigator.appName); // 显示浏览器名称alert(navigator.appVersion); // 显示浏览器版本信息

2. Screen对象

2.1 常用属性

  • width：返回屏幕宽度。

  • height：返回屏幕高度。

2.2 示例

alert(screen.width);alert(screen.height);

3. History对象

3.1 常用方法

  • back()：加载 history 列表中的前一个 URL。

  • forward()：加载 history 列表中的下一个 URL。

  • go()：加载 history 列表中的某个具体页面。

3.2 示例

<a href="javascript:history.forward()">前进，相当于（go(1)）</a><a href="javascript:history.back()">后退，相当于（go(-1)）</a>

4. Location对象

4.1 常用属性

href：设置或返回完整的 URL。

4.2 常用方法

reload()：重新加载当前文档。

4.3 示例

跳转到相关网页。

function _location(){   location.href = "test.html";}

定时器

1. 概述

定时器是Window对象中的方法，可以进行时间上的设定，在特定时间或者每隔一段时间运行特定功能。

2. 常用方法

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

    setInterval(code, millisec)

    code（必须）：要调用的函数或要执行的代码串。

    millisec（必须）：周期性执行或调用 code 之间的时间间隔，以毫秒计。

  • clearInterval()：取消由 setInterval() 设置的 timeout。

    clearInterval(id_of_setinterval)

    id_of_setinterval：由 setInterval() 返回的 ID 值。

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

    setTimeout(code, millisec)

    code（必需）：要调用的函数后要执行的 JavaScript 代码串。

    millisec（必需）：在执行代码前需等待的毫秒数。

  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。clearTimeout(id_of_settimeout)id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

注意：

setTimeout()只在指定时间后调用一次function，若想要循环多次调用，请使用递归。

3. 示例

随机数显示

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>定时器</title>    <style type="text/css">    #d1,#d2 {        border: 1px solid blue;        width: 100px;        height: 30px;        line-height: 30px;        text-align: center;    }    input{     width: 100px;       height: 20px;    }    </style>     <script type="text/javascript">    var out = "";    function _random1() {        var r = Math.floor(Math.random() * 100);        document.getElementById("d1").innerHTML = r;        out = setTimeout("_random1()", 500);    }     function _random() {        var r = Math.floor(Math.random() * 100);        document.getElementById("d2").innerHTML = r;    }    function _random2() {        out = setInterval("_random()", 500);    }    </script></head> <body>    <div id="d1"></div>    <input type="button" value="setTimeout方法演示" οnclick="_random1();"/>    <div id="d2"></div>    <input type="button" value="setInterval方法演示" οnclick="_random2();"/></body> </html>

4. 案例

抽奖

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>抽奖</title>     <style type="text/css">    input {        width: 100px;        height: 50px;    }    </style>     <script type="text/javascript">    var rand = "";         function _rand() {        rand = Math.floor(Math.random() * 100);        document.getElementById('result').innerHTML = rand;    }    var time = "";    var flag = true;    function _start() {        if (flag) {            time = setInterval(_rand, 10);            document.getElementById('go').value = "停止";        } else {            clearInterval(time);            document.getElementById('go').value = "开始";        }        flag = !flag;    }    </script></head> <body>    <div id="result"></div>    <br />    <div id="b">        <input type="button" id="go" value="抽奖" οnclick="_start();" />    </div></body> </html>

效果（点击一次抽奖，再次点击停止）

spacer.gif

事件（Event对象）

1. 鼠标事件

1.1 常用属性

  • onclick：当用户点击某个对象时调用的事件句柄。

  • ondblclick：当用户双击某个对象时调用的事件句柄。

  • onmousedown：鼠标按钮被按下。

  • onmousemove：鼠标被移动。

  • onmouseout：鼠标从某元素移开。

  • onmouseover：鼠标移到某元素之上。

  • onmouseup：鼠标按键被松开。

  • clientX：返回当事件被触发时，鼠标指针的水平坐标。

  • clientY：返回当事件被触发时，鼠标指针的垂直坐标。

1.2 示例

<html> <head>    <title>鼠标事件</title>    <style type="text/css">    #div1 {        border: 1px solid red;        width: 500px;        height: 500px;    }    </style>    <script type="text/javascript">    function _onmouseover() {        alert("鼠标已经移上来了");    }     function _onmouseout() {        alert("鼠标已经移走了");    }     function _onmousemove() {        window.status = event.clientX + "," + event.clientY;    }     function _btn() {        alert("点击事件");    }    </script></head> <body>    <div id="div1" onMouseMove="_onmousemove()"></div>    <input type="text" name="username" onMouseOver="_onmouseover();" onMouseOut="_onmouseout()" />    <input type="button" value="点击事件" οnclick="_btn()" /></body> </html>

2. 键盘事件

2.1 常用属性

  • onkeydown：某个键盘按键被按下。

  • onkeypress：某个键盘按键被按下并松开。

  • onkeyup：某个键盘按键被松开。

2.2 示例

<html> <head>    <title>键盘事件</title>    <style type="text/css">    #div1 {        border: 1px solid red;        width: 100px;        height: 100px;    }    </style>    <script type="text/javascript">    function _onkeydown() {        document.getElementById("div1").innerHTML += "onkeydown<br/>";    }     function _onkeypress() {        document.getElementById("div1").innerHTML += "onkeypress<br/>";    }     function _onkeyup() {        document.getElementById("div1").innerHTML += "onkeyup<br/>";    }     function _changeInput() {        //找到回车键的keyCode        if (event.keyCode == 13) {            //将keyCode的值赋值为制表符的值            event.keyCode = 9;        }    }    </script></head> <body>    <div id="div1" onKeyDown="_onkeydown()" onKeyUp="_onkeyup()" onKeyPress="_onkeypress()"></div>    用户名：    <input type="text" name="username" onKeyDown="_changeInput()" /> 昵称：    <input type="text" name="nickname" /></body> </html>

3. 加载退出事件

3.1 常用属性

  • onload：一张页面或一幅图像完成加载。

  • onunload：用户退出页面。

3.2 示例

<html> <head>    <title> 加载卸载事件</title>    <script type="text/javascript">    function _onload() {        alert("当页面加载的时候就执行");    }     function _onunload() {        alert("当页面被卸载的时候执行");    }    </script></head> <body οnlοad="_onload()" οnunlοad="_onunload()"></body> </html>

4. 聚焦离焦事件

4.1 常用属性

  • onfocus：元素获得焦点。

  • onblur：元素失去焦点。

4.2 示例

输入框验证[正则验证在chrome，IE11中出现问题]

<html> <head>    <title> 聚焦离焦事件 </title>    <script type="text/javascript">    var flag = true;    function _onfocus() {       if(flag) {          document.getElementById("tel").value = "";          flag = false;       }        var msg = document.getElementById("msg");        msg.innerHTML = "";    }     function _onblur() {        var tel = document.getElementById("tel").value;        var msg = document.getElementById("msg");        var reg = /^[1][3578][0-9]{9}/;        if (reg.test(tel)) {          msg.style.color = "green";            msg.innerHTML = "正确";        } else {         msg.style.color = "red";            msg.innerHTML = "错误，请重新输入";        }    }    </script></head> <body>    <input type="text" id="tel" name="tel" value="请输入手机号" οnfοcus="_onfocus();" οnblur="_onblur();" />    <span id="msg"></span></body> </html>

效果

spacer.gif

5. 提交重置事件

5.1 常用属性

  • onsubmit：提交按钮被点击。

  • onreset：重置按钮被点击。

5.2 注意

  • onsubmit和onreset都是针对表单说的，所以要写在表单标签内。

  • onsubmit和onreset事件调用格式必须是 return 方法名。

  • onsubmit的方法必须有个返回值。

5.2 示例

<html> <head>    <title>提交重置事件</title>    <script type="text/javascript">    function _onsubmit() {        var uname = document.getElementsByName("username")[0].value;        var psswd = document.getElementsByName("password")[0].value;        if (uname == '') {            alert("请输入用户名");            return false;        }        if (psswd == '') {            alert("请输入密码");            return false;        }        return true;    }    </script></head> <body>    <form action="" method="get" οnsubmit="return _onsubmit();">        用户名：<input type="text" name="username" />        <br/>        密码：<input type="password" name="password" />        <br/>        <input type="submit" value="提交" />        <input type="reset" value="重置" />    </form></body> </html>

6. 选择改变事件

6.1 属性

onchange：用户改变域的内容。

6.2 案例

城市区域选择

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>城市选择</title>     <script type="text/javascript">    function _changearea() {        var arr = new Array();        arr[1] = ["海淀区", "昌平区", "东城区", "西城区"];        arr[2] = ["黄浦区", "浦东新区", "徐汇区", "静安区"];        arr[3] = ["田家庵区", "谢家集区", "潘集区", "大通区"];        arr[4] = ["建邺区", "玄武区", "鼓楼区"];        var city = document.getElementById('city');        var area = document.getElementById('area');                if (city.value == "none") {          area.length = 1;            return;        } else {            area.length = 1;            for (var i = 0; i < arr[city.value].length; i++) {                area.add(new Option(arr[city.value][i], arr[city.value][i]));           }       }    }    </script></head> <body>    <select id="city" οnchange="_changearea();">        <option value="none">--请选择城市--</option>        <option value="1">北京</option>        <option value="2">上海</option>        <option value="3">淮南</option>        <option value="4">南京</option>    </select>    <select id="area">        <option>--请选择地区--</option>    </select></body> </html>
转载至：http://blog.csdn.net/jacobvv/article/details/42835133

转载于:https://blog.51cto.com/1095221645/1867379

JavaScript——BOM知识相关推荐

  1. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  2. js java用var_Java基础———JavaScript基础知识

    原标题:Java基础---JavaScript基础知识 JavaScript基础知识(1) Javascript的历史,Javascript是什么? JavaScript 诞生于 1995 年. 它当 ...

  3. JavaScript 基础知识 - DOM篇(二)

    7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...

  4. JavaScript基础知识与脚本语言总结

    1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...

  5. JavaScript冷门知识

    JavaScript冷门知识 看红宝书,重新梳理JavaScript的知识.这部分主要是梳理冷门的知识点(对个人来说是冷门的) 组成 ECMAScript(核心):提供核心功能.每门语言的根本,大同小 ...

  6. 【Web 三件套】JavaScript 入门知识（超多动图、超详解）

    文章目录 1. 认识 JavaScript 1.1 JavaScript 基本介绍 1.2 JavaScript.HTML 和 CSS 之间的关系 1.3 JavaScript 的运行过程 1.4 J ...

  7. HTML5学习笔记 —— JavaScript基础知识

    HTML5学习笔记 -- JavaScript基础知识 标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读 评论(0) 收藏 举报 分类: JavaScr ...

  8. javascript BOM对象详解

    javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...

  9. JavaScript编程知识

    JavaScript编程知识 1.从阵列中删除重复项 数组:这是一些方便的方法,可用于从数组中删除重复项. 1.使用lodash let array = [2, 1, 2, 5, 6, 7, 8, 9 ...

最新文章

  1. 推荐11个第2职业挣大钱的公众号！第5名一年涨8万粉丝！
  2. EDM数据营销概念简要介绍
  3. 图像检索：CNN对Hash组算法的颠覆
  4. 一些常用的辅助代码 (网络收藏)
  5. 今年纽微特公司股东会不开了？
  6. 华为手机Android studio 配置ADB wifi 调试
  7. 数量积、向量积与混合积
  8. js 浏览器永久保存数据：localStorage
  9. lintcode 输出赛程表
  10. Unveiling causal interactions in complex systems（揭示复杂系统中的因果交互作用）
  11. JavaWeb-Servlet（上）
  12. linux内核原子操作使用简介
  13. 明哥学习Spring（2）
  14. Spark中，RDD概述（五大属性，弹性介绍，5个特性）
  15. 计算机专业数字逻辑考试题,数字逻辑试卷及答案.doc
  16. R中的假设检验（四）卡方检验
  17. 爱上hal库学习笔记——cubemx图形界面,洋桃电子YYDS
  18. Unity5.X导入FBX文件，播放动画时位置变动的解决方法
  19. c语言建立坐标的代码,C语言 getx()用法及代码示例
  20. 第七届计算机信息素养大赛,第七届全国大学生计算机应用能力与信息素养大赛技术规范.PDF...

热门文章

  1. android 应用的资源
  2. wince -- 线程中SetEvent及WaitForSingleObject用法
  3. Excel的导入与导出（POI）
  4. 专访McAfee“M双侠” 感受McAfee云安全自信
  5. Palo Alto Networks 支持仪表盘漏洞泄露数千份客户支持工单
  6. 思科 Security Manager 12个0day PoC 被公开，多个严重 0day仍未修复
  7. 学以致用一 安装centos7.2虚拟机
  8. Spring MVC 4.x 知识点
  9. shell脚本执行冲突事件-sshwhile
  10. Android编程 获取网络连接状态 及调用网络配置界面