首页 > 编程语言 >JavaScript BOM对象

JavaScript BOM对象

时间:2023-11-18 12:23:15浏览次数:35  
标签:search 浏览器 对象 JavaScript window BOM var data

一、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 进行解码。

标签:search,浏览器,对象,JavaScript,window,BOM,var,data
From: https://www.cnblogs.com/ljygzyblog/p/JavaScript-231118-2.html

相关文章

  • js 的对象之 字符串对象
     javascript中的对象分为3种:自定义对象,内置对象,浏览器对象JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。1.对象Object创建对象var对象名称=newObject();设置对象属性对象名称.属性名=值;设置对象......
  • JavaScript事件
    JavaScript事件键盘事件:keypress键盘事件,keyup抬起,keydown按下文档:load加载表单:focus获得焦点,blur失去焦点,submit提交事件,change改变事件其他:scroll滚动事件,selectstart选择事件1.event事件对象常见的属性和方法e.target返回触发事件的对象标准e.srcElement返......
  • 4.3 Windows驱动开发:监控进程与线程对象操作
    在内核中,可以使用ObRegisterCallbacks这个内核回调函数来实现监控进程和线程对象操作。通过注册一个OB_CALLBACK_REGISTRATION回调结构体,可以指定所需的回调函数和回调的监控类型。这个回调结构体包含了回调函数和监控的对象类型,还有一个Altitude字段,用于指定回调函数的优先级。优......
  • JavaScript事件
    一、  JavaScript事件在前端中,页面的每次交互和特效都是一个事件,其中任何一个html元素都是一个事件源,一个很事件源可以添加多个事件。二、事件中的event对象  只要发生一个事件就会产生一个event事件,event代表事件的状态1、event事件常见的属性和状态2、阻止默认事件的......
  • 11.17 复习JavaScript红宝书的笔记——
    一、原始值与引用值对于原始值和引用值的判断类型各自有对应的操作符,前者可以用typeof操作符lets="Nicholas";letb=true;leti=22;letu;letn=null;leto=newObject();console.log(typeofs);//stringconsole.log(typeofi);//numberconsole......
  • Java面向对象三大特性之多态及综合练习
     1.1多态的形式多态是继封装、继承之后,面向对象的第三大特性。多态是出现在继承或者实现关系中的。多态体现的格式:父类类型变量名=new子类/实现类构造器;变量名.方法名();多态的前提:有继承关系,子类对象是可以赋值给父类类型的变量。例如Animal是一个动物类型,而Cat是一个猫类......
  • JavaScript-键盘事件
    键盘事件的种类键盘事件由用户击打键盘触发,主要有keydown、keypress、keyup三个事件,它们都继承了KeyboardEvent接口。keydown:按下键盘时触发。keypress:按下有值的键时触发,即按下Ctrl、Alt、Shift、Meta这样无值的键,这个事件不会触发。对于有值的键,按下时先触发keydown事件,再触发......
  • 47.类和对象
    类和对象什么是类在面向对象编程中,类(Class)是一种定义现实事物属性和方法的蓝图或模板。类描述了现实事物的特征(属性)和行为(方法)。可以把类看作是创建现实事物的原型。类是现实事物的抽象,它定义了一类具有相似特征和行为的事物的通用结构和行为。类提供了对象所需的状态和行为,并......
  • 48.面向对象概念
    Python面向对象的概念面向过程编程面向过程编程(ProceduralProgramming)是一种基于过程或函数的编程范式。它将程序视为一系列的顺序执行的过程或函数,每个过程或函数完成特定的任务,通过调用其他过程或函数来协同工作。在面向过程编程中,数据和函数(过程)是分离的,函数可以直接访问......
  • javascript 自定义分页组件
    仿boostrap前端分页组件的实现一 写一个前端自定义分页组件,需要考虑以下问题  /*     需要一个<ul id="pagination"></ul>标签   total; // 总数据的数量   pageSize; // 一页显示数量   pageIndex; // 当前页   */ 二实现细节编写html......