7.22JS深入

学习内容：

一、DOM重点核心

   关于dom操作，我们主要针对元素的操作，主要有创建，增删改查属性操作，事件操作

（1）创建      document.write

                      innnerHTML

                     createElement

（2）增        appendChild

                     insertBefore

（3）删        removeChild

（4）改       修改元素的属性：src，href，title

                    修改普通元素内容：innerHTML，innerText

                    修改表单元素：value，type，disable

                    修改元素样式 ：style,className

（5）查       H5的新方法：querySelector，querySelectorAll

                     利用节点操作获取元素    父（parentNode），子（children），

                                    兄（previousElementSibling、nextElementSibling）

（6）属性操作：setAttribute:设置dom的属性值

                           getAttribute:得到dom的属性值

                           removeAttribute:移除属性

（7）事件操作

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

二、事件的注册和删除

 1.注册事件   

  （1）传统注册方式只能设置一个处理函数，最后注册的函数会将覆盖前面的处理函数

           btn.οnclick=function(){}

  （2）方法监听注册方式

           addEventListener(type,listener,useCapture)

          1> type是事物类型字符串比如click，mouseover

          2>listener 事物处理函数 事件发生时，会调用该监听函数

          3>useCapture 可选参数，是一个布尔值，默认false

          4>可以添加多个处理程序

2.删除事件

  （1）传统方式删除事件

               div[1].οnclick=none;

   （2）方法监听注册方式

               div[0].removeEventListener(type,listener,useCapture)

三、事件对象及其属性

     （1）注册事件    function(e){}          e为事件对象

     （2）属性

属性方法	说明
e.target	返回触发事件的对象        标准
e.srcElement	返回触发事件的对象    非标准 ie678使用
e.type	返回事件的类型 比如click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准ie678使用
e.stopPropagation()	阻止冒泡   标准
e.returnValue	该属性 阻止默认事件（默认行为）非标准 ie678使用，比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为） 标准 比如不让链接跳转

         区别一下：1>     e.target点击了哪个元素就返回哪个元素

                           2>      this绑定了哪个元素就返回哪个元素

四、常见的鼠标事件

（1）禁止鼠标右键菜单        contextmenu

                document.addEventListener(‘contextmaun’,function(e){

                                  e.preventDefault();

                    })

（2）禁止选中行为             selectstart

               document.addEventListener(‘selectstart’，function(e){

                                e.preventDefault();

                         })

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

 五、常见的键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被松下时触发
onkeypress	某个键盘按键被松开时触发 但是他不识别功能键比如ctrl shift等

                  keyCode可以通过ASCLL码识别键盘

           

 六、事件委托

      1、事件委托的原理

          不是每一个子节点都单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

        例如，给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

       2、事件委托的作用：只操作了一次DOM ,提高了程序的性能。

七、BOM

   1、BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象

             BOM顶级对象是windows

   2、窗口加载事件           当文档内容完全加载完成会触发该事件

        windows.οnlοad=function(){}   或者    windows.addEventListener(‘load’,function(){})

    （1）windows.onload传统注册事件方式只能写一次，如果有多个会以最后一个为准

    （2）如果使用 addEventListener则没有限制

  3、调整窗口大小事件

        resize（）

        innerWidth()当前页面的大小

4、计时器

（1）setTimeout        时间到了就去调用 只调用一次

                                  单位是毫秒，如果省略默认为0

          setTimeout(function(){

                             console.log(‘时间到了’)

                     }，2000)；

（2）callback回调函数

       clearTimeout（定时器的标识符） 清除定时器

      setInterval(调用函数，延时时间) 就是间隔多久调用一次

     clearInterval清除这个定时器

八、location对象

    1、JS 是一个单线程语言，同一时间只能做一件事  同步和异步

       location对象就是指网址

   2、 URL一般语法为

        protocol://host[:portl]/path/[?query]#fragment

        http://www.itcast.cn/index.html?name=andy$age=18#link

组成	说明
proocol	通信协议  常用的http,ftp,maito等
host	主机（域名）www.itcheima.com
port	端口号   可选，省略时使用方案的默认接口 如http的默认端口为80
path	路径 由零或多个’/‘符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query	参数 以键值对的形式通过&符号分隔开来
fragment	片段 #后面内容常见于链接锚点

3、location对象属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.itheima.com
location.port	返回端口号 如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容 常见于链接 锚点

---

 学习产出：

1、点击按键更换图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id='yellow'>yellow</button>
    <button id='pink'>pink</button>
    <button id='green'>green</button>
    <button id='purple'>purple</button>
    <button id='blue'>blue</button><br>
    <img src="bj1.jpg" alt='' title=''>
    <!-- 1，获取元素 -->
    <script>
        var yellow = document.getElementById('yellow');
        var pink = document.getElementById('pink');
        var green = document.getElementById('green');
        var purple = document.getElementById('purple');
        var blue = document.getElementById('blue');
        var img = document.querySelector('img');
        // 2.处理程序
        yellow.onclick = function () {
            img.src = 'bj1.jpg';
            img.title = 'yellow';
        }
        pink.onclick = function () {
            img.src = 'bj2.jpg';
            img.title = 'pink';
        }
        green.onclick = function () {
            img.src = 'bj3.jpg';
            img.title = 'green';
        }
        purple.onclick = function () {
            img.src = 'bj4.jpg';
            img.title = 'purple';
        }
        blue.onclick = function () {
            img.src = 'bj5.jpg';
            img.title = 'blue';
        }
    </script>
</body>

<html>

2、计时器效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: #ccc;
            background-color: rgb(19, 17, 17);
            width: 50px;
            height: 50px;
            font-size: 50px;
            font-weight: 100;
            font-family: "Microsoft Yhei";
        }
    </style>
</head>

<body>
    <div>
        <span class='hour'>11</span>
        <span class='min'>22</span>
        <span class='sec'>33</span>
    </div>
    <script>
        // 1.获取元素
        var hour = document.querySelector('.hour');//获取小时元素
        var min = document.querySelector('.min');//获取分钟元素
        var sec = document.querySelector('.sec');//获取秒元素
        var inputTime = +new Date('2021-7-22 17:30:00');//返回的是用户输入时间的总毫秒数
        countDown();//先调用一次这个函数，防止第一次刷新页面有空白
        //   2.开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();//返回的是当前时间总的毫秒数

            var times = (inputTime - nowTime) / 1000;
            var hours = parseInt(times / 60 / 60 % 24);//计算小时数
            hours = hours < 10 ? "0" + hours : hours;
            hour.innerHTML = hours;
            var minu = parseInt(times / 60 % 60);//计算分钟数
            minu = minu < 10 ? "0" + minu : minu;
            min.innerHTML = minu;
            var second = parseInt(times % 60);//秒
            second = second < 10 ? "0" + second : second;
            sec.innerHTML = second;
        }
        console.log(countDown());

    </script>
</body>

</html>