JSBOM

BOM

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

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(1)  //弹出框
        
        //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>

 

open和close方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求：点击按钮，打开新的窗口-->
    <button>原窗口</button>
    <button>新窗口</button>
    <a href="http://www.luffycity.com" target="_self">原窗口</a>
    <a href="http://www.luffycity.com" target="_blank">新窗口</a>
    <script type="text/javascript">
        var oBtn = document.getElementsByTagName('button')[0];
        var oBtn1 = document.getElementsByTagName('button')[1];
        oBtn.onclick = function () {
            // window.open(url,新窗口/原窗口)
            open('http://www.luffycity.com', target='_self');
        }
        oBtn1.onclick = function () {
            open('https://www.luffycity.com', target='_blank');
        }
    </script>
</body>
</html>

location本地信息对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        console.log(location)
        setTimeout(function () {
            location.href = 'https://www.baidu.com';
            alert('度娘知道');
        },2000)
    </script>
</body>
</html>

history对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>我是原网页</p>
    <a href="./index.html">新网页</a>
    <button id="back">后退</button>
    <button id="refresh">刷新</button>
    <button id="forward">前进</button>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        $('forward').onclick = function () {
            // (1)表示前进
            window.history.go(1);
        }
        $('back').onclick = function () {
            // (-1)表示后退
            window.history.go(-1);
        }
        $('refresh').onclick = function () {
            // (0)表示刷新，不常用，这个是全局刷新
            // window.history.go(0);
            location.reload();
        }
    </script>
</body>
</html>

客户端存储技术

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" name="user" id="user">
        <input type="submit" id="btn" value="保存">
        <button id="clear">清除</button>
    </div>
    <ul id="lists">

    </ul>
    <script type="text/javascript">
        
        var oBtn = document.getElementById('btn');
        var oUser = document.getElementById('user');
        var oLists = document.getElementById('lists');
        var li = document.createElement('li');

        oBtn.onclick = function () {
            var val = oUser.value;
            localStorage.setItem('name', val)
            oUser.value = '';
            li.innerHTML = val;
        }

        window.onload = function(){
            if(localStorage.getItem('name')){
                var name = localStorage.getItem('name');
                li.innerHTML = name;
                oLists.appendChild(li);
            }
        }
        document.getElementById('clear').onclick = function(){
            localStorage.clear();
            window.location.reload();
        }

        oLists.appendChild(li)

        // 客户端存储技术
        // localStorage
        // var arr = [{'title':'abcd','done':false}];
        // var name = 'alex';
        // localStorage.setItem('TODO',arr);
        // localStorage.setItem('todo',name);
    </script>
</body>
</html>

 

posted @ 2019-01-11 14:09  李卓航  阅读(352)  评论(0)    收藏  举报