JavaScript BOM对象

合集 - web前端(29)

1.1-web前端基础标签、图片、超链接2023-09-19 2.2-web前端音频、视频、表格、表单2023-09-19 3.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-19 4.5-web前端定位position2023-09-19 5.6-web前端的特效平面转换transfrom2023-09-19 6.7-web前端空间转换，3D效果2023-09-19 7.8-web前端动画案例2023-09-19 8.9-web前端 flex弹性布局2023-09-19 9.10-JavaScript 点击事件随机点名器2023-09-20 10.11-JavaScript 逻辑条件，if判断，while循环，算数运算相关的案例演示2023-09-23 11.12-web前端轮播图案例（小米商城）2023-09-27 12.css字体样式2023-10-08 13.css样式对单行和多行文本的隐藏2023-10-10 14.css伪类和伪元素2023-10-12 15.web前端html+css页面内容的六种隐藏方式2023-10-16 16.JavaScript的基础语法和数据类型2023-10-26 17.JavaScript 数组Array存储方式及对象Object2023-10-27 18.JavaScript数据类型的转换2023-10-30 19.JavaScript运算符及优先级2023-10-31 20.JavaScript条件判断if 语句2023-11-01 21.JavaScript for循环控制语句2023-11-02 22.JavaScript 其他循环语句和跳转语句2023-11-03 23.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-04 24.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-04 25.JavaScript Array对象（属性、方法）留言板案例2023-11-04 26.JavaScript string对象（属性，方法）获取图片后缀案例输入和输出结果转换形式案例2023-11-07 27.JavaScript Date对象、日期求差案例、购物秒杀倒计时、日历2023-11-13 28.JavaScript事件 2023-11-18

29.JavaScript BOM对象2023-11-18

一、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;
        }