JavaWeb学习笔记——BOM

最新推荐文章于 2023-01-08 23:13:11 发布

超级圈

最新推荐文章于 2023-01-08 23:13:11 发布

阅读量315

点赞数

分类专栏： JavaWeb学习笔记

本文链接：https://blog.csdn.net/weixin_44953364/article/details/102844668

版权

JavaWeb学习笔记专栏收录该内容

20 篇文章 4 订阅

订阅专栏

JavaScript

今日内容：
       1. ECMAScript：
       2. BOM：
       3. DOM：
           1. 事件

## DOM简单学习：为了满足案例要求
   * 功能：控制html文档的内容
   * 获取页面标签(元素)对象：Element
       * document.getElementById("id值"):通过元素的id获取元素对象

   * 操作Element对象：
       1. 修改属性值：
           1. 明确获取的对象是哪一个？
           2. 查看API文档，找其中有哪些属性可以设置
       2. 修改标签体内容：
           * 属性：innerHTML
           1. 获取元素对象
           2. 使用innerHTML属性修改标签体内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif">
    <h1 id="title">悔创阿里杰克马</h1>

<script>
    // var light = document.getElementById("light");
    // alert("我要换图片了！");
    // light.src = "img/on.gif";

    //1.获取h1标签对象
    var title = document.getElementById("title");
    alert("我要换内容了！");
    //2.修改内容
    title.innerHTML = "不识妻美刘强东";
</script>
</body>
</html>

## 事件简单学习
   * 功能：某些组件被执行了某些操作后，触发某些代码的执行。
       * 造句： xxx被xxx,我就xxx
           * 我方水晶被摧毁后，我就责备对友。
           * 敌方水晶被摧毁后，我就夸奖自己。

   * 如何绑定事件
       1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
           1. 事件：onclick--- 单击事件

2. 通过js获取元素对象，指定事件属性，设置一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<img id="light" src="img/off.gif" onclick="fun()">

<img id="light2" src="img/off.gif">

<script>
    function fun() {
        alert("我被点了！");
    }

    function fun2() {
        alert("咋老点我？");
    }
    //1.获取light2对象
    var light2 = document.getElementById("light2");
    //2.绑定事件
    light2.onclick = fun2;//注意！带括号就执行了！
</script>
</body>
</html>

案例：电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
</head>
<body>
//1.获取图片对象
<img id="light" src="img/off.gif">

<script>
    //2.获取light对象
    var light = document.getElementById("light");

    var flag = false;//代表灯是灭的
    function fun() {
        if (flag)  {//判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;
        } else {
            light.src = "img/on.gif";
            flag = true;
        }
    }

    light.onclick = fun;
</script>
</body>
</html>

# BOM:
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。

   2. 组成：
       * Window：窗口对象
       * Navigator：浏览器对象
       * Screen：显示器屏幕对象
       * History：历史记录对象
       * Location：地址栏对象

3. Window：窗口对象
   1. 创建
   2. 方法
   1. 与弹出框有关的方法：
   alert()   显示带有一段消息和一个确认按钮的警告框。
   confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
   * 如果用户点击确定按钮，则方法返回true
   * 如果用户点击取消按钮，则方法返回false
   prompt()   显示可提示用户输入的对话框。
   * 返回值：获取用户输入的值

2. 与打开关闭有关的方法：
   close()   关闭浏览器窗口。
   * 谁调用我，我关谁
   open()   打开一个新的浏览器窗口
   * 返回新的Window对象
3. 与定时器有关的方式
   setTimeout()   在指定的毫秒数后调用函数或计算表达式。
   * 参数：
   1. js代码或者方法对象
   2. 毫秒值
   * 返回值：唯一标识，用于取消定时器
   clearTimeout()   取消由 setTimeout() 方法设置的 timeout。

   setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
   clearInterval()   取消由 setInterval() 设置的 timeout。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Window对象</title>
</head>
<body>
    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">
    <script>
        // window.alert();

        // var flag = confirm("您确定要退出吗？");
        // if (flag){
        //     //退出操作        // setTimeout(fun,2000);

        //     alert("欢迎再次光临！");
        // } else {
        //     alert("手别抖。")
        // }

        //输入框
        // var result = prompt("请输入用户名");
        // alert(result);

        //打开新窗口
        // var openBtn = document.getElementById("openBtn");
        // var newWindow;
        // openBtn.onclick = function(){
        //     newWindow = open("http://www.baidu.com");
        // }
        //关闭窗口
        // var closeBtn = document.getElementById("closeBtn");
        // closeBtn.onclick = function (){
        //     newWindow.close();
        // }

        //一次性定时器
        var id = setTimeout(fun,2000);
        clearTimeout(id);

        function fun() {
            alert('boom~~');
        }

        //循环定时器
        //setInterval(fun,2000);
    </script>
</body>
</html>

案例：轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
    <script>
        //修改图片src属性
        var number = 1;
        function fun() {
            number++;
            //判断number是否大于3
            if (number > 3) {
                number=1;
            }
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }
        //2.定义定时器
        setInterval(fun,3000);
    </script>
</body>
</html>

3. 属性：
   1. 获取其他BOM对象：
   history
   location
   Navigator
   Screen:
   2. 获取DOM对象
   document
   4. 特点
   * Window对象不需要创建可以直接使用 window使用。 window.方法名();
   * window引用可以省略。方法名();

   4. Location：地址栏对象
       1. 创建(获取)：
           1. window.location
           2. location

       2. 方法：
           * reload()   重新加载当前文档。刷新
       3. 属性
           * href   设置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
    <input id="btn" type="button" value="刷新">
    <input id="goBaidu" type="button" value="去百度">

    <script>
        //reload方法，定义一个按钮，点击按钮，刷新当前页面
        //1.获取按钮
        var btn = document.getElementById("btn");
        //2.绑定单击事件
        btn.onclick = function () {
            //3.刷新页面
            location.reload();
        }

        //获取href
        var href = location.href;
        //alert(href);
        //点击按钮，访问百度www.baidu.com
        //1.获取按钮
        var goBaidu = document.getElementById("goBaidu");
        //2.绑定单击事件
        goBaidu.onclick = function () {
            location.href = "http://www.baidu.com"
        }
    </script>
</body>
</html>

案例：页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>

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

5. History：历史记录对象
1. 创建(获取)：
1. window.history
2. history

2. 方法：
* back()   加载 history 列表中的前一个 URL。
* forward()   加载 history 列表中的下一个 URL。
* go(参数)   加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length   返回当前窗口历史列表中的 URL 数量。

超级圈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记——BOM

JavaScript今日内容： 1. ECMAScript： 2. BOM： 3. DOM： 1. 事件## DOM简单学习：为了满足案例要求 * 功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过...
复制链接

扫一扫

专栏目录