第二周第五天笔记

134 阅读4分钟

一、BOM

    Browser Object Model - 浏览器对象模型:专门用于操作浏览器的,但是它使用的不多,远不如ES和DOM,浏览器很多操作都是自带的,而且BOM没有标准,
    各个浏览器都有自己的定义,但是大部分浏览器的都是一致规范的,除了老IE(8-)

二、window对象:扮演着两个角色:

    1、全局对象:保存着全局变量和全局函数
    2、指代当前窗口本身:

1.属性:

    1、获取浏览器的完整大小:outerWidth/outerHeight
    2、*获取浏览器的文档显示区域的大小:innerWidth/innerHeight - 获取每台电脑的浏览器的文档显示区的大小
    3、获取屏幕的完整大小:跟window没关系:screen.width/height; - 我们目前学习的都是浏览器应用(网页),并不会去做桌面应用

2.方法

(1)*打开链接的新方式:
    1、当前窗口打开,可以后退:
            HTML:<a href="url">内容</a>
                   JSopen("url","_self");

    2、当前窗口打开,禁止后退:使用场景:比如电商网站,结账后不允许后退
            HTML做不到了,只有JS可以,也不是window能做到的,而是另外一个人:
            history:当前【窗口的历史记录】,他其实可以做的事儿就是前进后退
            location:当前【窗口正在打开的url】,有一个APIlocation.replace("新url");//叫做替换,不叫做跳转,不会产生历史记录,自然也不能后退了,但是网址替换了,网页必然会发生变化

    3、新窗口打开,可以打开多个
            HTML:<a href="url" target="_blank">内容</a>
                   JSopen("url","_blank");

    4、新窗口打开,只能打开一个:使用场景:比如电商网站,只允许用户打开一个结账页面
            HTML:<a href="url" target="自定义一个name">内容</a>
                   JSopen("url","自定义一个name");

         其实窗口的底层都是有一个名字的,如果打开了一个已经开着的名字的窗口的,他会把他关闭掉,再次打开

    学完这块,我们知道了两个点:
            1、以后的跳转,任何标签都可以
            2、提升用户的体验感
            3a标签的其他用途:
                1、跳转
                2、锚点
                3、下载按钮:<a href="xx.exe/rar/zip/7z">下载</a>
                4、打开图片和txt文档:<a href="xx.png/jpg/jpeg/gif/txt">打开图片和txt</a>
                5、直接书写js-不需要绑定点击事件:<a href="javascript:js代码;">打开图片和txt</a>
(2)打开新窗口/新链接:
    newW=open("url","target","width=?,height=?,left=?,top=?");
    特殊:1、如果没有加第三个参数,那么窗口会和浏览器融为一体
          2、如果你加了第三个参数,那么窗口会脱离浏览器独立存在
(3)关闭窗口:
    window/newW.close();
(4)改变新窗口的大小:
    newW.resizeTo(新宽,新高);
(5)改变新窗口的位置:
    newW.moveTo(新X,新Y);
(6)*window提供了三个框:
    警告框:alert("警告文字");
    输入框:var user=prompt("提示文字");
    确认框:var bool=confirm("提示文字");
(7)*****定时器也是window的
(8)事件:
    1window.onload事件 - load - 加载:等待其他所有的资源加载完毕后才会执行的代码,放在里面的代码其实要最后才会执行
    2、*window.onresize事件 - 窗口如果大小发生了变化,就会触发,搭配上判断innerWidth可以理解为是js版本的css媒体查询
    3、***window.onscroll事件 - 滚动事件,一旦滚动就会触发
            1、获取滚动条当前的位置:window.scrollY
            2、获取元素距离页面顶部有多远:elem.offsetTop/offsetLeft
(9)*****本地/客户端存储技术:
    cookie:淘汰了,存储的大小只有2kb,而且操作极其麻烦,尤其要到处切割,只能最多保存30天
    webStorage:H5带来了一个新特性,存储的大小有8mb,永久保存,而且非常简单
            分类2种:
            1、sessionStorage - 会话级,只要浏览器一旦关闭,数据就会死亡了
            2、localStorage - 本地即,只要你不清空,就会永久存在
            两者的用法是一模一样的,不用创建,直接可用
            操作:

            1、添加:xxxStorage.属性名="属性值";
            2、读取:xxxStorage.属性名;
            3、删除:xxxStorage.removeItem("属性名");
            4、清空:xxxStorage.clear();

扩展:

    1、提交事件:绑定在form表单上,提交的一瞬间就会触发,想要阻止提交:return false
    2、判断多选框有没有被选中:多选框.checked -> true|false
    3、日期对象.getTime() 得到的是这个时间的毫秒数