BOM

所谓BOM指的是浏览器对象模型 Browser Object Model，它的核心就是浏览器

Bom浏览器对象模型

1、bom输出

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button onclick="printLuffy()">打印</button>

        <button onclick="findLuffy()">查找</button>

    </body>

    <script type="text/javascript">

        //1.js ECMAScript DOM：文档  BOM

        //BOM  Browser Object Model 浏览器对象模型

        //核心  浏览器

        //浏览器的输出   屏幕的宽高 滚动的宽高  setInterval ..  window.open()开一个网址； close()   location本地的一个对象

        alert()  //弹出框

        //2.用于浏览器的调试

        console.log('路飞学城')  //路飞学城

        //3. prompt('message',defaultValue)   ；输入给它返回

        var pro = prompt('luffycity','123456');  //会弹出 luffycity 123456

        console.log(pro)

        //4 confirm() 如果点击确定 返回true 如果点击取消 返回false

        var m = confirm("学习Bom");

        console.log(m) //学习Bom

        function printLuffy(){   //直接调用打印这个页面

            print()

        }

        function findLuffy(){

            var m2 = confirm("学习Bom");

            find(m2);

        }

    </script>

</html>

2、open和close方法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--行间的js中的open()方法  window不能省略-->

        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>

        <button>打开百度</button>

        <button onclick="window.close()">关闭</button>

        <button>关闭</button>

    </body>

    <script type="text/javascript">

        var oBtn = document.getElementsByTagName('button')[];

        var closeBtn = document.getElementsByTagName('button')[];

        oBtn.onclick = function(){

//            open('https://www.baidu.com')   //不是行间的时候就不用加window了

            //打开空白页面

            open('about:blank',"_self")

        }

        closeBtn.onclick = function(){

            if(confirm("是否关闭？")){

                close();

            }

        }

    </script>

</html>

3、bom的其他对象

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        alert('刷新了')

        //返回浏览器的用户设备信息

        console.log(window.navigator.userAgent)

//        console.log(window.location)

        //经常使用的一个方法

//        window.location.href = 'https://www.luffycity.com';

        //全局刷新  ===》 局部刷新   尽量少用这个方法

        setTimeout(function(){

            window.location.reload();  //reload重新加载;会隔3s便会重新刷新

        },)

    </script>

</html>

4、client系列

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .box{

                width: 200px;

                height: 200px;

                position: absolute;

                border: 20px solid red;

                margin: 10px 0px 0px 0px;

                padding: 10px;

            }

        </style>

    </head>

    <body>

        <div class="box">

        </div>

    </body>

    <script type="text/javascript">

        /*style

             * top

             * left

             * right

             * bottom

         * client

         *   clientTop 内容区域到边框顶部的距离   边框的高度

         *      clientLeft 内容区域到边框左部的距离  边框的宽度

         *   clientWidth 元素的宽和高；内容区域+左右padding值   可视宽度

         *      clientHeight 内容区域 + 上下padding值   可视高度

         * */

        var oBox = document.getElementsByClassName('box')[];

        console.log(oBox.clientTop) //20

        console.log(oBox.clientLeft) //20

        console.log(oBox.clientWidth) //220

        console.log(oBox.clientHeight) //220

    </script>

</html>

5、屏幕的可视区域

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        /*

         * */

        window.onload = function(){

            console.log(document.documentElement.clientWidth);   //clientwidth是可视内容的高

            console.log(document.documentElement.clientHeight);

            window.onresize = function(){  //监听窗口，屏幕可视区域的宽和高

                console.log(document.documentElement.clientWidth);//当放大缩小屏幕这两个数值是变化的

                console.log(document.documentElement.clientHeight);

            }

        }

    </script>

</html>

6、offset系列

占位宽和占位高

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style = "position: relative;">

        <div id="box" style="width:200px;height: 200px;

        border: 1px solid red;

        padding: 10px;

        margin: 10px;

        position: absolute;

        top: 20px;

        left: 30px;">

        </div>

    </div>

</body>

<script type="text/javascript">

    window.onload = function () {

        var box = document.getElementById('box') //先获取这个盒子

        //占位宽 高 Top Left

        /*

         * offsetTop: 如果盒子没有设置定位 到浏览器的顶部的距离,如果盒子设置定位，那么是以父盒子为基准的top值

         * offsetLeft： 如果盒子没有设置定位 到浏览器的左部的距离，如果盒子设置定位，那么是以父盒子为基准的left值

             offsetWidth 内容+padding+border

         * */

        console.log(box.offsetTop) //30

        console.log(box.offsetLeft) //40

        console.log(box.offsetWidth) //222

        console.log(box.offsetHeight) //222

    }

</script>

</html>

7、scroll系列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{

            padding: o;

            margin: ;

        }

    </style>

</head>

<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 id="scroll" style="width:200px;height: 200px;

    border: 1px solid red;

    overflow: auto;

    padding: 10px;

    margin: 5px 0px 0px 0px;">

        <p>路飞学城

            “创意是我们的目标，

            而编程可以实现这样的目标。

            创意在前端体现，

            而技术就是它的后盾。

            这两样东西混合在一起，

            就能创造出强大的东西。”

            马丁·路德·金在杜克大学发表演讲，他警告大家，总有一天，我们将不得不赎罪，不仅是为坏人的言行，

            也为那些保持骇人听闻的沉默和冷漠的好人们，他们只是坐在那里说“等待时机”，

            但是“做正确的事情，无论什么时候都是好时机。”

        </p>

    </div>

</body>

<script type="text/javascript">

    window.onload = function(){

        //实施监听滚动事件

        // window.onscroll = function(){

        //        console.log(1111)

        //        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)

        }

    }

</script>

</html>

JsBom的更多相关文章

  1. 前端开发 - jsBom

    一.jsBom简介 jsBom = javascript browser object modelBOM指的是浏览器对象模型 Browser Object Model,它的核心就是浏览器. 二.Bom ...

  2. js-BOM之offset家族、移动函数的封装升级（轮播图）

    Obj.style.width/obj.style.height与obj.offsetWidth/obj.offsetHeight的区别: <style> #div1{ height: 2 ...

  3. JAVAscript学习笔记 jsBOM 第七节 （原创） 参考js使用表

    <html> <head> <title>day02_js</title> <script type="text/javascript& ...

  4. jsBOM内容

    正如我们所知道的,javascript分为三大块,ECMAscript,BOM,DOM,ECMAscript固然重要:可是在web中使用ECMAscript很大程度上需要了解BOM即浏览器对象模型,否 ...

  5. 0417 jsBom操作+Dom再次整理

    BOM 1.Windows对象 window.open("打开的地址","打开的位置")window.opener:打开此页面的上一个页面对象window.cl ...

  6. JS--bom对象：borswer object model浏览器对象模型

    bom对象:borswer object model浏览器对象模型 navigator获取客户机的信息(浏览器的信息) navigator.appName;获得浏览器的名称 window:窗口对象 a ...

  7. day52 js--- bom dom

    本文转载自李文周博客,-----cnblog.liwenzhou.com dom官网资料: http://www.w3school.com.cn/htmldom/dom_methods.asp Jav ...

  8. 前端-JS-BOM和DOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  9. js---BOM 的理解方法

    windows 方法 window.close(); //关闭窗口   window.alert("message"); //弹出一个具有OK按钮的系统消息框,显示指定的文本   ...

随机推荐

  1. 复杂HTML解析

    面对页面解析难题时候,需要注意问题: 1.寻找“打印次页”的链接,或者看看网站有没有HTML样式更友好的移动版(把自己的请求头设置成处于移动设备的状态,然后接收网站移动版). 2.寻找隐藏在JavaS ...

  2. Ansi与Unicode编码

    视频教程:Ansi与Unicode编码 大家在编程时经常遇到的数据类型: ● Ansi: char   代表一个字符  (CHAR) char *  代表一个字符串指针   (PCHAR    PST ...

  3. Ubuntu 16.04配置国内高速apt-get更新源【转】

    转自:https://blog.csdn.net/twang0x80/article/details/79782753 Ubuntu 16.04下载软件速度有点慢,因为默认的是从国外下载软件,那就更换 ...

  4. 优秀的gdb图形化前端调试器

    目前我自己最喜欢的还是 ddd . gdbgui 和 vim-vebugger插件或vimgdb插件 三种. You could try using Insight a graphical front ...

  5. dubbo系列二、dubbo+zookeeper+dubboadmin分布式服务框架搭建(windows平台)

    一.zookeeper配置中心安装 1.下载安装包,zookeeper-3.4.6.tar.gz 2.解压安装包,修改配置文件 参考zookeeper-3.4.6/conf/zoo_sample.cf ...

  6. 解决walle报错：宿主机代码检出检测出错，请确认svn用户名密码无误

    使用walle检测报错: 查看日志 # tail -f /tmp/walle/walle-20161010.log 报错: 2016-10-10 14:20:30 -- --------------- ...

  7. Unicode范围预览

    链接: https://www.zhangxinxu.com/study/201611/show-character-by-charcode.php?range=4E00-9FBB 备注: Unico ...

  8. MVC，MVP设计模式

    什么是MVP MVP是模型(Model).视图(View).主持人(Presenter)的缩写,分别代表项目中3个不同的模块. 模型(Model):负责处理数据的加载或者存储,比如从网络或本地数据库获 ...

  9. Annoy 近邻算法

    Annoy 随机选择两个点,以这两个节点为初始中心节点,执行聚类数为2的kmeans过程,最终产生收敛后两个聚类中心点 二叉树底层是叶子节点记录原始数据节点,其他中间节点记录的是分割超平面的信息 但是 ...

  10. JS的浅拷贝与深拷贝

    浅拷贝 //这样的拷贝有一个问题.那就是,如果父对象的属性等于数组或另一个对象,//那么实际上,子对象获得的只是一个内存地址,而不是真正拷贝,因此存在父对象被篡改的可能. function exten ...