JavaScript BOM对象

一、window对象

顾名思义window是窗口的意思,也就是浏览器的窗口,所有浏览器都支持window对象,因此所有的JavaScript全局对象,函数,变量都是window对象的成员

全局变量是window对象的属性

全局函数是window对象的方法

子对象:

属性:

方法:

二、location 对象

location 对象用于获得当前页面的地址 (URL),或把浏览器重定向到新的页面

跳转的多种方式

案例:点击链接跳转详情页

第一个页面:

  // search 传递多个参数获取
    var search = window.location.search;
    //获取的?之后的字符串去掉问好,其余的分割
    var arr = search.substring(1).split('&');
    // 方法1 字符串截取
    // for(var i = 0;i<arr.length;i++){
    //     var val = arr[i].substring(arr[i].indexOf('=')+1);
    //     console.log(val);
    // }

    //方法2 字符串分割
    for(var i = 0;i<arr.length;i++){
        console.log(arr[i].split('=')[0]);
        console.log(arr[i].split('=')[1]);
    }

搜索框传参

第二个页面

<style>
        .box{
            display: flex;
        }
        .box div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="./3-detail.html?product_id=1001">
            <div>小米</div>
        </a>
        <a href="./3-detail.html?product_id=1002">
            <div>红米</div>
        </a>
    </div>

第三个页面    根据传参渲染数据

<div id="concent">
        详情页
    </div>
    <script>
        var goods = {
            code:200,
            data:[
                {
                id:1001,
                goodnames:'小米',
                price:1900,
                nums:100
            },
            {
                id:1002,
                goodnames:'红米',
                price:3900,
                nums:123
            },
            {
                id:1003,
                goodnames:'紫米',
                price:2900,
                nums:11
            }
            ]
        }
        //传递一个参数跳转
        var search = window.location.search;
        if(!search){
            concent.innerHTML = `出问题啦,请刷新试试`
        }else{
            var id = search.split('=')[1];
            var data = goods.data;
            var str = '';
            for(var i = 0;i<data.length;i++){
                if(data[i].id == id){
                    str += `<p>商品名称${data[i].goodnames}</p>
                    <p>商品名称${data[i].price}</p>
                    <p>商品名称${data[i].nums}</p>`
                }

            }
            concent.innerHTML = str;
        }

三、history  对象

history对象是JavaScript中的一种默认对象,该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法,可以完成类似于浏览器窗口中的前进、后退等按钮的功能

history.go(0)  刷新页面

四、navigator对象

navigator对象,也称为浏览器对象,该对象包含了浏览器的整体信息,如浏览器名称、版本号等

五、screen对象

screen对象是一个由JavaScript自动创建的对象,该对象的作用主要是描述客户端的显示器的信息,例如屏幕的分辨率、可用颜色数等。screen对象是一个全局对象,该对象中存放的都是静态属性,这些属性值是只读的  

六、浏览器url的解密与加密

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。   加密

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

热门相关:绍宋   你好,墨先生   都市捉妖人   至尊龙帝陆鸣   韩娱之影帝