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. Python Inotify 监视LINUX文件系统事件

    Inotify 可以监视的LINUX文件系统事件包括: --IN_ACCESS,即文件被访问 --IN_MODIFY,文件被write --IN_ATTRIB,文件属性被修改,如chmod.chown ...

  2. C++设计与声明——让接口容易被正确使用

    一个简答易错的例子 class Date { public Date(int month,int day,int year); } 一年后使用这个接口的时候,写了Date d(15,10,2015)或 ...

  3. RabbitMQ 基础类和概念讲解

    转至:http://www.ostest.cn/archives/497 引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼. ...

  4. zz VS2010配色方案

    http://studiostyles.info 这个网站专门为vs 2005, vs 2008, vs2010提供配色方案下载. 网站首页罗列出大量的配色方案,都附有缩略图以及rated(评估),d ...

  5. day02Java基础学习笔记

    自动类型转换:容量小的类型自动转换为容量大的数据类型.数据类型按容量大小排序为: byte,short,char之间不会相互转换,他们三者在计算时首先转换为int类型 1.各种进制的表现形式和特点 二 ...

  6. New Concept English Two 17 43

    $课文41  你把那个叫帽子吗? 422. 'Do you call that a hat?' I said to my wife. “你把那个叫帽子吗?”我对妻子说. 423. 'You needn ...

  7. Winform开发常用控件之DataGridView的简单数据绑定——代码绑定DataSet、DataTable、IList、SqlDataReader

    前文介绍了Winform为DataGridView提供的数据自动绑定功能,下面介绍一下采用代码的数据绑定 1.用DataSet和DataTable为DataGridView提供数据源 先上代码 pri ...

  8. C语言——第四次作业(2)

    作业要求一 项目wordcount 设计思路:输入需统计的文件名,打开此文件,输入功能对应的字符,分别实现对应的功能,关闭文件. 主要代码 #include<stdio.h> #inclu ...

  9. Hibernate对象的三种状态，瞬时态、持久态、游离态

    1.瞬时态.(new完一个对象,突然断电,内存中没有此对象) hibernate中什么时候的对象为瞬时态呢,当我们new 一个对象时,还没有save时,它就是瞬时态的,当我们delete一个对象时,它 ...

  10. [笔记] linux中的计划任务crontab

    不能拒绝进步 cron来源于希腊单词chronos(意为"时间"),指linux系统下一个自动执行指定任务的程序(计划任务). 1--crontab 的命令选项 #crontab ...