前端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 有能力与浏览器进行"对话". ...
随机推荐
- Silverlight 动态创建Enum
private Type CreateEnum() { List<string> lists = new List<string>(); lists.Add("男&q ...
- 多个ajax请求时控制执行顺序或全部执行后的操作
1.当确保执行顺序时 (1)请求加async: false,,这样所有的ajax就会同步执行,请求顺序就是代码顺序: (2)$.when 确保所有异步的ajax请求完毕时 $.when($.aja ...
- CAD安装失败怎样卸载CAD 2010？错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- Spring Cloud学习笔记之微服务架构
目录 什么是微服务 架构优点 架构的挑战 设计原则 什么是微服务 微服务构架方法是以开发一种小型服务的方式,来开发一个独立的应用系统的. 其中每个小型服务都运行在自己的进程中,并经常采 ...
- WPF调用Win Form
WPF是win form的下一代版本,现在越来越多的公司使用WPF.如何兼容已有的使用win form开发的应用程序呢?下面有三种方式来在WPF中调用win form. 使用WPF中的WindowsF ...
- Python常用模块二
一.time & datetime #_*_coding:utf-8_*_ import time # print(time.clock()) #返回处理器时间,3.3开始已废弃 , 改成了t ...
- 2019.3.26判断是否回文（java实现）
我所有的文章都是对我总结学习的总结,那里不好或者冒犯了那里,我先对您说声对不起,请告知我进行改正. 今天java老师作业题目是判断是一个字符串否是回文: emmmm,我的思路是将字符串逆序,然后使用方 ...
- ndk制作so库，ndk-build不是内部或外部命令。。。的错误
想了想大概就需要下面这几步: 1.下载ndk 2.配置ndk的环境变量 3.在android studio添加一些ndk的配置 4.编写c文件 5.生成so库 6.调用so库 上面提到的大部分问题你都 ...
- Lucene学习入门——核心类API
本文讲解Lucene中,创建索引.搜索等常用到的类API 搜索操作比索引操作重要的多,因为索引文件只被创建一次,却要被搜索多次. 索引过程的核心类: 执行简单的索引过程需要如下几个类:IndexWri ...
- isee图片专家批量处理图片大小教程
经常用手机.照相机外出拍照片,然后再弄到电脑上面很占硬盘空间了,isee图片专家是一款非常专业的批量压缩图片大小工具,方便储存,给电脑减压,具有一次自动处理N张图片:程序小巧,资源占用低,处理速度快等 ...