Javascript BOM简介

2018-05-17 admin

BOM简介

  • BOM Browser Object Model
  • 浏览器对象模型

BOM window常用方法的open特效


// 通过window对象来访问浏览器
console.log(window.document);
// frames:当前文件的框架集合
console.log(window.frames);
// 浏览器环境信息
console.log(window.screen);
console.log(window.history);
// 浏览器及其相关功能的信息
console.log(window.navigator);

// 浏览器本地信息
console.log(window.location);
// href属性  reload()  assign() replace() 等方法

window.location.href = 'red.html';
window.location.reload();  //刷新

// 有历史记录
window.location.assign('yellow.html');

// 替换页面   无历史记录
window.location.replace('yellow.html')

window.history.forward();
window.history.back();

// go(num): num大于0 向后跳转num个界面
window.history.go(2);

onload

onload:时windows的属性 本身是函数类型的属性,赋值时需要接受一个函数,当页面加载完毕才会执行


window.onload = function(){
    alert('页面加载完毕')
}

onscroll

<body style="height: 2000px;">
    <button onclick="goTop()" style="position: fixed;bottom: 50px; right: 50px;">回到顶部</button>
    <script type="text/javascript">
        window.onscroll = function(){
            // console.log('页面滚动')
            var height = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(height);
        }
        function goTop(){
            document.documentElement.scrollTop = 0;
            //document.body.scrollTop = 0;
        }

    </script>
</body>

onresize

<script type="text/javascript">
    // onresize 浏览器更改大小时会执行
    window.onresize = function(){
        console.log('大小更改');
    }
</script>

定时器

<button onclick="clearTime()">清除定时器</button>
<button onclick='create()'>创建定时器</button>
<script type="text/javascript">
    // 创建定时器

    function create () {
        timer = window.setInterval(function(){
            console.log("666");
        }, 2000)
    }

    //window.setInterval(func, 2000)

    function clearTime () {
        window.clearInterval(timer);
    }
</script>

延时器

<button onclick='clearTimer()'>清除定时器</button>
<script type="text/javascript">
    var timer = window.setTimeout(func, 5000);
    function func () {
        console.log('您很好');

    }

    function clearTimer(){
        window.clearTimeout(timer);
    }
</script>![](https://i.imgur.com/Pr1zIcq.png)

原文链接:https://segmentfault.com/a/1190000014892311

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-32387.html

文章标题:Javascript BOM简介

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
《JavaScript快速查询手册》PDF
下载地址:《JavaScript快速查询手册》PDF下载 http://pan.baidu.com/s/130rP8’ 简介: JavaScript快速查询手册 目录 前言 第一部分 命令查询 第二部分 JavaScript语句与运算符 第...
2015-11-16
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部