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. Git入门及常用命令(1)（window环境下）

    文章参考摘抄自:git教程 1.git的安装 Windows下要使用很多Linux/Unix的工具时,需要Cygwin这样的模拟环境,Git也一样.Cygwin的安装和配置都比较复杂,就不建议你折腾了 ...

  2. Linux常用命令--网终设置

    1.把自己(sa)添加到sudoers配置文件中,以便于获取权限 vim /etc/sudoers 编辑文件(部分centOS版本没有vim命令,则用vi即可) 找到[root ALL=(ALL) A ...

  3. npm 报错： npm ERR! Please try running this command again as root/Administrator.

    解决方法: 1. 需要删除npmrc文件. 强调:不是nodejs安装目录npm模块下的那个npmrc文件 而是在C:\Users\{账户}\下的.npmrc文件.. 2. 在win8或者win10下 ...

  4. web.xml中contextConfigLocation参数的作用

    <context-param> <param-name>contextConfigLocation</param-name> <param-value> ...

  5. Spring Boot @SpringApplicationConfiguration 不能导入的问题

    较新版的Spring Boot取消了@SpringApplicationConfiguration这个注解,用@SpringBootTest就可以了

  6. bzoj1075

    题意: 给你一个地图,问从x1,y1->x2,y2,要走的路最短,问 耗油和速度 题解: 首先把他们转到左下角->右上角 然后只能往上或往下 考虑到可能有小数 所以都乘上他们的公倍数 然后 ...

  7. hdu5818

    题解: 维护两个左偏树 按照左偏树模板来做 代码: #include<cstdio> #include<cmath> #include<algorithm> #in ...

  8. ces

    1. 测试目录 1.1. 测试目录 2. 测试目录2 2.1 测试目录

  9. ubuntu:NVIDIA设置性能模式，以降低CPU使用、温度

    NVIDIA设置性能模式,以降低CPU使用.温度 ubuntu安装完NVIDIA显卡驱动后 终端输入 nvidia-settings 选择OpenGL Settings->Image Setti ...

  10. mongodb配置数据库文件夹，创建服务

    配置步骤 1.新建data文件夹,并在data下创建db及log文件夹 2.在mongodb安装目录下新增mongod.cfg文件,配置如下 systemLog:    destination: fi ...