JavaScript系列--BOM

小蔡coding
179 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、概述

​ JS由一下几个部分组成，学习BOM要先了解一下事件DOM的基础知识

ECMAScript：脚本语言的基本语法和一些常用对象

​ BOM：

​ DOM：

​ 1.事件

1.1DOM

文档对象模型

1.2功能

控制html文档内容

1.3代码

获取页面标签（元素）对象 Element

​ document.getElementById("id值")：通过元素的id

1.4操作Element对象

​ 1.修改属性值

​ 明确获取的对象是哪一个

​ 查看API文档，找其中有哪些属型可以设置

​ 2.修改标签体内容：

​ 属型：innerHTML

<body>

<!--    <img id = "one" src="../image/2.jpeg">-->
    <h1 title="title">妻不知刘强东</h1>

    <script>
        // var img1 = document.getElementById(one);
        // alert("换图片了哦！");
        // img1.src = "../image/3.jpeg";

        var title = document.getElementById("title");
        alert("换字了");
        title.innerHTML = "哈哈哈";

    </script>

</body>

1.5事件

1.5.1概念

​ 某些组件被执行了某些操作后，触发某些代码的执行

​ 造句：XXX被XXX，我就XXX

​ 我方水晶被摧毁后，我就责备对象

1.5.2如何绑定事件

​ 直接在html标签上

<img id = "img1" src="../img/1.jpg" onclick="fun();">
<img id = "img2" src="../img/2.jpg">

<script>
    function fun(){
        alert('w c');
        alert('?');
    }
    function fun2(){
        alert('what happen?');
        alert('?');
    }

    var img1 = document.getElementById("img2");
    img1.onclick = fun2;
</script>

1.5.3综合实例

实现图片点一次切换一次

<body>

    <img id = 1 src="../img/1.jpg">

    <script>
        //1.获取图片对象
        // flag = flase;这个地方错五，没有提示看不出来怎么办？浏览器打开之后按f12进入控制台会有提示
        flag = true;
        var str = document.getElementById(1);
        str.onclick = function (){
            if (flag){
                str.src = "../img/2.jpg";
                flag = false;
            }else{
                str.src = "../img/1.jpg";
                flag = true;
            }
        }
    </script>

</body>

二、BOM对象

2.1概念

Browser object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象。

2.2组成

2.2.1window :窗口对象

（1）实例

<body>

<input id = 'open' type="button" value="打开新窗口">
<input id = 'close' type="button" value="关闭新窗口">
<script>
    /*
    windows对象
        1.创建
        2.方法
            1.与弹出有关的方法
                alert() 显示一段消息和一个确认
                confirm()   显示带有确认和取消的对话框
                    点击确定返回true
                    点击取消返回false
                prompt()    显示可以提示用户输入的对话框
                    返回值：获取用户输入值

            2.与打开关闭有关的方法
                open() 打开窗口
                close()   关闭窗口，谁调用谁被关

            3.与定时器有关的方式
               setTimeout()     在指定的毫秒数后调用函数或计算表达式
                    参数 ：
                        1.js代码或者方法对象
                        2.毫秒值
                    返回值：
                        唯一标识，用于取消定时器

               cleanTimeout()    取消由setTimeout()方法设置的timeout

               setInterval()       按照指定的周期来调用
               clearInterval()      取消setInterval设置的timeout



        3.属型
        获取其他的BOM对象和DOM对象


        4.特点
            windows对象不需要创建可以直接使用
            windows引用可以省略
            例如我们前面常用的alert，其实就是windows对象中的方法
     */

    var flag = confirm("下面会出现两个按钮，确认和取消");
    if (flag){
        alert("你点了确定");
    }else {
        alert("你点了取消");
    }

    var str = prompt("请输出用户名");
    alert(str);

    获得标签对象
    var ele = document.getElementById("open");
    var newWindow;
    //绑定事件
    ele.onclick = function (){
        newWindow = open("http://www.baidu.com");
    }

    var ele1 = document.getElementById("close");

    ele1.onclick = function (){
        newWindow.close();
    }

    var timeout = setTimeout(fun,2000);
    clearTimeout(timeout);
    function fun(){
        alert("boom~~~");
    }

    var interval = setInterval(fun,2000);
    clearInterval(interval);
    function fun(){
        alert("boom~~~");
    }
    window.document


</script>

</body>

（2）轮播图实例和小bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
    <img id = "img1" src="../img/g1.jpeg" width="100%">

    <script>
        /*轮播图思路
        1.写更改图片的方法
        2.调用更改图片的方法
        3.每3秒
         */

            var num = 1;
            function fun(){
                num ++;
                if (num > 3){
                    num = 1;
                }
                var img = document.getElementById("img1");
                //小bug
                // Uncaught TypeError: Cannot set property 'src' of null
                //原因是document.getElementById("img1")没有获取到元素对象
                img.src = "../img/g"+num+".jpeg";
            }

            setInterval(fun,2000);

    </script>

</body>
</html>

2.2.2Navigator 浏览器对象

不常用

2.2.3screen 显示器屏幕对象

不常用

2.2.4History 历史记录对象

（1）创建(获取)

window.history

history

（2）方法

back() 加载history列表中的前一个URL。 forward() 加载history 列表中的下一个URL。 go() 加载hisItory 列表中的某个具体页面。

​ 参数：

​ 正数：前进几个历史记录

​ 负数：后退几个历史记录

​ 相当于集成了back和forwork方法

​

（3）属性

​ length 返回当前窗口历史列表中的URL数量。

（4）实例

<body>
<!--<input id = "forword" type="button" value="前进">-->
<input id = "f" type="button" value="前进">


<a href="轮播图案列.html">后退实例</a>
<script>
    // var f = document.getElementById("forword");
    // f.onclick = function (){
    //     history.forward();
    // }

    var f1 = document.getElementById("f");
    f1.onclick = function (){
        history.go(1);
    }
    // var b = document.getElementById("back");
    // f.onclick = function (){
    //     history.back();
    // }
</script>
</body>

2.2.5Location 地址栏对象

（1）创建

  • window.location

  • location

（2）方法

reload() 重新加载当前文档。刷新

（3）自动跳转实例

<style>
    /*
    div这个标签是用来划分区域的，它是个块级元素block
    span标签是个行内元素（行内元素就是在浏览器的一行上）比如span里面的元素不会换到下一行
     */
    p{
        text-align: center;
    }
    span{
        color: #ff0000;
    }

</style>
<body>
    <p>
        <span id = "time">5</span>秒之后，自动跳转到首页
    </p>


<script>
    /*
    分析:
    1.显示页面效果<p>
    2.倒计时读秒效果实现
        2.1定义一个方法,获取span标签，修改span标签体内容，时间--
        2.2定义一个定时器,1秒执行一次该方法
    3.在方法中判断时间如果<= 0，则跳转到首页
     */
    var second = 5;
    function fun(){
        second --;
        if (second <= 0){
            location.href = "http://www.qq.com"
        }
        var time = document.getElementById("time");
        time.innerHTML = second + "";
    }
    setInterval(fun,1000);

</script>

</body>
avatar
文章
阅读
粉丝