前端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 有能力与浏览器进行"对话". ...

随机推荐

/proc/sys/net/ipv4/下各参数含义
net.ipv4.tcp_tw_reuse = 0 表示开启重用.允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭 net.ipv4.tcp_tw_recycle = ...
DP：凑零钱问题/最长非降子序列（C++）
你给出一定数额的钱 i 元给我,我利用手中的硬币(m元, j元, k元...)兑换等值的钱给你,要求硬币数最少. 举例:给出1-11的钱,手中硬币有1元,3元,5元. 重点是找到状态和状态转移方程. ...
案例49-crm练习获取客户列表带有分页和筛选功能
1 案例分析 2 书写步骤 1.封装PageBean 2.书写Action 3.书写Service 4.书写Dao 注意清空之前设置的聚合函数 dc.setProjection(null); 5 ...
我使用的brackets插件
livereload atom dark theme autoprefixer auto save files on window blur beautify brackets file icons ...
pat1089. Insert or Merge (25)
1089. Insert or Merge (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Accor ...
转：ArcGIS10.1正式版安装与破解
一.准备文件 ArcGIS10.1安装包:ArcGIS_Desktop_10.1_129026(en) 认证服务:Pre-release_license_manager 注册机:arcgis10.1K ...
Cookie和Session 简单介绍
cookie : 1.cookie是存在客户端(浏览器)的进程内存中和客户端所在的机器硬盘上 2.cookie只能能够存储少量文本,大概4K大小 3.cookie是不能在不同浏 ...
Linux命令之添加权限Chmod的使用
chmod是change mode的缩写,是修改文件权限的一个命令: 一个文件分别有三组权限:用户拥有者,用户组第一个横杆-表示文件,如果是d表示目录.还有可能是l,表示链接. 第一组(rw-)表示 ...
lrzsz的使用
可以方便的在本地PC机和远程服务器之间传输文件. 1.下载直接在centos上执行命令yum -y install lrzsz 2.上传文件 rz // 上传文件,执行命令rz,会跳出文件选择窗口, ...
Eclipse下JRebel的安装和基本使用
JRebel有什么用? 做Java Web开发,一个很头疼的事情是,修改了一个类以后,Tomcat必须重新启动. 工程规模小还好说,如果规模大了,重启一次动不动就是一分多钟.那么频繁重启就会导致大量的 ...