（2020-11-09）javascript BOM对象

最新推荐文章于 2020-11-27 21:39:38 发布

�橙黄橘绿时。

最新推荐文章于 2020-11-27 21:39:38 发布

阅读量150

点赞数

分类专栏：基础文章标签： javascript

本文链接：https://blog.csdn.net/Missjuzi/article/details/109574981

版权

基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

知识梳理：

什么是API？

应用程序编程接口,应用程序或开发人员可以调用的第三方应用程序或硬件提供的函数,不需要关注具体资源的源代码。

web API:

面向网页开发,需要调用的api。

web API 分类：

一种是浏览器厂家提供的API BOM

一种是按ES的设计，由浏览器厂家提供的操作页面元素的api DOM

BOM 常用API：

Alert()	没有返回值
Prompt()	返回值为字符串
Confirm()	返回值为布尔型
Onload	这是个属性,取值是函数,作用页面全部加载完执行函数
Onunload	这是个属性,取值是函数,作用完全退出页面执行函数
Onbeforeunload	这是个属性,取值是函数,作用退出页面前执行函数

定时器：

setTimeout() window.setTimeout(函数,毫秒时间);在指定的时间之后,执行一次函数。（clearTimeout(存贮任务变量名) 清除任务）
setInterval() window.setInterval(函数,毫秒时间);按照给定的时间,周期性的调用函数。（clearInterval(存贮任务变量名) 清除任务）

location：

assgin(URL) 跳转到URL指定的页面
reload(布尔值默认false) 重新加载当前页面,false从浏览器缓存加载,true从服务器重新请求,并加载
replace(URL) 替换当前URL,并更新历史记录
hash 获取URL 锚点信息
host 主机
hostname 主机名
search 查询字符串信息
href 获取整个URL（存贮的是当前页面的URL(统一资源定位符)URL格式:scheme://host:port/path?query#fragment）

Scheme	协议
Host	主机IP
Port	端口,提供网页服务的端口默认8080
Path	要访问文件的路径
Query	携带信息
Fragment	信息片断

History：

Back()	后退一步
Forward	前进一步
go（正负整数）	按指定的数值前进或后退

Navigator：

userAgent	浏览器信息
Platform	操作系统信息

拓展案例：

时钟表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 时钟的样式 */
        #biao{
            width: 600px;
            height: 300px;
            background-color: orange;
            margin: auto;
            position: relative;
        }
        .biaoZheng{
            width: 150px;
            height: 150px;
            background-color: gray;
            float: left;
            margin: 70px 30px 0px 20px;
            font-size: 100px;
            text-align: center;
            line-height: 150px;
        }
        .yuanZhu{
            background-color: black;
            width: 30px;height: 30px;
            border-radius: 150px;
        }
        #biao .dw1{
            position: absolute;
            left: 180px;top:100px;
        }
        #biao .dw2{
            position: absolute;
            left: 180px;top:160px;
        }
        #biao .dw3{
            position: absolute;
            left: 380px;top:100px;
        }
        #biao .dw4{
            position: absolute;
            left: 380px;top:160px;
        }
    </style>
</head>
<body>
    <!-- 计时器 -->
    <div id="biao">
        <div class="biaoZheng" id="hours"></div>
        <div class="biaoZheng" id="Minutes"></div>
        <div class="biaoZheng" id="seconds"></div>
        <div class="yuanZhu dw1"></div>
        <div class="yuanZhu dw2"></div>
        <div class="yuanZhu dw3"></div>
        <div class="yuanZhu dw4"></div>
    </div>
    <div style="margin: auto;width: 100px;height: 50px;text-align: center;line-height: 50px;margin-top: 30px;">
        <button style="width: 100px;height: 50px;font-size: 22px;" onclick="zanTing()">暂停</button>
    </div>
    <script>
        // 计时器函数
        var renwu = setInterval("jishiqi()",1000);
        function jishiqi(){
            var time = new Date;
            var seconds = time.getSeconds();
            var Minutes = time.getMinutes();
            var hours = time.getHours();
            document.getElementById('hours').innerHTML= hours;
            document.getElementById('Minutes').innerHTML= Minutes;
            document.getElementById('seconds').innerHTML= seconds;
        }
        updateTime();
        // 暂停函数
        function zanTing(){
            clearInterval(renwu);
        }
    </script>
</body>
</html>

解析查询字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解析查询字符串
        var queryStr = "https://www.baidu.com/s?wd=%E5%90%89%E5%B0%94%E6%8B%9C%E7%99%BB&rsv_spt=1&rsv_iqid=0x8918dabe0005151c&issp=1&f=3&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ih_0&rsv_sug3=1&rsv_sug1=1&rsv_sug7=001&rsv_sug2=1&rsv_btype=i&rsp=0&rsv_sug9=es_2_1&rsv_sug4=3943&rsv_sug=9#miaodian";
        // 拿到需要解析的查询字符串
        var queryStrObj = jxquery(queryStr);
        // 收取函数返回值
        for(var key in queryStrObj){
        // 循环操作对象中的属性
			console.log(key+":"+queryStrObj[key]);
		}		
        function jxquery(queryStr){
        // 定义解析函数
            var query = {};
            // 定义一个空对象，方便我们最后存储分割后的字符串信息片段
            var start = queryStr.indexOf('?');
            // 获取截取内容首个字符串的位置
            var end = queryStr.indexOf('#');
            // 获取截取内容末尾字符串的位置
            if(start == -1 || end == -1){
            // 判断截取内容中是否有该字符
                return query;
            }
            var temp = queryStr.slice(start+1,end);
            // 获取截取的查询字符串
            var queryArr = temp.split('&');
            // 使用split方法将其分割成字符串数组
            queryArr.forEach(function(currentValue,index,arr){
                var arr = currentValue.split('=');
            // 遍历此数组中每个字符串元素，继续分割，使其成为二维数组
                query[arr[0]] = arr[1];
            // 将二维数组中的值放入之前建立的空对象中
            });
            return query;
        }
    </script>
</body>
</html>