bom知识点
1.BOM输出
所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器
alert(1);//弹出框 调式使用
console.log('路飞学城');//用于浏览器的调用 F12查看
prompt('message',defaultValue)
var pro = prompt('路飞学城','33333');
console.log(pro)
confirm() //如果点击确定 返回true 如果点击取消 返回false
2.open_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>
3.其他的BOM对象和方法
//返回浏览器的用户设备信息
console.log(window.navigator.userAgent)
//获取用户本地信息
console.log(window.location)
//经常使用的一个方法，跳转一个网址
window.location.href = 'https://www.luffycity.com';
//全局刷新 后面会学习ajax来实现局部刷新操作，这才是我们要学习的重点。记住：尽量少用这个方法
setTimeout(function(){
window.location.reload();
}
4.client系列
style：
top
left
right
bottom
client：
clientTop 内容区域到边框顶部的距离
clientLeft 内容区域到边框左部的距离
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
5.屏幕的可视区域
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);
}
}
6.offset系列
//占位宽 高 Top Left
/*
* offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值
* offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值
offsetWidth 内容+padding+border
* */
7.scroll系列
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: yellow;"></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: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
</p>
</div>
</body>
*{
padding: 0;
margin: 0;
}
window.onload = function(){
//实施监听滚动事件
window.onscroll = function(){
// console.log('上'+document.documentElement.scrollTop)
// console.log('左'+document.documentElement.scrollLeft)
// console.log('宽'+document.documentElement.scrollWidth)
// console.log('高'+document.documentElement.scrollHeight)
}
var s = document.getElementById('scroll');
s.onscroll = function(){
//scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop)
console.log('左'+s.scrollLeft)
console.log('宽'+s.scrollWidth)
console.log('高'+s.scrollHeight)
}
}
bom知识点的更多相关文章
- js初级DOM&BOM知识点总结
第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...
- JS DOM与BOM
DOM知识点 [DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js ...
- JS DOM（文档对象模型）与BOM（浏览器对象模型）
在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...
- js个人笔记简记
正则表达式 创建正则表达式的两种方法: Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 【JavaScript 7—基础知识点】：BOM
一.基础知识 1.1,什么是BOM BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法去扩展 ...
- 05 javascript知识点---BOM和DOM
1.DOM简单学习(为了满足案例要求) 功能:控制html文档的内容获取页面标签(元素)对象:Element document.getElementById("id值"):通过元素 ...
- JS核心知识点：DOM\BOM\EVENT
1.DOM(Document Object Model) :文档对象模型2. DOM节点:页面中最基本的组成部分 3. childNodes:获取某个节点下所有的子节点 在标准及ie9以上 : 会获取 ...
- BOM相关知识点
1.BOM概念:Browser Object Model 浏览器对象模型作用:提供了使用JS操作浏览器的接口 2.BOM包含了许多对象信息,包括如下这些:(1)screen 屏幕信息(2)locati ...
随机推荐
- Spring之核心容器bean
摘要:Spring的核心容器实现了Ioc,其目 的是提供一种无侵入式的框架.在本文中,首先讲解了Spring的基础bean的相关知识,然后介绍了Spring是如何对bean进行管理的. 在Spring ...
- Java网络编程学习A轮_04_TCP连接异常
参考资料: https://huoding.com/2016/01/19/488 示例代码: https://github.com/gordonklg/study,socket module A. C ...
- Linux常用命令--文件操作、权限设置
1.编辑文件 cat aaa.txt 查看aaa.txt文件的内容 head - aaa.txt 查看aaa.txt文件前5行的内容 tail - aaa.txt 展示aaa.txt文件最后10行的内 ...
- Mac上安装配置和简单使用PostgreSQL（仍然很不懂）
因为想要使用推荐的rails-template.需要使用postgres.并初始化了一个用户postgres,密码是postgres.( e.g. $ createuser -d postgres ) ...
- 哈理工OJ 1328
感觉其实可以不水的. //好像是一道特别水的小学数学题.但是我确实看了很久有试了几个样例才懂得.T_T // 先判断是不是素数.如果是素数的话.An-1一定不等于An.否则的话. // 继续找如果有一 ...
- MMAP文件内存映射
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 201621123010《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 在 ...
- 互评Alpha版本
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2323] 队名:二次元梦之队 组长:刘莹莹 组员:周昊 潘世维 王玉潘 赵美增 ...
- 第2课 C到C++的升级
C与C++的关系: C++在C语言的基础上进行的升级最重要的是两个方面: 1.类型的加强,C++更称得上是高级语言,C++语言对于类型的检查更严格 2.面向对象的支持,天生支持面向对象软件开发方法学 ...
- .NET/C# 在代码中测量代码执行耗时的建议（比较系统性能计数器和系统时间）
我们有很多种方法评估一个方法的执行耗时,比如使用性能分析工具,使用基准性能测试.不过传统的在代码中编写计时的方式依然有效,因为它可以生产环境或用户端得到真实环境下的执行耗时. 如果你希望在 .NET/ ...