前端开发 - jsBom
一、jsBom简介
jsBom = javascript browser object model
BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器.
二、Bom输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bom输出</title>
</head>
<body> </body>
<script type="text/javascript">
alert(123); console.log('luffy'); var a = prompt('luffy city');
var b = prompt('luffy','hello world');
console.log(a);
console.log(b); var c = confirm('学习 bom');
console.log(c); // true false //调打印机
function printLuffy() {
print()
}
printLuffy(); //find
function findLuffy() {
var m = confirm('学习');
find(m)
}
findLuffy() /*
* 总结：
* Bom输出
* 1.alert()
* 2.console.log()
* 3.prompt()
* 4.confirm()
*
* */ </script>
</html>
三、open close方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open close方法</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('http://www.baidu.com'); //打开空白页
// open('about:blank','_self');
open('about:blank','_target');
}; closeBtn.onclick = function () {
if(confirm('是否关闭')){
close();
}
}; /* 总结：
* open('https://www.baidu.com');//打开百度网页，winodow对象可以省略
//行间的js中的window不能省略
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
//打开空白页面
open('about:blank',"_self") //关闭当前页面
close();
//行间js中的window还是不能省略
<button onclick="window.close()">关闭</button> * */ </script>
</html>
四、其他的Bom对象和方法
<!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>
五、client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>client系列</title>
<style type="text/css">
.box{width: 200px;height: 200px;position: absolute;border: 20px solid red;
margin: 10px 0 0 0;padding: 10px;}
</style>
</head>
<body>
<div class="box"> </div>
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop); // 20
console.log(oBox.clientLeft); // 20
console.log(oBox.clientWidth); // 220
console.log(oBox.clientHeight); // 220 /*总结：
* clientTop 内容区域到边框顶部的距离
* clientLeft 内容区域到边框左部的距离
* clientWidth 内容区域+左右padding 可视宽度
* clientHeight 内容区域+ 上下padding 可视高度
*
* */
</script>
</html>
六、屏幕的可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕得可视区域</title>
</head>
<body> </body>
<script type="text/javascript"> <!--屏幕得可视区域-->
window.onload = function () {
console.log(document.documentElement.clientTop); // 0
console.log(document.documentElement.clientLeft); // 0
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>
七、offset系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset系列</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"> var box = document.getElementById('box'); console.log(box.offsetTop); // 30
console.log(box.offsetLeft); // 40
console.log(box.offsetWidth); // 222
console.log(box.offsetHeight); // 222 /* 总结：
* offsetTop: 如果盒子没有设置定位，到浏览器顶部得距离,如果盒子设置了定位，那么以父盒子为基准得top值+margin；
* offsetLeft: 如果盒子没有设置定位，到浏览器左部得距离，如果盒子设置了定位，那么以父盒子为基准得left值+margin；
* offsetWidth: 内容+padding+border
* offsetHeight: 内容+padding+border
*
* */ </script>
</html>
八、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>
前端开发 - jsBom的更多相关文章
- 总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- 前端开发：setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- 前端开发：面向对象与javascript中的面向对象实现（一）
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端开发：Javascript中的数组，常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
随机推荐
- hdu1978（记忆化搜索）
#include<iostream> #include<stdio.h> #include<string.h> #include<queue> usin ...
- C语言 · 逆序排列
算法提高 逆序排列 时间限制:1.0s 内存限制:512.0MB 问题描述 编写一个程序,读入一组整数(不超过20个),并把它们保存在一个整型数组中.当用户输入0时,表示输入结束.然 ...
- 常用jar命令
JAR包是Java中所特有一种压缩文档.存储格式格式就是.zip包.但是与ZIP包不同的地方是,生成JAR包时候,会自动添加一个META-INF\MANIFEST.MF文件 命令参数jar {c t ...
- Netty中的那些坑
Netty中的那些坑(上篇) 最近开发了一个纯异步的redis客户端,算是比较深入的使用了一把netty.在使用过程中一边优化,一边解决各种坑.儿这些坑大部分基本上是Netty4对Netty3的改进部 ...
- 使用Navicat连接阿里云服务器上的MySQL数据库=======Linux 开放 /etc/hosts.allow
使用Navicat连接阿里云服务器上的MySQL数据库 1.首先打开Navicat,文件>新建连接> 2,两张连接方法 1>常规中输入数据库的主机名,端口,用户名,密码 这种直接 ...
- redhat6.2 clang编译环境搭建(采用源码包编译安装)
1. About clang++ office site:http://clang.llvm.org/ A major focus of our work on clang is to make it ...
- 如何在VS2010中更好的编写JavaScript代码
VS2010默认的JavaScript代码编辑器相对简单.对于大家熟悉的代码折叠,代码结构.函数导航,代码高亮等都不支持,使用很不便.下面介绍下我发现的几个VS2010插件,具有哪些功能,如何安装和使 ...
- Entity Framework 学习建议及教学PPT
EntityFramework(EF)是微软平台主流的数据存取技术.为了给学生介绍这一技术,我制作了三讲Entity Framework 5.0教学PPT,包括相应源码及示例数据库. 教学内容主要参考 ...
- 面试题思考：解释一下什么叫AOP（面向切面编程）
这种在运行时,动态地将代码切入到类的指定方法.指定位置上的编程思想就是面向切面的编程. AOP是Spring提供的关键特性之一.AOP即面向切面编程,是OOP编程的有效补充. 使用AOP技术,可以将一 ...
- 使用javascript来访问本地文件夹
常用的.net 的aspx文件由于运行在服务器端,并不具有访问用户本地文件夹的权限,导致类似于<a href="file:///d:/backup" > open fo ...