码迷,mamicode.com
首页 > 其他好文 > 详细

9、BOM (浏览器对象模型)

时间:2018-07-06 21:35:25      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:yellow   ftp   返回   toc   调用   主机名   rom   pen   类型   

1、认识BOM

js
三个部分:
1、ECMAScript标准 ECMA5 ECMA6
2、BOM Browser Object Model 浏览器对象模型
3、DOM 文档对象类型

window对象下的函数。
技术分享图片

alert()

格式:window.alert(参数)
功能:弹出一个警告框,并显示,传入的内容
【注】所有window开头的函数,都==可以省略window==调用。
window.alert(123);

confirm

格式:window.confirm(参数)
功能:弹出一个带确定和取消的提示框
返回值:点击确定,返回true,点击取消,返回false

            /*var res = confirm("我美么?");
            alert(res);*/
prompt

格式:window.prompt(参数)
参数:第一个参数,面板上显示的内容,第二个参数,输入框默认值
功能:这是一个带输入框的提示框
返回值:当点击确定,返回,输入的内容。当点击取消,返回null。

            /*var res = prompt("请输入一个数", 10)
            console.log(res);*/

2、open与opener

window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");

三个参数
第一个参数:打开的网站的url
第二个参数:打开的新窗口起个名字(仅仅是起个名字,看不到这个名字)
第三个参数:一串特殊意义字符串。

opener

【注】打开当前窗口的父窗口

    <body>
        <button onclick = "btnClick();">打开一个新窗口</button>
    </body>
    <script>
        var i = 0;
        function btnClick(){
            /*
                三个参数
                第一个参数:打开的网站的url
                第二个参数:打开的新窗口起个名字(仅仅是起个名字,看不到这个名字)
                第三个参数:一串特殊意义字符串。
            */
            
            window.open("https://www.baidu.com", "百度", "width=400,height=400,top=200,left=200");
            
            /*while(i < 10){
                var str = "width=400,height=400,top=" + (200 + 10 * i) + ",left=" + (200 + 10 * i);
                window.open("https://www.baidu.com", "百度" + i, str);
                i++;
            }*/
            
        }
    </script>
父窗口:
    <style>
            body{
                background-color: yellow
            }
        </style>
    </head>
    <body>
        <h1>这里是父窗口</h1>
        <button onclick = "btnClick();">打开子窗口</button>
    </body>
    <script>
        function btnClick(){
            open("sub.html", "sub", "width=400,height=400,top=200,left=200");
        }
    </script>
子窗口
    <style>
            body{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h1>这里是子窗口</h1>
        <button onclick = "btnClick();">按钮</button>
    </body>
    <script>

        /*
            chome不支持
        */
        
        function btnClick(){
            // opener  打开当前窗口的父窗口的window对象
            // alert(opener);
            opener.document.write("我是子窗口");
        }
    </script>

3、history

window开头的属性也可以省略window

            /*alert(window.history);
            alert(history);*/
history对象

属性:history.length 当前窗口历史记录中的条数

history.back() 返回上一条记录
history.forward() 前进到下一条记录
history.go();
                传参: 0  刷新  
                     正数    前进该条数的记录      
                     负数    返回该条数的记录   
            // alert(history.length);

            function btnBack(){
                history.forward();
            }
            function btnForWard(){
                history.back();
            }
            function btnGo(){
                history.go(-2);
            }
        </script>
    </head>
    <body>
        <button onclick = "btnBack();">前进</button>
        <button onclick = "btnForWard();">后退</button>
        <button onclick = "btnGo();">GO</button>
    </body>

4、location

// alert(window.location === window.document.location);

【注】上述,无论通过任何方式访问到location对象都是同一个。

location对象的属性
技术分享图片

location 对象 窗口上的地址栏

url 统一资源定位符。 快递单

完整的url的格式:

https://www.baidu.com:8080/news?today=11&page=1#1

==协议://主机名:端口号/路径?查询字符串#锚点==

protocol 协议
        http://tianyufei.local/qwer/13location.html
        */

        // alert(location.protocol);
hostname
                www.baidu.com    域名  是为了好记给IP起的别名
                61.135.169.125   IP 全球范围内你使用的网络,唯一的标识。


                port 端口号  当前电脑的软件在使用软件的时候,会随机分配一个端口号。
                浏览器端口号:8080
                FTP:2020

            // alert(location.hostname);

            // alert(location.port);

            // alert(location.host);
IP:端口号
pathname 路径名
        // alert(location.pathname);
search 查询字符串
            ?username=tian&password=123     
            
    
        // alert(location.search);
hash 锚点 #100
        alert(location.hash);
        

location 方法

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            function btnClick(){
                // location.assign("https://www.baidu.com");
                // location.replace("https://www.baidu.com");

可以传参,可以传true进行。
如果你传true,代表的是不经过缓存,直接从服务器重载。

                location.reload(true);
            }

==location.assign() 跳转==
【注】在本窗口中加载页面,并且会产生历史记录。

==location.replace() 替换==
【注】在本窗口中加载页面,不会产生历史记录。

==location.reload() 重载==

        </script>
    </head>
    <body>
        <button onclick = "btnClick();">百度</button>
    </body>

5、延时器

==var ID = setTimeout(函数名, 毫秒数)==
参数:1、函数名
???2、毫秒数
返回值:该延时器的ID
【注】延迟对应毫秒数以后去执行一次函数,有且仅执行一次。

clearTimeout(ID)
功能:清除延时器。

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            /*
                var ID = setTimeout(函数名, 毫秒数)
                参数:1、函数名
                     2、毫秒数
                返回值:该延时器的ID

                【注】延迟对应毫秒数以后去执行一次函数,有且仅执行一次。

                clearTimeout(ID)
                功能:清除延时器。
            */
            var ID = setTimeout(function(){
                alert("五秒到了");
            }, 5000);

            function btnClick(){
                clearTimeout(ID);
            }
        </script>
    </head>
    <body>
        <button onclick = "btnClick();">取消掉</button>
    </body>

6、进度条

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #progress{
                width: 600px;
                height: 35px;
                border: 1px solid black;
                margin: 100px auto;
                position: relative;
            }
            #fill{
                position: absolute;
                width: 0px;
                background-color: red;
                height: 35px;
                left: 0px;
                top: 0px;
                line-height: 35px;
            }
            #num{
                position: absolute;
                right: 0;
                color: white;
                font-size: 18px
            }
        </style>
    </head>
    <body>
        <div id = "progress">
            <div id = "fill" >
                <span id = "num">0%</span>
            </div>
        </div>
    </body>
    <script>
        var oProgress = document.getElementById("progress");
        var oFill = document.getElementById("fill");
        var oNum = document.getElementById("num");
        var i = 0; //当前的宽
        /*
            人眼能识别的最小的间隔是18帧,电影院里面放的电影是24帧。
        */
        var ID = setInterval(function(){
            i = i + 5;
            oFill.style.width = i + "px";

            //修改百分比
            oNum.innerHTML = parseInt((i / 600) * 100) + "%";
            if(i == 600){
                clearInterval(ID);
            }
        }, 30);
    </script>

9、BOM (浏览器对象模型)

标签:yellow   ftp   返回   toc   调用   主机名   rom   pen   类型   

原文地址:https://www.cnblogs.com/zhongchao666/p/9275507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!