怎么样快速学会一首歌曲,怎么样快速学会蛙泳-CSDN博客

<!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>
    <div id='time'>2023-5-1</div>
    <>
        // (1)通过id获取
        //返回的是Element对象(对象的类型是object)
       var timer=document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);
    </>
</body>
</html>

2.DOM获取元素（标签名获取）

<!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>
    <ul>
        <li>小伦1</li>
        <li>小伦2</li>
        <li>小伦3</li>
        <li>小伦4</li>
        <li>小伦5</li>
    </ul>
    <>
        //(2)通过标签名获取
        //返回的是获取过来元素对象的集合 以伪数组的形式存储
        var lis=document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);//小伦1
        //打印里面元素对象_遍历
        for (var i=0;i<=lis.length;i++ ){
            console.log(lis[i]);
        }
    </>
</body>
</html>

3.DOM获取元素（html5）

<!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>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <>
        //（3）通过HTML5获取
        //1.通过getElementByClassName获取
        var boxs=document.getElementsByClassName('box');
        console.log(boxs);
        //2.通过querySelector获取 返回指定选择器的第一个元素对象 class用. id用#
        var firstBox=document.querySelector('.box');
        console.log(firstBox);
        var nav=document.querySelector('#nav');
        var li=document.querySelector('li');
        console.log(li);
        //3.querySelectorAll()返回指定选择器的所有元素对象集合
        var allbox=document.querySelectorAll('.box');
        console.log(allbox);
    </>
</body>
</html>

4.DOM获取元素（特殊获取）

<!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>
    <>
    //（4）特殊元素获取
    //1.获取body元素
        var bodyEle=document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html元素
        var htmlEle=document.documentElement;
        console.log(htmlEle);
    </>
</body>
</html>

5..事件基础

简单理解：触发——响应机制，网页中的每个元素都可以产生某些可以触发JavaScript的事件GPT改写。

（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="btn">小伦</button>
    <>
        //点击一个按钮,弹出对话框
        // 事件是有三部分组成的 事件源 事件类型 事件处理程序
        // (1)事件源 事件被触发的对象 按钮
    var btn_on=document.getElementById('btn');
    // (2)事件类型 如何触发 什么事件 比如鼠标点击(onclick)
    // (3)事件处理程序 通过一个函数赋值的方式完成
    btn_on.onclick=function(){
        alert('小罗');
    }
    </>
</body>
</html>

6.执行事件步骤

<!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>
    <div>123</div>
    <>
        // 1.获取事件源
        var div=document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick
        // 3.添加事件处理程序
        div.onclick=function() {
            console.log('我被选中了');
        }

    </>
</body>
</html>

7.操作元素

<!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>
        div,p{
            width: 300px;
            height: 50px;
            line-height: 20px;
            color: rgba(255, 255, 255, 0);
            background-color: blueviolet;
               }
    </style>
</head>
<body>
    <button>显示当前时间；</button>
    <div>shijain</div>
    <p>111</p>
    <>
        // 当我们点击了按钮，div里面的文字会发生变化
        // 1.获取元素
        var btn=document.querySelector('button');
        var div=document.querySelector('div');
        // 2.注册事件
        btn.onclick=function(){
            // div.innerText='2023年';
            div.innerText=getDate();
        }
        function getDate(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var dates=date.getDate();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day=date.getDay();
            return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
        }
        // 这个是直接显示
        var p=document.querySelector('p');
        p.innerText=getDate();
    </>
</body>
</html>

8.操作元素innerText和innerHTML

<!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>
    
    <div></div>
    <p>
        我是文字
        <span>123</span>
    </p>
    <>
        // innnerText和innerHTML的区别
        // 1.innerText 不识别html标签
        var div=document.querySelector('div');
        div.innerText='<strong>hello<strong>';
        // div.innerHTML='<strong>hello<strong>';
        //这两个属性是可读写的 可以获取元素里面的内容
        var p=document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);

    </>
</body>
</html>

9.操作元素_修改元素属性

<!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='zzx'>猪猪侠</button>
    <button id='crq'>超人强</button>
    <img src="images/zzx.png" alt="">
    <>
        var zzx=document.getElementById('zzx');
        var crq=document.getElementById('crq');
        var img=document.querySelector('img');
        zzx.onclick=function(){
            img.src='images/zzx.png';
            img.title='猪猪侠';
        }      
        crq.onclick=function(){

            img.src='images/crq.png';
            img.title='超人强';
        }
    </>
</body>
</html>

10.分时间问候案例

<!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>
    <img src="images/s.gif" alt="">
    <div></div>
    <>
        // 1.获取元素
        var img=document.querySelector('img');
        var div=document.querySelector('div');
        // 2，得到当前的小时数
        var date=new Date();
        var h=date.getHours();
        if(h<12){
            img.src='images/早上好.gif';
            div.innerHTML='早上好';
        }
        if(h>12 && h<18){
            img.src='images/下午好.gif';
            div.innerHTML='下午好';
        }
        if(h>18){
            img.src='images/晚上好.gif';
            div.innerHTML='晚上好';
        }
    </>
</body>
</html>

11.操作元素表单属性

利用DOM可以操作如下表单元素的属性：type,value,checked,selected,disabled

<!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>按钮</button>
    <input type="text" value="输入内容">
    <>
        var btn=document.querySelector('button');
        var input=document.querySelector('input');
        btn.onclick=function(){
            input.value='被点击啦';
            //btn.disabled=true;//不能再被点击
            this.disabled=true;//和btn.disabled=true;作用一样
        }
    </>
</body>
</html>

12.模仿京东显示密码

<!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>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            /* 居中显示 */
        }

        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position: absolute;
            width: 24px;
            top: 10px;
            right:2px;
        }
    </style>
</head>
<body>
    <div class="box">
        <label for="">
            <img src="images/不显示眼睛.jpg" alt="" id="eye">
        </label>
        <input type="password" name="" id="pwd">
        <>
            // 1.获取元素
            var eye=document.getElementById('eye');
            var pwd=document.getElementById('pwd');
            // 2.注册事件 处理程序
            var flag=0;
            eye.onclick=function(){
                if(flag==0){
                    pwd.type='text';
                    flag=1;
                    img.src='images/显示眼睛.jpg';
                }else{
                    pwd.type='password';
                    flag=0;
                    img.src='images/不显示眼睛.jpg';
                }
                    
            }
        </>
    </div>
</body>
</html>

13.样式属性操作

1.element.style 行内样式操作

2.element.style 类名样式操作

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
    <>
        var div=document.querySelector('div');
        div.onclick=function(){
            this.style.backgroundColor='pink';
            this.style.width='200px';
        }
    </>
</body>
</html>

14.关闭二维码案例

<!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>
        .box{
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }
        .box img{
            width: 60px;
            margin-top: 5px;
        }

        .close-btn{
            position: absolute;
            top:-1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px border #ccc;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        关闭猪猪侠图片
        <img src="images/zzx.png" alt="">
        <i class="close-btn">x</i>
        <>
            var btn=document.querySelector('.close-btn');
            var box=document.querySelector('.box');
            btn.onclick=function(){
                box.style.display='none';
            }
        </>

    </div>
</body>
</html>

15.循环精灵图

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 初始化页面 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 取消列表中的小点点 */
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <>
        // 打开这张图片的原图可以看到这张图片的原图第一个图的坐标是0，0,第二张图的坐标是0,-44
        // 1. 获取元素 所有的小li 
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            // 让索引号 乘以 44 就是每个li 的背景y坐标  index就是我们的y坐标
            var index = i * 44;
            // backgroundPosition代表的是图片的坐标
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </>
</body>

</html>

16.显示隐藏文本框内容

1.获得焦点onfocus

2.失去焦点onblur

<!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>
        input{
            color: #ccc;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <>
        // 1.获取元素
        var text=document.querySelector('input');
        // 点击input里面就会获得焦点
        text.onfocus=function(){
            console.log('获得焦点');
            // 就是说这一步：默认的本来就是手机，如果你不想要手机，就会清空掉
            if(this.value=='手机'){
                this.value='';
            }
            // 输入的时候变成黑色
            this.style.color= '#333';
        }
        // 点击input外面的就失去焦点
        text.onblur=function(){
            console.log('失去焦点');
            if(this.value==''){
                this.value='手机';
            }
            // 就是本来已经输入内容了，但是鼠标点击到外面，里面输入的内容变回灰色
            this.style.color='#ccc';
        }
    </>
</body>
</html>

17.邮箱注册提示


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    <>
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        // 1.获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //2. 注册事件 失去焦点
        ipt.onblur = function() {
            // 根据表单里面值的长度 ipt.value.length
            if (this.value.length < 6 || this.value.length > 16) {
                // console.log('错误');
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对要求6~16位';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </>
</body>

</html>

18.开关灯

<!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>开关灯</button>
    <>
        var btn=document.querySelector('button');
        var flag=0;
        btn.onclick=function(){
            if(flag=='0'){
                document.body.style.backgroundColor='black';
                flag=1;
            }else{
                document.body.style.backgroundColor='#fff';
                flag=0;
            }   
        }
    </>
</body>
</html>

19.更换皮肤

<!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>
      /* 首先写css的思路是：一层一层看 由大到小 */

      /* 1.全局初始化 */
      *{
          margin: 0;
          padding: 0;
      }
      /* 刚开始的背景是默认背景1 */
      body{
          background: url(images/1.jpg) no-repeat center top;
      }
      /* 不要那个默认的小圆圈 */
      li{
          list-style: none;
      }
      .baidu{
        /* 给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 */
          overflow: hidden;
          /* 外边距 */
          margin: 100px auto;
          background-color: #fff;
          width: 410px;
          /* 内边距 */
          padding-top: 3px;
      }
      .baidu li{
          float: left;
          margin: 0 1px;
          cursor: pointer;
      }
      .baidu img{
          width: 100px;
      }
    </style>
</head>
<body>
    <ul class="baidu">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
    <>
        // 获取元素 先找到ul(这一步就是告诉大家我要找类名叫baidu的ul，下面的img)
        var imgs=document.querySelector('.baidu').querySelectorAll('img');
        // 利用for循环依次为我们的图片注册点击事件
        for (var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                // this.src可以获取点击的那一张照片
                console.log(this.src);
                document.body.style.backgroundImage='url(' + this.src + ')';
            }
        }
    </>
</body>
</html>

20.表格隔行变色

需要用到两个鼠标事件：鼠标经过onmouseover 鼠标离开onmouseout

<!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>
        table {
            width: 1000px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: rgb(195, 201, 255);
        }
    </style>
</head>
<body>
    <table>
        <!-- 表头 -->
        <thead>
            <tr>
                <th>代码</th>
                <th>课程名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <!-- 表身 -->
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>

    <>
        // 获取tbody中的所有行
        var trs=document.querySelector('tbody').querySelectorAll('tr');
        for (var i=0;i<trs.length;i++){
            trs[i].onmouseover=function(){
                this.className='bg';
            }
            trs[i].onmouseout=function(){
                this.className='';
            }
        }
    </>
</body>
</html>

21.表单的全选和取消全选

<!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>
        /* 初始化页面 */
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 400px;
            margin: 100px auto 0;
        }
        
        table {
            /* 决定表格的边框是合并在一起的 */
            border-collapse: collapse;
            /* 相邻单元格的边框间的距离 */
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <>
        var  j_cbAll=document.getElementById('j_cbAll');
        var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick=function(){
            // 通过this.checked得到当前按钮的选定状态
            // this.checked;
            for (var i=0;i<j_tbs.length;i++){
                j_tbs[i].checked=this.checked;
            }
        }
        // 下面复选框需要全部选中，上面的全选才能选中：给下面所有复选框绑定点击事件，每次点击都要循环一边
        // 这个for循环主要是遍历，为的就是小按钮绑定点击事件
        for (var i=0;i<j_tbs.length;i++) {
            j_tbs[i].onclick=function(){
                // 最开始的时候默认是true
                var flag=true;
                // 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
                for (var i=0;i<j_tbs.length;i++){
                    if(!j_tbs[i].checked){
                        j_cbAll.checked=false;
                        flag=false;
                    }
                }
                j_cbAll.checked=flag;
            }
        }
    </>
</body>
</html>

22.自定义属性的操作

1.获取属性值

element.属性获取属性值

element.getAttribute('属性');

<!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>
    <div id="demo" index="1"></div>
    <>
        // 获取元素的属性值
        var div=document.querySelector('div');
        console.log(div.id);
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2.设置元素的属性值
        div.id='test';
        // element.setAttribute('属性','值') 主要针对自定义属性
        div.className='navs';
        div.setAttribute('index',2);
        div.setAttribute('class','footer');
        // 3。删除属性
        div.removeAttribute('index');
    </>
</body>
</html>

23.tab栏切换


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            /* 就是不显示出来 */
            /* 下面的style="display: block;"的意思就是默认显示：商品介绍模块内容 */
            display: none;
        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <>
        // 获取元素:我们现在要的是tab_list中的所有li
        var tab_list = document.querySelector('.tab_list');
        var lis = tab_list.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        // for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
            // 开始给5个小li 设置索引号 
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                // 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

                // 干掉所有人 其余的li清除 class 这个类
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className = '';
                }
                // 留下我自己 就是我点那个li，那个li就变成current的颜色
                this.className = 'current';
                // 2. 下面的显示内容模块
                var index = this.getAttribute('index');
                console.log(index);
                // 干掉所有人 让其余的item 这些div 隐藏
                for (var i = 0; i < items.length; i++) {
                    items[i].style.display = 'none';
                }
                // 留下我自己 让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    </>
</body>

</html>

24.H5的自定义属性

<!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>
    <div getTime="20" data-index="2" data-list-name="andy"></div>
    <>
        var div=document.querySelector('div');
        // console.log(div.getTime);不能这样子获取，因为getTime是自定义属性
        console.log(div.getAttribute('getTime'));
        // 为了知道它是自定义属性，还是元素自带的，所以H5规定自定义属性data-开头作为属性名并且赋值
         div.setAttribute('data-time',20);//设置了一个新的自定义属性
        console.log(div.getAttribute('data-index'));
        // h5新增的获取自定义属性的方法
        // dataset是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        console.log(div.dataset.listName);
    </>
</body>
</html>

25.节点操作

目的：获取元素

方法：1.利用DOM提供的方法获取元素

2.利用节点层次关系获取元素

基本属性：nodeType(节点类型),nodeName(节点名称),nodeValue(节点值）

<!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>
    <div>我是DIV</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class=""box>
        <span class="erweima">x</span>
    </div>
    <>
        var erweima=document.querySelector('.erweima');
        // 得到的是离元素最近的父级节点
        console.log(erweima.parentNode);//获取父节点 box
    </>
</body>
</html>

26.子节点

<!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>
    <div>我是DIV</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class=""box>
        <span class="erweima">x</span>
    </div>
    <>
    //    DOM提供的方法获取
    var ul=document.querySelector('ul');
    var lis=ul.querySelectorAll('li');
    //1.子节点:得到ul中所有的孩子li
    // console.log(ul.childNodes);//得到的是所有的子节点 包括元素节点，文本节点
    // 2.children获取所有的子元素节点,实际开发用这个，记住这个就行
    console.log(ul.children);
    </>
</body>
</html>

27.子节点--第一个子元素和最后一个子元素

<!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>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <>
        var ol=document.querySelector('ol');
        // 获取第一个元素
        console.log(ol.firstChild);//它拿到的是ol换行的那个text节点
        console.log(ol.firstElementChild);//I9支持
        console.log(ol.lastElementChild);//I9支持
        // 实际开发的写法
        console.log(ol.children[0]);//第一个元素
        console.log(ol.children[ol.children.length-1]);//最后一个元素的索引号
    </>
</body>
</html>

28.下拉菜单

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            /* 表示没有文本修饰效果。就是不要下面的那一条线 */
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <!-- ul是unordered lists的缩写(无序列表) -->
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <>
        // 获取nav元素
        var nav=document.querySelector('.nav');
        // nav元素下面有四个小li
        var lis=nav.children;
        for (var i=0;i<lis.length;i++){
            lis[i].onmouseover=function(){
                // 哦哦哦这是他的第二个孩子,第二个孩子是ul(看缩进就知道了)
            this.children[1].style.display='block';
            }
            lis[i].onmouseout=function(){
                this.children[1].style.display='none';
            }

        }
    </>
</body>

</html>

29.兄弟节点

<!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>
    <div>我是div</div>
    <span>我是span</span>
    <>
        var div=document.querySelector('div');
        // 得到的是下一个兄弟节点 包括元素节点 文本节点等
        console.log(div.nextSibling);
        // 得到的是上一个兄弟节点
        console.log(div.previousSibling);
        // 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);//有兼容性问题,I9支持
        // 得到上一个兄弟节点
        console.log(div.previousElementSibling);//有兼容性问题,I9支持
        
    </>
</body>
</html>

30.创建和添加节点

创建节点：document.createElement('tagName')

添加节点：node.appendfChild(child)

<!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>
    <ul>
        <li>123</li>
    </ul>
    <>
        // 1.创建节点
        var li=document.createElement('li');
        // 2.添加节点 node.appendChild(child) node父级 child子级 后面追加元素 相当于push
        var ul=document.querySelector('ul');
        ul.appendChild(li);
        // 3.添加节点 node.insertBefore(child,指定元素)
        var lili=document.createElement('li');
        // 这句话的意思就是在ul的第一个孩子前面添加元素
        ul.insertBefore(lili,ul.children[0]);
        // 4.我们想要页面添加一个新的元素 1.创建元素 2.添加元素

    </>
</body>
</html>

31.简单的发布留言案例

<!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>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        
    </ul>
    <>
        // 1.获取元素
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        // 2.注册事件
        btn.onclick=function(){
            if(text.value==''){
                alert('小伦你是不是没有输入内容呀~');
                return false;
            }else{
                console.log(text.value);
                var li=document.createElement('li');
                // 先有li才能赋值
                li.innerHTML=text.value;
                // ul.appendChild(li);
                // 因为最新的留言一般都是出现在最上面 所以按照逻辑 都是第一个留言的上面添加就是最新的留言
                ul.insertBefore(li,ul.children[0]);
            }
        }
    </>
</body>
</html>

32.删除节点

node.removechlid(child)删除一个子节点

<!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>删除</button>
    <ul>
        <li>猪1</li>
        <li>猪2</li>
        <li>猪3</li>
    </ul>
    <>
        // 1.获取元素
        var ul=document.querySelector('ul');
        var btn=document.querySelector('button');
        // 2.删除元素
        // ul.removeChild(ul.children[0]);
        // 3.点击按钮依次删除里面的孩子
        btn.onclick=function(){
            // 因为删除是删掉一个其他就变成第一个的 所以在这里我们不需要for循环
            if(ul.children.length==0){
                this.disabled=true;
            }else{
                ul.removeChild(ul.children[0]);
            }
        }
    </>
</body>
</html>

33.删除留言案例

<!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>
        li a{
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        
    </ul>
    <>
        // 1.获取元素
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        // 2.注册事件
        btn.onclick=function(){
            if(text.value==''){
                alert('小伦你是不是没有输入内容呀~');
                return false;
            }else{
                console.log(text.value);
                var li=document.createElement('li');
                // 先有li才能赋值
                // java:; 是阻止链接跳转
                li.innerHTML=text.value + "<a href='java:;'>删除</a>";
                // ul.appendChild(li);
                // 因为最新的留言一般都是出现在最上面 所以按照逻辑 都是第一个留言的上面添加就是最新的留言
                ul.insertBefore(li,ul.children[0]);
                // 删除链接 删除的是当前链接的li元素 
                var as=document.querySelectorAll('a');
                // 它要删除那个a呢 我们就要看我们的我们点击的是那个a 我们要删除a的父亲:li
                for (var i=0; i<as.length;i++){
                    as[i].onclick=function(){
                        // 删除的就是a元素的父亲:li
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </>
</body>
</html>

34.节点操作——复制节点

node.cloneNode（）返回调用该方法接待你的一个副本。

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <>
        var ul=document.querySelector('ul');
        // 克隆的第一个元素 node.cloneNode()括号为空或者是里面是false 浅拷贝 只复制标签不复制里面的内容
        // node.cloneNode(true);括号为true 深拷贝 复制标签复制里面的内容
        var lili=ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </>
</body>
</html>

35.动态生成表格案例

<!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>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th{
            border:1px solid #333;
        }
        thead tr{
            height: 40px;
            background-color: #ccc;
        }       
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <>
        // 1.先去准备号学生的数据 以数组的形式进行存储[]
        var datas=[{
            name:'小伦',
            subject:'JavaScript',
            score:100
        },{
            name:'小罗',
            subject:'JavaScript',
            score:100
        },{
            name:'小猪',
            subject:'JavaScript',
            score:90
        },{
            name:'小猫',
            subject:'JavaScript',
            score:80
        }];
        // 2.往tbody里面创建含：有几个人（通过数组长度）我们就创建几行
        var tbody=document.querySelector('tbody');
        for (var i=0;i<datas.length;i++){//外面的for循环管的是行
            var tr=document.createElement('tr');
            tbody.appendChild(tr);
            // 行里面创建单元格 td 单元格的数量取决于每个对象里面的属性个数 for循环遍历对象
            for(var k in datas[i]){//里面的for循环管列td
                var td=document.createElement('td');
                // 把对对象里面的属性值datas[i][k] 给 td 
                td.innerHTML=datas[i][k];
                tr.appendChild(td);
            }
            // 创建有删除的单元格
            var td=document.createElement('td');
            td.innerHTML='<a href="java:;">删除</a>';
            tr.appendChild(td);
        }
        // 删除操作开始
        var as=document.querySelectorAll('a');
        for(var i=0;i<as.length;i++){
            as[i].onclick=function(){
                // 行的爸爸叫tbody 看图理解为什么是爸爸的爸爸
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
    </>1
</body>
</html>

36.动态创建元素

dcument.write();

document.innerHTML

document.createElement();

经典面试题：innerHTML和createElement哪个效率高？

如果用的是采取数组的形式拼接，innerHTML效率要比createElement高


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

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

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <>
        // window.onload = function() {
        //         document.write('<div>123</div>');

        //     }
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
         // 经典面试题：innerHTML和createElement哪个效率高
        // 如果用的是采取数组的形式拼接。innerHTML效率要比createElement高
    </>
</body>

</html>

37.DOM重点核心

（1）创建：

document.write

innerHTML

createElement

(2)增

appendChild

insertBefore

（3）改

修改元素属性：src、href、title等

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

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

修改元素样式：style、className

（4）删

removeChild

（5）查

DOM提供API方法：geElementById、getElementsByTagName

H5提供的新方法：querySelector、querySelectorAll

利用节点操作获取元素：parentNode、children、previousElementSibing、nextElementSibing

38.注册事件

<!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>传统注册事件</button>
    <button>方法监听注册事件</button>
    <>
        var btns=document.querySelectorAll('button');
        // 1.传统方式注册事件
        btns[0].onclick=function(){
            alert('hi');
        }
        btns[0].onclick=function(){
            alert('hello');
        }
        // 2.事件侦听注册事件 与传统的不一样 它会弹出两个 传统的只弹最后一个出来
        btns[1].addEventListener('click',function(){
            alert(22);
        })
        btns[1].addEventListener('click',function(){
            alert(21);
        })
        
    </>
</body>
</html>

39.删除事件

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <>
        var divs=document.querySelectorAll('div');
        divs[0].onclick=function(){
            alert('再点击一边就不会出现啦');
            // 1.传统的方式删除事件
            divs[0].onclick=null;
        }

        // 2.removeEventListener事件
        divs[1].addEventListener('click',fn);
        function fn(){
            alert('hh');
            divs[1].removeEventListener('click',fn);    
        }
        // 3.I8之后的版本不能用这个
        divs[2].attachEvent('onclick',fn1);
        function fn1(){
            alert('33');
            divs[2].detachEvent('onclick',fn1);
        }
    </>
</body>
</html>

40.DOM事件流


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </>
</body>

</html>

点击son盒子依次出现：

41 .常见事件对象属性和方法

<!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>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <>
        // 1.e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
        var div=document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
            console.log(this);
        })
        var ul=document.querySelector('ul');
        ul.addEventListener('click',function(e){
            console.log(this);//返回ul
            console.log(e.target);//返回li
        })
        // 兼容性处理
        div.onclick=function(e){
            e=e||window.event;
            var target=e.target || e.srcElement;
        }
    </>
</body>
</html>

点击123：

42.实际对象阻止默认行为

<!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>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <>
        // 1.返回事件类型 看鼠标对div做了什么
        var div=document.querySelector('div');
        div.addEventListener('click',fn);
        div.addEventListener('mouseover',fn);
        div.addEventListener('mouseout',fn);
        function fn(e){
            console.log(e.type);
        }
        // 2.阻止默认行为
        var a=document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
            // e.returnValue;这是低版本的浏览器使用的方法
        })
    </>
</body>
</html>

当我的鼠标经过123和离开123：

43.阻止事件冒泡


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);
        // 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation();//阻止事件冒泡 当点击son的时候 只出现son 后面的father和docunment不会出现
            e.cancelBubble=true;//阻止冒泡 不标准（低版本浏览器）
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function(e) {
            alert('father');
        }, false);
        document.addEventListener('click', function(e) {
            alert('document');
        })
    </>
</body>

</html>

44.事件委托

<!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>
    <ul>
        <li>小猪</li>
        <li>小猪</li>
        <li>小猪</li>
        <li>小猪</li>
        <li>小猪</li>
    </ul>
    <>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul=document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // alert('弹出小猪');
            e.target.style.backgroundColor='pink';

        })
    </>
</body>
</html>

45.常用的鼠标事件

<!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>
    我不想被别人看到
    <>
        //1. 禁用右键
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })
        // 2、禁止选中文字
        document.addEventListener('selectstart',function(e){
            e.preventDefault();//复制不了了
        })
    </>
</body>
</html>

46.鼠标事件对象

<!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>
    <>
        document.addEventListener('click',function(e){
            console.log(e.clientX);
            console.log(e.clientY);
            // 如果页面很大 就是在很大页面的当前页面的坐标 重点记住
            console.log(e.pageX);
            console.log(e.pageY);
        })
    </>
</body>
</html>

47.跟随鼠标的皮卡丘

<!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>
        img{
            position: absolute;
           
        }
    </style>
</head>
<body>
    <img src="images/R-C.gif" alt="">
    <>
        var pic=document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            // 每次移动鼠标 都会得到最新的鼠标坐标
            var x=e.pageX;
            var y=e.pageY;
            // 想要图片在鼠标中间 根据图片大小进行移动
            pic.style.left=x-340+'px';
            pic.style.top=y-340+'px';
        })
    </>
</body>
</html>

48.常用的键盘事件


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

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

<body>
    <>
        // 常用的键盘事件
        //1. keyup 按键弹起的时候触发 
        // document.onkeyup = function() {
        //         console.log('我弹起了');

        //     }
        document.addEventListener('keyup', function() {
            console.log('我弹起了');
        })

        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keypress', function() {
                console.log('我按下了press');
            })
            //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
        document.addEventListener('keydown', function() {
                console.log('我按下了down');
            })
            // 4. 三个事件的执行顺序  keydown -- keypress -- keyup
    </>
</body>

</html>


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

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

<body>
    <>
        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
        // 1. 我们的keyup 和keydown事件不区分字母大小写  a 和 A 得到的都是65
        // 2. 我们的keypress 事件 区分字母大小写  a  97 和 A 得到的是65
        document.addEventListener('keyup', function(e) {
            // console.log(e);
            console.log('up:' + e.keyCode);
            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
            if (e.keyCode === 65) {
                alert('您按下的a键');
            } else {
                alert('您没有按下a键')
            }

        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);

        })
    </>
</body>

</html>

49.模拟京东按键输入内容

<!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>
    <input type="text">
    <>
        var search=document.querySelector('input');
        document.addEventListener('keyup',function(e){
            // 就是当我按了s键的时候，光标就出现在文本框里面了
            console.log(e.keyCode);
            if(e.keyCode==83){
                search.focus();
            }
        })
    </>
</body>
</html>

50.模拟快递查询单号

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {

            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>
<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入你的快递单号" class="jd">
    </div>
    <>
        var con=document.querySelector('.con');
        var jd_input=document.querySelector('.jd');
        jd_input.addEventListener('keyup',function(){
            if(this.value==''){
                con.style.display='';
            }else{
                con.style.display='block';
                con.innerText=this.value;
            }
        })
        //当我们失去焦点，就隐藏con盒子
        jd_input.addEventListener('blur',function(){
            con.style.display='none';
        })
        jd_input.addEventListener('focus',function(){
           if(this.value !==''){
            con.style.display='block';
           }

        })
    </>
</body>
</html>