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知识点的更多相关文章

  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. 快递100API接口调用代码示例

    package com.util; import java.io.IOException; import java.io.InputStream; import java.net.MalformedU ...

  2. 模拟函数调用 Simulation Exclusive Time of Functions

    2018-04-28 14:10:33 问题描述: 问题求解: 个人觉得这是一条很好的模拟题,题目大意就是给了一个单线程的处理器,在处理器上跑一个函数,但是函数里存在调用关系,可以是调用其他函数,也可 ...

  3. [转]Linux下彻底卸载mysql详解

    http://www.jb51.net/article/97516.htm 一.使用以下命令查看当前安装mysql情况,查找以前是否装有mysql 1 rpm -qa|grep -i mysql 可以 ...

  4. vim中将tab 设置成4个空格

    在.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandtab 对于已保存的文件,可以使用 ...

  5. mac 终端 使用ftp命令

    Mac下使用命令行登陆ftp 最近使用forklift下载服务器pureftp上的东西,总是断断续续的,经常下载到99%然后显示下载失败,非常不舒服!原以为是forklift的问题,换了transmi ...

  6. PHP write byte array to file

    /********************************************************************************* * PHP write byte ...

  7. Vue2.0 less全局配置

    前言 再一次vue2.0的开发中,遇到这样的一个问题,使用less与处理器,封装了一套关于项目的主题,但是使用的时候,main.js中引入后依然不能直接使用定义的@theme-bg等less定义的颜色 ...

  8. ubuntu下的wps office for linux

    今天修改老师给的论文,也没备份,悲剧的一幕发生了,原来用的word在ubuntu里打开,结果图片显示不出来,也不知怎么修复,哭死... 网上搜索答案,一位热心的网页推荐我用wps office for ...

  9. .net中的Dictionary字典类的使用方法

    //定义字典 Dictionary<string, string> d = new Dictionary<string, string>(); //添加字典的元素 ; i &l ...

  10. jenkins配置java

    # JDK版本 java -version # JDK目录 echo $JAVA_HOME # jenkins配置