加载事件
元素大小和位置
屏幕大小改变事件
swiper 第三方的插件
window对象

加载事件

只是加载标签而已很快 DOMContentLoaded 快

会去加载标签对应的视频比较慢 load 慢

1、load

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么要学？

有些时候需要等页面资源全部处理完了做一些事情

老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
事件名：load
监听页面所有资源加载完毕：

给 window 添加 load 事件
写代码的时候，我们会把所有的代码都写在 window load事件中来确保资源全部都可以使用

//页面加载事件
window.addEventListener('load', function(){
    //执行的操作
})

//例子：
window.addEventListener('load', function () {
    console.log('load 标签加载完毕-标签对应外部资源加载完毕');
});

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

2、DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载 (页面的标签都加载完毕就触发了，不需要等待标签的内容回来)
事件名：DOMContentLoaded
监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件

//语法
document.addEventListener('DOMMontentLoaded', function(){
    //执行的操作
})

//例子
document.addEventListener("DOMContentLoaded",function () {
     console.log("DOMContentLoaded 标签加载完毕就触发了");
})

元素大小和位置

1、scroll家族

小细节

PC端的滚动条大小 17px
移动端的滚动条不占大小
页面滚动使用 window.addEventListener("scroll") 事件
页面的滚动距离 document.documentElement.scrollTop

①获取宽高：

获取元素的内容总宽高（不包含滚动条）返回值不带单位
scrollWidth和scrollHeight

scrollWidth 不包含滚动条大小，等于容器可以滚动的大小，整个可以滚动的区间的宽度

scrollHeight 不包含滚动条大小，等于容器可以滚动的大小，整个可以滚动的区域的高度

②获取位置:

获取元素内容往左、往上滚出去看不到的距离
scrollLeft和scrollTop

获取当前容器的滚动距离
这两个属性是可以修改的

③语法

<script>
      const scrollDom = document.querySelector('.scroll-dom');
      // 输出它宽度
      console.log(scrollDom.scrollWidth);
	  // 输出它宽度
      console.log(scrollDom.scrollHeight);

      // 获取当前容器滚动了的距离
      scrollDom.addEventListener('scroll', function () {
         console.log(this.scrollTop);// 获取当前容器的滚动距离
        console.log(this.scrollLeft); // 获取当前容器的滚动距离
      });
    </script>

2、offset家族

①获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth 获取元素的宽度包含这滚动条
offsetHeight 获取元素的高度包含这滚动条

②获取位置：

获取元素距离自己定位父级元素的左、上距离
offsetLeft 获取定位了的父元素的水平距离左
offsetTop 获取定位了的父元素的垂直距离上

③语法：

<script>
      const offsetDom = document.querySelector('.offset');

      // 获取宽度和高度 包含这滚动条的大小 
      console.log(offsetDom.offsetWidth);// 300 
      console.log(offsetDom.offsetHeight);// 300

      // 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
      console.log(offsetDom.offsetLeft);
      console.log(offsetDom.offsetTop);
    </script>

3、client家族

①获取宽高：

获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight

②获取位置：

获取左边框和上边框宽度
clientLeft和clientTop 注意是只读属性

③语法

<script>
      const clientDom = document.querySelector('.client');
      // 宽度和高度
      console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
      console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）

      // 获取边框的大小
      console.log(clientDom.clientLeft); // 左边框
      console.log(clientDom.clientRight); // clientRight、clientBottom不存在，输出undefined！
      console.log(clientDom.clientTop); // 上边框  

    </script>

4、scroll、offset、clien 的区别

scrollWidth 获取容器的宽度（包含滚动的区域） offsetWidth 获取可视区域的宽度（包含滚动条） clientWidth 获取可视区域的宽度（不包含滚动条）

scrollLeft 获取左侧滚动的距离 offsetLeft 获取和已经定位了的父级元素的左距离 clientLeft 获取左边框的大小

屏幕大小改变事件 resize （window ）

会在窗口尺寸改变的时候触发事件：

 <script>
      // 页面大小发生变化了就会触发的事件 resize window来绑定
      window.addEventListener('resize', function (event) {
        console.log('页面大小发生变化了');
        // 移动端屏幕适配 rem   淘宝js库，flexible.js  作用  设置html的字体大小 为当前页面的宽度的十分之一
        // 获取当前页面的宽度
        console.log(document.body.offsetWidth);
        // 设置页面html标签的字体大小为屏幕的十分之一
        document.documentElement.style.fontSize =
          document.body.offsetWidth / 10 + 'px';

        // 响应式布局的时候  发一个js文件  方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
        const width = document.body.offsetWidth;

        if (width > 1200) {
          document.querySelector('title').innerText = `大屏幕 ${width}`;
        } else if (width > 992) {
          document.querySelector('title').innerText = `中等屏幕 ${width}`;
        } else if (width > 768) {
          document.querySelector('title').innerText = `小屏幕 ${width}`;
        } else {
          document.querySelector('title').innerText = `极小屏幕 ${width}`;
        }
      });
    </script>

swiper 第三方的插件

会根据文档或者教程来使用它即可-查询字典来使用！！

<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <script src="./swiper-bundle.min.js"></script>
    <script>
        const mySwiper = new Swiper('.swiper', {
            //   direction: 'vertical', // 垂直切换选项,默认为水平
            loop: true, // 循环模式选项
            autoplay: true,//自动轮播

            //轮播切换的样式
            effect: 'coverflow',
            slidesPerView: 3,
            centeredSlides: true,
            coverflowEffect: {
                rotate: 30,
                stretch: 10,
                depth: 60,
                modifier: 2,
                slideShadows: true   
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        })        
    </script>
</body>

window对象

1、BOM对象

BOM(Browser Object Model ) 是浏览器对象模型

window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window

2、定时器-延时函数

JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout
语法：

setTimeout(回调函数, 等待的毫秒数)

setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window
清除延时函数：

let timer = setTimeout(回调函数, 等待的毫秒数)
clearTimeout(timer)

3、递归

对于初学者来说高级编程技巧
代码不多，思路绕（初学者都会在这个上面采坑花费很多时间才可以掌握！！！）
使用递归函数实现延时器来做定时器

 <script>
      // 定时器 不主动清除，定时器永远执行下去
      // 延时器 只会执行一次

      // 延时器实现定时器的功能
      // 在延时器 又开启一个延时器，

      // 递归 自己调用自己  函数自己调用自己 
      let index=0;
      function func() {
        console.log(++index);
        setTimeout(func,1000);//函数自己调用自己 
      };
      func();
    </script>

4、两种定时器对比：

setInterval 的特征是重复执行，首次执行会延时
setTimeout 的特征是延时执行，只执行 1 次
setTimeout 结合递归函数，能模拟 setInterval 重复执行
clearTimeout 清除由 setTimeout 创建的定时任务
创建的定时器应该由clearInterval来清除
创建的延迟器应该由clrearTimeout来清除

5、location对象

①location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分

②常用属性和方法：

href 属性

href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
location.href 也可以实现刷新 location.href = location.href;

	<button>跳转</button>
    <script>
      // 1 使用a标签 href 属性 可以实现页面跳转
      // 2 在js中，也可以直接跳转  location.href 来跳转
      // 3 location.href 也可以实现刷新 location.href = location.href;
  
        const button = document.querySelector('botton');
        button.addEventListener('click', function(){
            //跳转百度
            location.href = "http://www.baidu.com";//可以通过js方式跳转到目标地址
            console.log(location.href); //可以得到当前文件URL地址

            //刷新功能
            location.href = location.href;
        });
        setTimeout(function(){
            // location.href = "http://www.baidu.com";//延时跳转
        },5000)

    </script>

reload属性

reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

	<button>跳转</button>
    <script>
      // location.reload(true);// true 强制刷新！
        const button = document.querySelector('botton');
        button.addEventListener('click', function(){
            
            //reload 实现刷新
            location.reload(true); //ture 强制刷新！
        });
    </script>

search 属性

search 属性获取地址中携带的参数，符号？后面部分 (后一个阶段就会用到它)

<button>跳转</button>
    <script>
      // location.search 后一个阶段就会用到它 了  获取 url上 ？ 后面一串字符  /17-location.html?a=1&b=2
        const button = document.querySelector('botton');
        button.addEventListener('click', function(){
            console.log(location.search);
        });
    </script>

hash 属性

hash 属性获取地址中的啥希值，符号 # 后面部分

(后期vue路由的铺垫，经常用于不刷新页面，显示不同页面，比如网易云音乐)

<button>跳转</button>
    <script>
      // hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index  #/index
        const button = document.querySelector('botton');
        button.addEventListener('click', function(){
            console.log(location.hash);
        });
    </script>

navigator对象

① navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息

②常用属性和方法：

通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {
    const userAgent = navigator.userAgent
    // 验证是否为Android或iPhone
    const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
    const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
    // 如果是Android或iPhone，则跳转至移动站点
    if (android || iphone) {
        location.href = 'http://m.itcast.cn'
     }
     })()

histroy对象

①history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

②常用属性和方法：

history对象方法	作用
back()	后退功能
forward()	前进功能
go(参数)	前进、后退功能，参数如果是2，前进两个页面，如果是（-1）后退一个页面

<body>
    <a href="http://www.baidu.com">跳转</a>
    <button class="forward">前进</button>
    <button class="back">后退</button>
    <script>
const forward = document.querySelector('.forward')
forward.addEventListener('click', function(){
    // history.forward();
    history.go(1);//前进一个记录
});
const back = document.querySelector('.back')
back.addEventListener('click', function(){
    // history.back();
    history.go(-1);//后退一个记录
});
    </script>
</body>

webApi第八天

加载事件

1、load

2、DOMContentLoaded

元素大小和位置

1、scroll家族

①获取宽高：

②获取位置:

③语法

2、offset家族

①获取宽高：

②获取位置：

③语法：

3、client家族

①获取宽高：

②获取位置：

③语法

4、scroll、offset、clien 的区别

屏幕大小改变事件 resize （window ）

swiper 第三方的插件

window对象

1、BOM对象

2、定时器-延时函数

3、递归

4、两种定时器对比：

5、location对象

href 属性

reload属性

search 属性

hash 属性

navigator对象

histroy对象