zoukankan      html  css  js  c++  java
  • BOM

    一、BOM概述

    1. 概念:Browser Object Model 浏览器对象模型
        * 将浏览器的各个组成部分封装成对象。
    
    2. 组成:
        * Window:窗口对象
        * Navigator:浏览器对象
        * Screen:显示器屏幕对象
        * History:历史记录对象
        * Location:地址栏对象


    二、window窗口对象

    1、window弹出方法

    1. 创建
    2. 方法
         1. 与弹出框有关的方法:
            alert()    显示带有一段消息和一个确认按钮的警告框。
            confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮,则方法返回true
                * 如果用户点击取消按钮,则方法返回false
            prompt()    显示可提示用户输入的对话框。
                * 返回值:获取用户输入的值
    
    3. 属性:
        1. 获取其他BOM对象:
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();
    
    -------------------------------------------
        <script>
            var flsg = confirm("您确定要退出吗?");
    
            if(flsg) {
                alert("欢迎再次光临!")
            }else {
                alert("手别抖...")
            }
    
            var username = prompt("请输入用户名:");
            alert(username);
        </script>


    2、window打开、关闭方法

    与打开关闭有关的方法:
        close()    关闭浏览器窗口。
            * 谁调用我 ,我关谁
    
        open()    打开一个新的浏览器窗口
            * 返回新的Window对象
    
    ------------------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" id="openBtn" value="打开窗口">
        <input type="button" id="closeBtn" value="关闭窗口">
    
        <script>
            var openBtn = document.getElementById("openBtn");
            var newwindow;
            openBtn.onclick = function () {
                newwindow = open("https://www.baidu.com");
            }
    
            var closeBtn = document.getElementById("closeBtn")
            closeBtn.onclick = function () {
                newwindow.close();
            }
        </script>
    </body>
    </html>


    3、window定时器方法

    与定时器有关的方式
        setTimeout()    在指定的毫秒数后调用函数或计算表达式。
            * 参数:
                1. js代码或者方法对象
                2. 毫秒值
            * 返回值:唯一标识,用于取消定时器
        clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
    
        setInterval()    按照指定的周期(以毫秒计)来调用函数或计算表达式。
        clearInterval()    取消由 setInterval() 设置的 timeout。
    
    ----------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script>
            //一次性定时器
            function fun() {
                alert("boom...")
            }
    
            var id  = setTimeout("fun();",3000) //3s
            clearTimeout(id);  //取消定时器
    
            //循环定时器
            setInterval(fun,2000);
        </script>
    </body>
    </html>


    4、轮播图案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
    </head>
    <body>
    /*
    * 1.在页面上使用img标签展示图片
    * 2.定义一个方法,修改图片对象的src属性
    * 3.定义一个定时器,每隔3秒调用方法一次.
    * */
    
    <img id="banner"  src="img/banner_1.jpg" width="100%">
    
    <script>
        var number = 1;
        function changeImg(){
            number ++;
            if(number > 3){
                number = 1;
            }
            document.getElementById("banner").src = "img/banner_"+number+".jpg";
        }
    
        setInterval(changeImg,2000);
    </script>
    
    </body>
    </html>


    5、window属性

    1. 获取其他BOM对象:
        history
        location
        Navigator
        Screen:
    2. 获取DOM对象
        document
    
    ------------------------------------
        <script>
            var h1 = window.history;
            var h2 = history;
            alert(h1);
            alert(h2);
            
            var s1 = window.document.getElementById("");
            var s2 = document.getElementById("");
            
        </script>


    三、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 type="button" id="btn" value="刷新">
        <input type="button" id="gobaidu" value="去百度">
    
        <script>
            //reload方法,定义一个按钮,点击按钮,刷新当前页面
            var btn = document.getElementById("btn")
    
            btn.onclick = function () {
                location.reload();
            }
    
            //获取href
            var href = location.href;
            alert(href);
    
            //点击按钮,访问ITcast官网
            var gobaidu = document.getElementById("gobaidu");
            gobaidu.onclick = function () {
                location.href = "https://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.显示页面效果<p>
            2.倒计时读秒效果实现
              2.1定义一个方法,获取span标签,修改span标签体内容,时间--
              2.2.定义一个定时器,1秒执行一次该方法
            3、在方法中判断时间如果<=e,则跳转到首页
             */
    
            var second = 5;
            function showtime(){
                second --;
                if(second <= 0) {
                    location.href = "https://www.baidu.com";
                }
    
                var time = document.getElementById("time");
                time.innerHTML = second +"";
            }
    
            setInterval(showtime,1000);
        </script>
    </body>
    </html>


    四、History:历史记录对象

    1. 创建(获取):
        1. window.history
        2. history
    
    2. 方法:
        * back()    加载 history 列表中的前一个 URL。
        * forward()    加载 history 列表中的下一个 URL。
        * go(参数)    加载 history 列表中的某个具体页面。
            * 参数:
                * 正数:前进几个历史记录
                * 负数:后退几个历史记录
    
    3. 属性:
        * length    返回当前窗口历史列表中的 URL 数量。
    
    -----------------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>history</title>
    </head>
    <body>
        <input type="button" id="btn" value="获取历史记录个数">
        <a href="History2.html">History2</a>
        <input type="button" id="forward" value="前进">
    
    
        <script>
            var btn = document.getElementById("btn");
            btn.onclick  = function () {
                var length = history.length;
                alert(length);
            }
    
            var forward=document.getElementById("forward");
            forward.onclick = function () {
                // history.forward();
                history.go(1);
            }
        </script>
    </body>
    </html>
    
    -----------------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
    </head>
    <body>
    /*
    * 1.在页面上使用img标签展示图片
    * 2.定义一个方法,修改图片对象的src属性
    * 3.定义一个定时器,每隔3秒调用方法一次.
    * */
    
    <img id="banner"  src="img/banner_1.jpg" width="100%">
    <input type="button" id="back" value="后退">
    
    <script>
        var number = 1;
        function changeImg(){
            number ++;
            if(number > 3){
                number = 1;
            }
            document.getElementById("banner").src = "img/banner_"+number+".jpg";
        }
    
        setInterval(changeImg,2000);
    
        var back=document.getElementById("back");
        back.onclick = function () {
            // history.back();
            history.go(-1);
        }
    </script>
    
    </body>
    </html>
  • 相关阅读:
    Atlas
    MHA高可用
    Mycat 读写分离
    数据库 基于GTID主从复制
    DHCP服务
    python垃圾回收机制
    深拷贝、浅拷贝、引用(总结)
    python内存管理机制
    web安全-横向越权与纵向越权
    登录功能SQL注入
  • 原文地址:https://www.cnblogs.com/weiyiming007/p/11528169.html
Copyright © 2011-2022 走看看