20-[JavaScript]-BOM
1、jsBom简介
jsBom = javascript browser object model
BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器.
2.Bom输出：浏览器弹窗，console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="printLuffy()">打印</button>
<button onclick="findLuffy()">查找</button> </body> <script type="text/javascript">
//1.js ECMAScript DOM：文档 BOM //BOM Browser Object Model 浏览器对象模型
//核心 浏览器 //输出 屏幕的宽高 滚动的宽高 setInterval .. window.open() close() location alert(1); //2.用于浏览器的调试
console.log('路飞学城'); //3. prompt('message',defaultValue)
var pro = prompt('路飞学城','33333'); console.log(pro); //4 confirm() 如果点击确定 返回true 如果点击取消 返回false var m = confirm("学习Bom");
console.log(m);
function printLuffy(){
print()
} function findLuffy(){
var m2 = confirm("学习Bom");
find(m2);
} </script>
</html>
3.open_close新页面方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> <!--行间的js中的open() window不能省略-->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button> <button>打开百度</button>
<button onclick="window.close()">关闭</button>
<button>关闭</button> </body>
<script type="text/javascript"> var oBtn = document.getElementsByTagName('button')[1];
var closeBtn = document.getElementsByTagName('button')[3]; oBtn.onclick = function(){
//打开连接
open('https://www.baidu.com') //打开空白页面
open('about:blank',"_self")
}
closeBtn.onclick = function(){
if(confirm("是否关闭？")){
// 关闭
close();
}
} </script>
</html>
3、返回用户设备，本地消息，跳转，刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他得Bom对象和方法</title>
</head>
<body> </body>
<script type="text/javascript">
alert('刷新了'); //返回浏览器的用户设备信息 pc 移动端
console.log(window.navigator.userAgent); //获取用户本地信息
console.log(window.location); //经常使用的一个方法 跳转一个网址
window.location.href = 'https://luffycity.com'; // 全局刷新,尽量少用全局刷新 后面会学习ajax来实现局部刷新操作
window.location.reload(); setTimeout(function () {
window.location.reload();
},3000) </script>
</html>
4、client系列：盒子内容到四边
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: absolute;
border: 20px solid red;
margin: 10px 0px 0px 0px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
<script type="text/javascript">
/*style
* top
* left
* right
* bottom * client
* clientTop 内容区域到边框顶部的距离
* clientLeft 内容区域到边框左部的距离
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
* */ var oBox = document.getElementsByClassName('box')[0]; console.log(oBox.clientTop)
console.log(oBox.clientLeft)
console.log(oBox.clientWidth)
console.log(oBox.clientHeight) </script> </html>
5、clientWidth 屏幕得可视区域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript"> //屏幕得可视区域
window.onload = function(){ console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight); //可监听屏幕得宽高
window.onresize = function(){ console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
} }
</script>
</html>
6、offset系列：盒子在浏览器的定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<div style="position: relative;"> <div id="box" style="width: 200px;height: 200px;border: 1px solid red; padding: 10px;margin: 10px;position: absolute;top: 20px;left: 30px;"> </div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box') //占位宽 高 Top Left /*
* offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值
* offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值
offsetWidth 内容+padding+border
* */
console.log(box.offsetTop)
console.log(box.offsetLeft)
console.log(box.offsetWidth)
console.log(box.offsetHeight) } </script>
</html>
7、scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll系列</title>
<style type="text/css">
*{ padding: 0; margin: 0;}
</style>
</head>
<body style="width: 2000px; height: 2000px;">
<div style="height: 200px; background-color: red;"></div>
<div style="height: 200px; background-color: yellow;"></div>
<div style="height: 200px; background-color: green;"></div>
<div style="height: 200px; background-color: blue;"></div>
<div style="height: 200px; background-color: gray;"></div> <div id="scroll" style="width: 200px; height: 200px;border:1px solid red; overflow: auto;padding: 10px;margin: 20px;">
<p>
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚路飞学诚
</p>
</div>
</body>
<script type="text/javascript"> //实时监听滚动事件
window.onscroll = function () {
console.log('上',document.documentElement.scrollTop); // 0 200 ...
console.log('左',document.documentElement.scrollLeft); // 0 200 ...
console.log('宽',document.documentElement.scrollWidth); // 2000
console.log('高',document.documentElement.scrollHeight); // 2000
}; var s = document.getElementById('scroll');
s.onscroll = function () {
console.log('上',s.scrollTop); // 0 100 ...
console.log('左',s.scrollLeft); // 0
console.log('宽',s.scrollWidth); // 203
console.log('高',s.scrollHeight); // 498 内容得高度 + padding 不包含margin
} </script>
</html>
20-[JavaScript]-BOM的更多相关文章
- JavaScript高级:JavaScript面向对象,JavaScript内置对象,JavaScript BOM,JavaScript封装
知识点梳理 课堂讲义 1.JavaScript面向对象 1.1.面向对象介绍 在 Java 中我们学习过面向对象,核心思想是万物皆对象. 在 JavaScript 中同样也有面向对象.思想类似. 1. ...
- JavaScript BOM对象介绍
bom:即broswer object model(浏览器对象模型),由五个对象组成: Window:对象表示浏览器中打开的窗口 最顶层对象. Navigator :浏览器对 ...
- javascript bom 编程
javascript bom 编程 BOM: 浏览器对象模型 DOM Window :窗口Window Document 属性: status :状态栏 self:自己 ...
- 前端基础：JavaScript BOM对象
JavaScript BOM对象 JavaScript Window - 浏览器对象模型 浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话". 浏览器对象模型(B ...
- JavaScript BOM DOM 对象
title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...
- javascript BOM对象 第15节
<html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...
- Javascript BOM对象
BOM是browser object model的缩写,简称浏览器对象模型. window对象(BOM的核心对象) 表示浏览器的一个实例,在浏览器中,window对象有着双重角色,它既是通过Javas ...
- 24、Javascript BOM
BOM(Browser Object Model)浏览器对象模型,一组浏览器提供的API. window对象 window对象表示当前浏览器的窗口,是Javascript的顶级对象,所有创建的对象.函 ...
- JavaScript BOM和DOM
Browser Object Model BOM是所有JavaScript的核心,所有的功能其实都建立在BOM基础之上.各浏览器提供的BOM的功能存在很大差异,BOM在HTML5中已经有很大一部分被放 ...
- 前端开发之javascript BOM篇
主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性 前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Bro ...
随机推荐
- Oracle EBS 报错：此责任无可用函数。 更改责任或与您的系统管理员联系。
解决:修改配置文件 1.FND: Diagnostics (FND:诊断) 启用设为”是” 2.Utilities:Diagnostics (公用程序 ...
- webpack+express多页站点开发
学习了webpack门级的教程后,觉得可能是专门为单页应用而量身打造的,比如webpack+react.webpack+vue等,都可以解决各种资源的依赖加载.打包的问题.甚至css都是打包在js里去 ...
- PHPredis安装
一.PHPredis下载链接:https://pan.baidu.com/s/1bz0EaJgDpp2ADQJCJOHJGA 二.解压并进入目录 三.发现没有configure文件,需要安装autoc ...
- Python常见报错问题（不定时更新）
1.TabError: inconsistent use of tabs and spaces in indentation 在缩进中不一致地使用tab键和空格键. 报错原因:混用了tab和space ...
- 解决Failed to load the JNI shared library xxx/xxx/jvm.dll 错误
原因:jdk发生变化(新装了32位jdk),eclipse在启动时使用了 系统环境变量中的jdk路径(32位). 解决:只要把旧的64位的jre路径指定给eclipse启动文件即可. 在eclipse ...
- Alpha 冲刺报告(5/10)
Alpha 冲刺报告(5/10) 队名:洛基小队 峻雄(组长) 已完成:修改角色的移动脚本 明日计划:完善此项脚本 剩余任务:角色的属性脚本 困难:没有时间,代码的编写时间太慢 ----------- ...
- REDIS线上问题
这周终于解决了Redis访问经常超时的问题,终于可以踏实睡觉了.从上周就开始纠结在这个问题上,可以用寝食难安来形容,感觉这个问题就像个定时炸弹一样,虽然根据手搜的访问量,极少的Timeout Erro ...
- 用 Visual Studio Code 调试运行在 homestead 环境中的 laravel 程序
由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...
- Centos7.3 坑爹网络配置
1.目的: 我想在Vmvare配置成NAT模式的上网,因为这个模式宿主机可以访问虚拟机,虚拟机也可以访问宿主机,但仅主机模式只能是宿主机能访问虚拟机,但虚拟机不能访问宿主机.所以我为了能在虚拟机里面上 ...
- Java8新特性 -- Lambda基础语法
Lambda 表达式的基础语法: Java8引入了一个新的操作符 “->” 该操作符称为箭头操作符或Lambda操作符, 该操作符将Lambda表达式拆分为两部分: 左侧: Lambda表达式 ...