JS.DAY12.笔记

Voyager
131 阅读3分钟

一、js的三大组成部分

- ECMAScript + BOM + DOM

  1. BOM:browser object model 浏览器对象模型
  2. DOM:document object model 文档对象模型

- BOM 浏览器对象模型

  1. 每个浏览器窗口都是一个window对象
  2. var window = new window() 在每一次打开一个页面时就默认创建了一个window对象，网页的根对象
  3. 每一个页面不共享window
  4. 每一次创建的全局变量和函数都是属于window对象的属性和方法

- BOM常见属性

navigator 一个对象，系统的构造函数

  1. navigator.userAgent 会详细显示浏览器的版本信息，用于处理兼容问题

location 地址栏

  1. href 整个网址， 获取或设置新的地址
  2. host 域名+端口号
  3. hostname 域名
  4. pathname 路径
  5. port 端口号
  6. protocol 协议 、http 和 https
  7. search 问号后面的一串， 表单提交的数据
  8. hash #号后面的一串，通常指的是锚点
  9. assign() 也是设置新的地址，是一个方法，打开一个新的页面
  10. replace() 替换新的地址---替换了所有的历史记录--不会被历史记录
  11. reload() 刷新页面

history 历史记录

  1. length 在同一个窗口打开过几个页面
  2. forward() 前进
  3. back() 后退
  4. go(1 / -1)可退可进 document 文档 DOM实际上是BOM的一部分

- BOM的常见方法

  1. open() 打开一个新的浏览器窗口 --- 网页重定向（默认会被浏览器拦截）
  2. close() 关闭本窗口 没有参数
  3. 例子
        setTimeout(function(){
            //打开一个新的窗口 --- 网页重定向（默认被拦截了）
            // open("http://www.baidu.com")

            //关闭一个浏览器窗口
            close()
        },2000)

- BOM的事件

  1. load 事件: 等待页面资源加载完毕之后执行
   <script>
        window.onload = function(){
            var oDiv = document.getElementById("a");
            console.log(oDiv);
        }

    </script>
  1. scroll 事件：当页面滚动时触发这个事件 --- 高频率触发事件
        window.onscroll = function(){
            console.log(123);
        }
  1. resize 窗口大小发生改变时触发此事件
        var t;
        window.onresize = function(){
            // 高频率触发事件的解决方式 ---- 加一个延时器
            clearTimeout(t);
            t = setTimeout(function(){
                console.log("窗口发生变化")
                
            },300)
        }
  1. blur事件
        window.onblur = function(){
            console.log("失去焦点");
        }
  1. focus事件
        window.onfocus = function(){
            console.log("获得焦点");
        }

- 移动端的适配

  1. 移动端适配：也就是动态设置根元素的字体大小，然后使用rem做单位
        html{
            /* 1rem = 100px */
            /* rem是相对于根元素变化的单位。 */ 
             /* 移动端适配：也就是动态设置根元素的字体大小，然后使用rem做单位  */
             font-size: calc(100vw / 7.5); 
             }   

        body{
            /* 继承字体大小，不至于一上来字体就很大 */
            font-size: .24rem;
        }

2.淘宝的适配：

        // 移动端适配，淘宝适配，使用注意事项
        //   1 不设置meta 禁止缩放那一段 --- js里面有设置
        //   2 计算 1rem = 75px

- 函数的防抖和节流

  1. onscroll / onresize 是高频率触发事件
  2. 函数会反复的执行，一毫秒之内可能会执行多次，浏览器的性能可能会下降
  3. 函数的防抖和节流用来解决高频率触发事件
  4. 函数防抖(debounce):触发高频事件后n秒内函数只会执行一次，如果n秒之内高频事件再次被触发，则重新计算时间 --- 每次点击就重做
  5. 函数的节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 --- 点击一次，就把事情干完，没干完之前点击没用
         // 函数防抖例子：
        var t;
        window.onscroll = function(){

            clearTimeout(t);
            t = setTimeout(function(){
                console.log(888);

            },300)

        }

     // 函数节流例子：
        // 
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function(){
            oBtn.disable = true;
            var count = 6;
            oBtn.innerHTML = count + "秒之后才能再次点击"
            var t = setInterval(function(){
                count--;
                oBtn.innerHTML = count + "秒之后才能再次点击"
                if(count <= 0){
                    clearInterval(t);
                    oBtn.disable = false;
                    oBtn.innerHTML = "获取验证码"
                }

            },1000)
        }

给多个元素绑定事件

   <p class="a">1</p>
    <p class="a">2</p>
    <p class="a">3</p>
    <p class="a">4</p>


    <script>
        var oPs = document.getElementsByClassName("a")


        // 循环
        for(var i = 0; i< oPs.length;i++){
            oPs[i].onclick = function(){
                // console.log(666);

                // i打印为4，因为循环和绑定事件是同步，函数是异步，同步先执行此时i已经循环结束变为4
                // console.log(i);

                // this 在事件处理函数中使用，代表点击的那个对象
                console.log(this);
            }
        }

    </script>
avatar
文章
阅读
粉丝