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. ng-disabled 指令

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  2. selenium 3.6.0 geckodriver的一次坑

    Traceback (most recent call last):  File "./se3.py", line 16, in <module>    dr=webd ...

  3. POJ3279 搜索/思维

    Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10457   Accepted: 3866 Descrip ...

  4. iOS UI-应用管理（使用Cell模板）

    一.Model // // BWApp.h // IOS_0112_应用管理 // // Created by ma c on 16/1/12. // Copyright (c) 2016年 博文科技 ...

  5. 浅析parseInt与parseFloat的区别

    parsetInt与parseFloat的区别还是很大的,简单来说,parseInt解析字符串为整数,parseFloat解析字符串为小数. 首先说parseInt() 1.可以接受两个参数,第一个为 ...

  6. idea里面Java文件显示一个x

    idea里面Java文件显示一个x,编译时过滤了,setting->builder->compiler->excludes

  7. web service与EJB的区别

    1.WebService可以说是跨平台的,因为它采用的是XML技术,说穿了就是把你的请求按照该WebServece的标准将参数传过去,然后服务器返回结果,当然了最重要的是参数的传递和结果的返回都是采用 ...

  8. 【LeetCode 232_数据结构_队列_实现】Implement Queue using Stacks

    class Queue { public: // Push element x to the back of queue. void push(int x) { while (!nums.empty( ...

  9. angularjs指令中的require赋值含义

    前缀 寻找路劲 没有找到控制器是否抛错? 例如 Link函数中第四个参数 (no prefix) 当前指令的DOM 抛错 tabset 找到的Controller对象 ? 当前指令的DOM 不抛错 ? ...

  10. iOS KVC 和 KVO 区别简单总结

    KVC: key value coding,键值编码.是一种通过使用属性的名称(key)来间接访问对象属性的方法.这个方法可以不用通过 setter/getter 方法来访问对象的属性.该方法使用的实 ...