js(bom)

最新推荐文章于 2024-07-16 19:07:40 发布

向51致敬

最新推荐文章于 2024-07-16 19:07:40 发布

阅读量168

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/pan_by/article/details/101919024

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

BOM 浏览器对象
在这里插入图片描述
window对象
Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在或每次出现时被自动创建。
在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document。同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Window.alert()。

window对象的属性
在这里插入图片描述

window对象常用方法
alert(‘信息’) ：消息框
prompt(‘提示信息’,默认值)：标准输入框
confirm( ) ：确认框
open( ) ：打开一个新窗口
close( ) ：关闭窗口

<body>
    <input type="button" value="创建新的页面" οnclick="fun1();">
    <input type="button" value="关闭一个窗口" οnclick="fun2();">
    <br>
    系统时间:<span id="myspan"></span>
    <!--
        BOM：浏览器对象
        window对象
     -->
    <script type="text/javascript">
         //提示窗口
         window.alert('提示框');//window可省略
        // 确认框
        var f = window.confirm("确定要这样吗?");
        console.log(f);
        // 输入框
        var v = window.prompt("请输入需要充值的金额",'999999');
        console.log(v);
        // 新建窗口
        function fun1(){
            win = window.open("test-event02.html",'我的百度','width=500px,height=400px');
        }
        function fun2(){
            win.close();
           // window.close();//这是关闭原有的窗口 有些浏览器不允许 此操作
        }
        function fun3(){
            console.log('定时器执行了.......');
        }
        //setTimeout 定时器 执行一次
         window.setTimeout("fun3()",1000);
        // 间隔期  间隔多久执行一次  重复执行
         window.setInterval('fun3()',1000);
        /***
         * 动态时间显示
         * js中 new Date() 获取当前时间
         * 将获取的时间显示到span标签中
         */
        // 找到页面中的span标签
        var myspan = document.getElementById("myspan");
        function setSpanDate(){
            var d = new Date();
            myspan.innerHTML = d.toLocaleString(); // 给标签设置对应的html内容
        }
        window.setInterval("setSpanDate()",1000);
    </script>

编码操作
encodeURI 只对中文编码
encodeURIComponent:中文和特殊符号都会编码

 <script type="text/javascript">
        var url1 = "http://www.aaa.com?name=张三&ange=18&sex=男";
        // 编码
        /**
         * encodeURI 只对中文编码
         * encodeURIComponent:中文和特殊符号都会编码
         * @type {string}
         */
        var url2 = window.encodeURI(url1);
        var url4 = window.encodeURIComponent(url1);
        console.log(url1,url2,url4);
        // 解码
        var url3 = window.decodeURI(url2);
        var url5 = window.decodeURIComponent(url4);
        console.log(url3,url5);
        var a = "100/2+999+2*15";
        // eval 将字符串中的内容作为一个js表达式执行
        console.log(window.eval(a));
    </script>

location：位置对象

<script type="text/javascript">
        function fun1(){
            // 设置地址栏的内容为 http://www.baidu.com
            location.href = "http://www.baidu.com";
        }
        function fun2(){
            location.reload(); // F5 刷新
        }
    </script>
    <input type="button" value="百度" onclick="fun1()">
    <input type="button" value="刷新" onclick="fun2()">

document 对象
getElementById：
getElementsByName：
getElementsByTagName：
close：
open:
write:
writeln:

<body>

    <div style="border: 1px red solid;width: 200px; height: 200px;" id="mydiv1">
    </div>
    <p>

    </p>
    <p>

    </p>
    <span name="span1">
    </span><br>
    <span class="span2">
    </span>
    <script type="text/javascript">
        // navigator:浏览器属性信息 元数据 
        //console.log(navigator.appCodeName,navigator.appName,navigator.appVersion,navigator.language,navigator.mimeTypes)
       //screen 浏览器屏幕的相关信息
	   // console.log(screen.height,screen.width,screen.colorDepth,screen.pixelDepth,screen.availWidth,screen.availHeight);
        /**
         * document:
         *     getElementById:根据id查找标签  单个对象
         *     getElementsByTagName:根据标签名称查找  获取一个数据对象
         *     getElementsByName:根据name属性查找 获取一个数据对象
         *     getElementsByClassName:根据class属性查找 获取一个数组对象
         */
        var mydiv = window.document.getElementById("mydiv1");
        mydiv.innerHTML = '<b>我是div！！！</b>';
        var p = document.getElementsByTagName("p");
        for(var i = 0 ; i < p.length ; i ++){
            p[i].innerHTML = 'p'+i;
        }
        var span1 = document.getElementsByName("span1");
        for(var i = 0 ; i < span1.length;i++){
            span1[i].innerHTML = 'span-----';
        }
        var span2 = document.getElementsByClassName("span2");
        for(var i = 0 ; i < span2.length;i++){
            span2[i].innerHTML = 'span--22222---';
        }
        document.write("七夕快乐");
    </script>
</body>