1.BOM输出

所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器

  1. alert(1);//弹出框 调式使用
  1. console.log('路飞学城');//用于浏览器的调用 F12查看
  1.  prompt('message',defaultValue)
  2.  var pro = prompt('路飞学城','33333');
  3.  console.log(pro)
  1. confirm() //如果点击确定 返回true 如果点击取消 返回false

2.open_close方法

  1. open('https://www.baidu.com');//打开百度网页，winodow对象可以省略
  2. //行间的js中的window不能省略
  3. <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>
  5. //打开空白页面
  6. open('about:blank',"_self")
  8. //关闭当前页面
  9. close();
  10. //行间js中的window还是不能省略
  11. <button onclick="window.close()">关闭</button>

3.其他的BOM对象和方法

  1. //返回浏览器的用户设备信息
  2. console.log(window.navigator.userAgent)
  4. //获取用户本地信息
  5. console.log(window.location)
  7. //经常使用的一个方法，跳转一个网址
  8. window.location.href = 'https://www.luffycity.com';
  10. //全局刷新 后面会学习ajax来实现局部刷新操作，这才是我们要学习的重点。记住：尽量少用这个方法
  12. setTimeout(function(){
  13.     window.location.reload();
  14. }

4.client系列

  1. style：
  2.      top
  3.      left
  4.      right
  5.      bottom
  7. client：
  8.      clientTop 内容区域到边框顶部的距离
  9.      clientLeft 内容区域到边框左部的距离
  10.      clientWidth 内容区域+左右padding   可视宽度
  11.      clientHeight 内容区域+ 上下padding   可视高度

5.屏幕的可视区域

  1. window.onload = function(){
  3.     console.log(document.documentElement.clientWidth);
  4.     console.log(document.documentElement.clientHeight);
  6.     window.onresize = function(){
  8.         console.log(document.documentElement.clientWidth);
  9.         console.log(document.documentElement.clientHeight);
  10.     }
  12. }

6.offset系列

  1. //占位宽 高 Top Left  
  3. /*
  4. * offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值
  5. * offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值
  6.   offsetWidth 内容+padding+border
  7. * */

7.scroll系列

  1. <body style="width: 2000px;height: 2000px;">
  2.     <div style="height: 200px;background-color: red;"></div>
  3.     <div style="height: 200px;background-color: green;"></div>
  4.     <div style="height: 200px;background-color: yellow;"></div>
  5.     <div style="height: 200px;background-color: blue;"></div>
  6.     <div style="height: 200px;background-color: gray;"></div>
  7.     <div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
  8.         <p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
  9.             路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
  10.             路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
  11.             路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
  12.         </p>
  14.     </div>
  16. </body>
  1. *{
  2. padding: 0;
  3. margin: 0;
  4. }
  1. window.onload = function(){
  3.             //实施监听滚动事件
  4.             window.onscroll = function(){
  6. //                console.log('上'+document.documentElement.scrollTop)
  7. //                console.log('左'+document.documentElement.scrollLeft)
  8. //                console.log('宽'+document.documentElement.scrollWidth)
  9. //                console.log('高'+document.documentElement.scrollHeight)
  11.             }
  13.             var s = document.getElementById('scroll');
  15.             s.onscroll = function(){
  16.                 //scrollHeight : 内容的高度+padding  不包含边框
  17.                 console.log('上'+s.scrollTop)
  18.                 console.log('左'+s.scrollLeft)
  19.                 console.log('宽'+s.scrollWidth)
  20.                 console.log('高'+s.scrollHeight)
  21.             }
  22.         }

bom知识点的更多相关文章

  1. js初级DOM&BOM知识点总结

    第一章 js的组成DOM BOM ECMAScript javaScript 是一种直译是脚本语言 js语言特点 .脚本编写语言 .基于对象的语言 .简单性 .动态性 .安全性 .跨平台性 C/S是C ...

  2. JS DOM与BOM

    DOM知识点 [DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API).DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js ...

  3. JS DOM（文档对象模型）与BOM（浏览器对象模型）

    在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTM ...

  4. js个人笔记简记

    正则表达式 创建正则表达式的两种方法:   Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...

  5. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 【JavaScript 7—基础知识点】：BOM

    一.基础知识 1.1,什么是BOM BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法去扩展 ...

  7. 05 javascript知识点---BOM和DOM

    1.DOM简单学习(为了满足案例要求) 功能:控制html文档的内容获取页面标签(元素)对象:Element document.getElementById("id值"):通过元素 ...

  8. JS核心知识点：DOM\BOM\EVENT

    1.DOM(Document Object Model) :文档对象模型2. DOM节点:页面中最基本的组成部分 3. childNodes:获取某个节点下所有的子节点 在标准及ie9以上 : 会获取 ...

  9. BOM相关知识点

    1.BOM概念:Browser Object Model 浏览器对象模型作用:提供了使用JS操作浏览器的接口 2.BOM包含了许多对象信息,包括如下这些:(1)screen 屏幕信息(2)locati ...

随机推荐

  1. Nginx 多进程连接请求/事件分发流程分析

    Nginx使用多进程的方法进行任务处理,每个worker进程只有一个线程,单线程循环处理全部监听的事件.本文重点分析一下多进程间的负载均衡问题以及Nginx多进程事件处理流程,方便大家自己写程序的时候 ...

  2. 【Python】远离 Python 最差实践，避免挖坑

    原文链接:http://blog.guoyb.com/2016/12/03/bad-py-style/ 最近在看一些陈年老系统,其中有一些不好的代码习惯遗留下来的坑:加上最近自己也写了一段烂代码导致服 ...

  3. RHEL7.X 安装 11.2.0.4 RAC 问题

    随着Linux 7 版本的普及,但Oracle数据库主流版本仍是11gR2,11.2.0.4 是生产安装首选.由于11.2.0.4对Linux 7 的支持不很完美,在Linux 7 上安装会遇到几处问 ...

  4. 在触发器中，当“IsMouseOver”属性=true时，设置当前控件的高亮选中效果

    <Style.Triggers>            <!--<Trigger Property="IsSelected" Value="Tru ...

  5. ADSL拨号上网或者光纤上网设置概要（原创）

    不管是在梧州设置光纤还是在太平设置ADSL拨号上网每次设置上网一体机的时候都是遇到各种麻烦...这次又是弄了N久,每次问题各不一样.总结一下操作过程,方便以后又遇问题回头查询自个微博.一.设置电话线的 ...

  6. linux下升级npm以及node

    npm升级 废话不多说,直接讲步骤.先从容易的开始,升级npm. npm这款包管理工具虽然一直被人们诟病,很多人都推荐使用yarn,但其使用人数还是不见减少,况且npm都是随node同时安装好的,一时 ...

  7. python学习笔记（四）---python不能输出中文问题

    只需要在所有代码的最前面加上:#coding:utf-8 即可

  8. Alpha阶段第1周 Scrum立会报告+燃尽图 06

    作业要求与https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246相同 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 周 ...

  9. memcache+php实现页面访问的加速

    一.什么是memcache memcache是目前主流的一个高性能的分布式内存对象缓存系统:它以key-value形式在内存中存储数据.由于数据缓存在内存中,所以相比操作DB而言,它不需要解析SQL. ...

  10. ElasticSearch（二）：windows下ElasticSearch6.3.2插件Head的安装

    前言 上一篇我们记录了如何安装ElasticSearch,这一篇我们来记录下如何安装Head插件 正文 方法总计有三种,但是安装ElasticSearch6.x的时候,只有一种完成了. 第一种:直接使 ...