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. Oracle 创建 Schema

    -- 查看当前已有的用户 SELECT Username FROM dba_users; -- 创建临时 CREATE USER gzmpc IDENTIFIED BY PASSWORD; -- 授权 ...

  2. Linux命令详解-type

    type命令用来显示指定命令的类型. 一个命令的类型可以是如下之一     alias     别名     keyword 关键字,Shell保留字     function 函数,Shell函数 ...

  3. Access数据库 更新 "延时" 现象

    最近发现 Access数据库执行Update或Delete操作成功后,执行select回来的数据未更改.打开数据库查看时却发现已更改,再次执行select 后却发现正常了. 经调试发现:Access数 ...

  4. https ddos攻击——由于有了认证和加解密 后果更严重 看绿盟的产品目前对于https的ddos cc攻击需要基于内容做检测

    如果web服务器支持HTTPS,那么进行HTTPS洪水攻击是更为有效的一种攻击方式,一方面,在进行HTTPS通信时,web服务器需要消耗更多的资源用来进行认证和加解密,另一方面,一部分的防护设备无法对 ...

  5. Java——抽象类、接口

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  6. linux提权辅助工具（四）：LinEnum.sh

    来自:https://raw.githubusercontent.com/rebootuser/LinEnum/master/LinEnum.sh #!/bin/bash #A script to e ...

  7. OpenCV 3.2.0 + opencv_contrib+VS2017

    首先本文假定你的电脑已经配置好了OpenCV3.2.0,并且想要在此基础上,添加opencv_contrib.在学习图像识别中的特征点检测和匹配时,需要用到一些常用的算法如FREAK.Surf和Sif ...

  8. 网站使用 rel="noopener" 打开外部锚

    当您的页面链接至使用 target="_blank" 的另一个页面时,新页面将与您的页面在同一个进程上运行. 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会 ...

  9. php session目录找不到的错误 Error session_start(): open(/var/lib/php/session error

    问题来源 今天安装一个应用,发现提示 Error session_start(): open(/var/lib/php/session error,估计是找不到写不了啥啥啥. 于是我就去该路径下去看看 ...

  10. 斯特灵（Stirling）数

    http://zh.wikipedia.org/wiki/%E6%96%AF%E7%89%B9%E7%81%B5%E6%95%B0 第一类:n个元素分成k个非空循环排列(环)的方法总数 递推式:s(n ...