js操作BOM

四种打开窗口方式

        //window.open(url, target);
        //window.close();

        //在当前窗口打开，可后退
        //原理：自动使用当前窗口的name
        HTML:<a href="url" target="_self"></a>
        js:open(url, '_self');

        //在当前窗口打开，禁止后退
        //原理：用新url替换当前history中的url
        js:location.replace(新url);

        //在新窗口打开，可打开多个
        //原理：不指定窗口名，每打开一个窗口，浏览器会自动随机生成内部窗口名
        HTML:<a href="url" target="_blank"></a>
        js:open(url, '_blank');

        //在新窗口打开，只能打开一个
        //原理：自定义窗口名，这个名字在内存中只能出现一次，一个名字对应一个窗口，后来打开的会覆盖先打开的窗口
        HTML:<a href="url" target="自定义窗口名"></a>
        js:open(url, '自定义窗口名');

---

history三种操作：前进、后退、刷新

        //前进：history.go(1);
        //后退：history.go(-1);history.go(-2);
        //刷新：history.go(0);

---

location

        //location属性
        //.href:获取或设置完整的url地址
        //.protocol:协议
        //.host:主机名+端口号
        //.hostname:主机名
        //.port:端口号
        //.pathname:相对路径
        //.search:查询字符串参数
        //.hash:锚点地址

        //location方法
        //在当前窗口打开，可后退
            //location = url;
        //在当前窗口打开，禁止后退
            //location.replace(新url);
        //刷新
            //优先从缓存中获取资源，若缓存中没有或过期，才从服务器获取资源
            //F5
            //history.go(0);
            //location.reload();

            //无论缓存中有没有资源，都强制从服务器获取资源
            //location.reload(true);

---

定时器

            //周期性定时器
                //1.定义任务函数：变化一次的函数
                //function task(){...}
                //2.将任务函数放入定时器中反复执行
                //等待相应的ms数后，开始调用task，依次循环执行
                //let timer = setInterval(task, ms);
                //timer为当前定时器唯一的序号，专门用于停止定时器
                //3.停止定时器
                //clearInterval(timer);timer = null;
                    //3.1定时器自动停止
                    //在task中设置临界值，达到临界值，停止定时器
                    //3.1手动停止定时器
                    //通过触发事件，停止定时器

            //一次性定时器
                //let timer = setTimeout(task, ms);
                //clearTimeout(timer);
                //在task执行前，停止等待，不再执行任务

---

navigator对象

            //1.判断是否启用cookie
                let bool = navigator.cookieEnabled;
                cookie是客户端持久存储用户私密信息的小文件
            //2.判断是否安装插件
                navigator.plugins['插件名'] !== undefined
            //3.判断当前浏览器名称和版本号
                navigator.userAgent

---

event

            概念：用户手动触发的、或浏览器自动触发的页面状态的改变

            绑定事件处理函数：
            1.在HTML中绑定事件处理函数(几乎废掉，不符合内容与行为分离的原则)
                <ANY ...on 事件名="js语句"...>
            2.在js中，用赋值方式绑定
                ANY.on 事件名=function(){
                    this->ANY 当前触发事件的.前的元素
                }
                赋值是替换原函数，每个事件只能绑定一个处理函数
            3.在js中，为元素添加事件监听对象
                ANY.addEventListener('事件名', handler)
                一个事件，可同时添加多个处理函数，可随时添加和移除
                ANY.removeEventListener('事件名', 原handler)
                如果一个处理函数可能被移除，则绑定时，就必须用有名的函数，不能用匿名函数

        事件模型
            当事件发生时，浏览器触发事件的过程
            DOM标准认为，点在内层元素上，也等效于点在外层元素上了
            3个阶段：
                1.由外向内捕获各级父元素绑定的处理函数
                    捕获阶段，只记录处理函数，不执行
                2.目标触发
                    目标触发，最初实际触发事件的元素
                    优先触发目标元素上的处理函数
                3.冒泡
                    由内向外，按捕获阶段顺序的反向，依次触发父元素上的处理函数

        事件对象：e
            事件发生时，自动创建的记录事件信息的对象
                创建：自动创建
                获取：事件对象e总是作为处理函数的第一个参数，自动传入
            取消冒泡：
                e.stopPropagation()
            利用冒泡：
                只要多个平级子元素，要绑定相同事件时
                只要在父元素上绑定一次处理函数，所有子元素自动共用
                难点：
                    1.获取目标元素
                        错误：this->父元素
                        正确：e.target->记录了最初触发事件的函数，且不随冒泡而改变
                    2.鉴别e.target是否是想要的
            阻值默认事件行为：
                e.preventDefault()
                1.<a href="#xxx"
                    默认：跳到锚点，在url结尾增加#xxx
                2.阻止表单自动提交
                    自定义表单提交：
                        1.<input type="button" js:form.submit()
                        2.<input type="submit"
                            =>form.onsubmit():e.preventDefault()
                3.HTML5中做拖拽效果时，必须阻止浏览器默认的拖拽行为

转载于:https://www.cnblogs.com/debug/p/11261354.html