前端JavaScript之BOM

BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

1.window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

方法

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

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

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

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。

close()            关闭浏览器窗口。

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

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

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

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

scrollTo()         把内容滚动到指定的坐标。

2.相关操作

2.1打开窗口

window.open(url,target)

url：要打开的地址

target：新窗口的位置，可以是_blank，_self，_parent父框架

2.2location对象属性（重点）

href    跳转

hash 返回url中#后面的内容，包含#

host 主机名，包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议 一般是http、https

search 查询字符串

例：点击网页5s后跳转

<body>

<div>点击后5秒后跳转百度</div>

<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = setTimeout(function () {

        location.href = "http://www.baidu.com";

        //点击div时，跳转到指定链接，这里设为_blank，注意拦截

 // window.open("http://www.baidu.com","_blank");

    },5000);

</script>

</body>

2.3location对象方法

location.reload()：重新进行加载

3.client，offset，scroll系列案例操作

3.1client（屏幕可视区域数值大小会随着窗口大小的变化而变化）

* clientTop 内容区域到边框顶部的距离，说白了就是边框的高度
* clientLeft 内容区域到边框左部的距离，说白了就是边框的宽度
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box{

                width: 200px;

                height: 200px;

                position: absolute;

                border: 10px solid red;

                /*margin: 10px 0px 0px 0px;*/

                padding: 80px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

        </div>

    </body>

    <script type="text/javascript">

        var oBox = document.getElementsByClassName('box')[0];

        console.log(oBox.clientTop);

        console.log(oBox.clientLeft);

        console.log(oBox.clientWidth);

        console.log(oBox.clientHeight);

    </script>

</html>

复制代码

效果：

2.offset系列

略

3.sroll系列

略

前端JavaScript之BOM的更多相关文章

前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象所有浏览器都支持 wind ...
web前端----JavaScript的BOM
一.引入到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和 ...
前端--javaScript之BOM和DOM
BOM和DOM概述 BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话". DOM(Document Object Model ...
第一百一十一节，JavaScript，BOM浏览器对象模型
JavaScript,BOM浏览器对象模型学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...
JS BOM DOM对象 select联动计时器时间 css操作节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
前端基础之BOM和DOM day52
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...
day 47 前端基础之BOM和DOM
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...
JavaScript之BOM基础
BOM(Browser Object Model)也叫浏览器对象,它提供了很多对象,用于访问浏览器的功能.但是BOM是没有标准的,每一个浏览器厂家会根据自己的需求来扩展BOM对象.本文主要以一些简单的 ...
day35前端基础之BOM和DOM
day35前端基础之BOM和DOM BOM操作简介 BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". ...

随机推荐

VS 设置背景色和背景图片
VS版本:2013 选择菜单栏上——工具——选项——环境——字体和颜色——自定义(项背景),选择好自己喜欢的颜色即可设置背景图片下载vs插件(ClaudiaIDE):https://visuals ...
所有节点配置NTP服务
主节点: 打开vim /etc/ntp.conf文件 For more information about this file, see the man pages # ntp.conf(), ntp ...
【Java】Java中的Collections类——Java中升级版的数据结构【转】
一般来说课本上的数据结构包括数组.单链表.堆栈.树.图.我这里所指的数据结构,是一个怎么表示一个对象的问题,有时候,单单一个变量声明不堪大用,比如int,String,double甚至一维数组.二维数 ...
关于imageview matrix
Matrix 是 Android SDK 提供的一个矩阵类,它代表一个 3 X 3 的矩阵那么这 9 个浮点数的作用和意义是什么呢,从 Android 官方文档上看,它为这个数组中的每一个元素都定义 ...
maya2015安装失败如何卸载重装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
PHP会话管理
Session使用在每个页面中使用session之前,必须使用session_start() 在每个session中都可以使用$_SESSION这个全局数组,在页面必须调用session_start ...
Host 'XXX' is not allowed to connect to this MySQL server解决方案
如何允许远程连接mysql数据库呢,操作如下: 首先登录账号 mysql -uroot -p 使用mysql用户 use mysql 如果报此类错:ERROR 1820 (HY000): You mu ...
netbeans 窗体字体大小设置
当计算机分辨率变大的时候,打开netbeans的时候,字体就会变得越来越小看起来很不爽,所要就要改变一下,窗体字体大小. 在网上找到了一段修改netbeans窗体字体大小的配置信息,现标记起来,以便 ...
SAP常用函数
1.获取月末最后一天日期 DATA LAST_DATE TYPE SY-DATUM. CALL FUNCTION 'LAST_DAY_OF_MONTHS' EXPORTING day_in = sy- ...
c语言 Implement strStr()【Leetcode】
实现在一个母字符串中找到第一个子字符串的位置. #include <stdio.h> #include <string.h> #define _IRON_TRUE 1 #def ...