今日学习任务

  • [ ] 网页案例

  • [x] 筋斗云：排他思想

  • 点餐选择框：开关思想

  • [ ] attribute属性语法学习

  • [ ] a.自定义属性语法

  • [ ] 设置属性setAttribute

  • 获取属性getAttribute
  • 删除属性removeAttribute
  • b.案例

  • [ ] 获取元素方式

  • [ ] innerText和innerHTML区别

  • 根据ID获取元素
  • 根据表签名获取元素
  • 根据类名获取元素
  • 根据name属性获取元素

01-核心案例：排他思想

1.1-案例：筋斗云

需求分析：

  1.     1.鼠标移入li元素：筋斗云移入到对应的li元素
  3.     2.鼠标移出li元素：筋斗云移动到选中的li元素
  5.     3.鼠标点击li元素：改变选中的li元素

效果预览

day02 - 图1

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         ul {
  15.             list-style: none;
  16.         }
  18.         body {
  19.             background-color: #333;
  20.         }
  22.         .nav {
  23.             width: 800px;
  24.             height: 42px;
  25.             margin: 100px auto;
  26.             /*background-color: red;*/
  27.             background: #fff url(images/rss.png) no-repeat right center;
  28.             border-radius: 10px;
  29.             position: relative;
  30.         }
  32.         .nav li {
  33.             width: 83px;
  34.             height: 42px;
  35.             /*background-color: red;*/
  36.             text-align: center;
  37.             line-height: 42px;
  38.             float: left;
  39.             cursor: pointer;
  40.         }
  42.         ul {
  43.             position: relative;
  44.         }
  46.         .nav .current {
  47.             background: url(images/cloud.gif) no-repeat;
  48.         }
  49.     </style>
  50. </head>
  52. <body>
  53.     <div class="nav">
  54.         <ul id="navBar">
  55.             <li class="current">北京校区</li>
  56.             <li>上海校区</li>
  57.             <li>广州校区</li>
  58.             <li>深圳校区</li>
  59.             <li>武汉校区</li>
  60.             <li>关于我们</li>
  61.             <li>联系我们</li>
  62.             <li>招贤纳士</li>
  63.         </ul>
  64.     </div>
  66.     <script>
  67.         // 1. 事件源：所有的li标签
  68.         let lis = document.querySelectorAll('#navBar>li');
  69.         // 获取li的位置：设置一个观察者，点击筋斗云默认的位置 let index = 0
  70.         let index = 0;
  72.         // 2. 遍历li，给每个li绑定事件
  73.         lis.forEach(function (item, key) {
  74.             // item是lis里面的每个元素值：li，key是当前li的下标
  76.             // 2.1 鼠标移入事件
  77.             item.onmouseover = function () {
  78.                 // 排他思想：让所有的li都没有背景
  79.                 lis.forEach(function (li) {
  80.                     li.classList.remove('current');
  81.                 });
  83.                 // 给当前被点击的li增加背景
  84.                 item.classList.add('current');
  86.             };
  88.             // 2.2 点击事件
  89.             item.onclick = function () {
  90.                 index = key;
  91.             }
  93.             // 2.3 鼠标移出事件
  94.             item.onmouseout = function () {
  95.                 // 排他思想：让所有的li都没有背景
  96.                 lis.forEach(function (li) {
  97.                     li.classList.remove('current');
  98.                 });
  100.                 lis[index].classList.add('current');
  101.             }
  103.         });
  105.     </script>
  106. </body>
  108. </html>

02-核心案例：开关思想

1.1-点餐选择框:开关思想

效果预览/02-%E6%A1%88%E4%BE%8B%EF%BC%9A%E7%82%B9%E9%A4%90%E9%80%89%E6%8B%A9%E6%A1%86.html)

day02 - 图2

需求分析：切入点：交互
1.点击上方选择框：让下方选择框列表的checked值与自身保持一致
2.点击下方选择框列表：判断上方选择框列表状态
选中：所有的选择框checked值都是true
未选中：只要有一个选择框checked值是false

  2. <!DOCTYPE html>
  3. <html>
  4. <head lang="en">
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  13.         table {
  14.             border-collapse: collapse;
  15.             border: 1px solid #c0c0c0;
  16.             width: 500px;
  17.             margin: 100px auto;
  18.             text-align: center;
  19.         }
  21.         th {
  22.             background-color: #09c;
  23.             font: bold 16px "微软雅黑";
  24.             color: #fff;
  25.             height: 24px;
  26.         }
  28.         td {
  29.             border: 1px solid #d0d0d0;
  30.             color: #404060;
  31.             padding: 10px;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <table>
  37.     <tr>
  38.         <th>
  39.             <input type="checkbox"  id="checkAll"/>全选/全不选
  40.         </th>
  41.         <th>菜名</th>
  42.         <th>商家</th>
  43.         <th>价格</th>
  44.     </tr>
  45.     <tr>
  46.         <td>
  47.             <input type="checkbox" class="check"/>
  48.         </td>
  49.         <td>红烧肉</td>
  50.         <td>隆江猪脚饭</td>
  51.         <td>￥200</td>
  52.     </tr>
  53.     <tr>
  54.         <td>
  55.             <input type="checkbox" class="check"/>
  56.         </td>
  57.         <td>香酥排骨</td>
  58.         <td>隆江猪脚饭</td>
  59.         <td>￥998</td>
  60.     </tr>
  61.     <tr>
  62.         <td>
  63.             <input type="checkbox" class="check"/>
  64.         </td>
  65.         <td>北京烤鸭</td>
  66.         <td>隆江猪脚饭</td>
  67.         <td>￥88</td>
  68.     </tr>
  69. </table>
  71. <script>
  72.     /*
  73.     1.分析需求(交互)：
  74.         a.点击上方选择框：下方选择框列表checked属性与上方选择框一致
  75.         b.点击下方选择框列表：检查上方选择框选中状态
  76.                 选中：所有的选择框列表都是选中状态
  77.                 未选中：只要有任何一个选择框列表未选中
  78.     2.思路分析（事件三要素）
  79.         获取元素：事件源：
  80.         注册事件：事件类型
  81.         事件处理：
  82.     */
  84.     //1.获取元素
  85.     let checkAll = document.querySelector('#checkAll');//上方选择框
  86.     let checkList = document.querySelectorAll('.check');//下方三个选择框列表
  87.     //2.注册事件
  89.     //2.1 上方选择框
  90.     checkAll.onclick = function () {
  91.         //3.事件处理:下方选择框列表checked属性与自身一致
  93.         console.log(this.checked);
  95.         for(let i = 0;i<checkList.length;i++){
  96.              checkList[i].checked = this.checked;
  97.         };
  99.     };
  101.     //2.2 下方选择框列表
  102.     for(let i = 0;i<checkList.length;i++){//i = 0 1 2
  103.         checkList[i].onclick = function(){
  104.             //3.事件处理:this点击的那个选择框
  105.             //检查上方选择框选中状态
  107.             /* 开关思想：当某种操作结果只有两种状态，可以使用布尔类型表示这两种状态
  108.             1.提出假设 let isAllOk = true
  109.             2.验证假设
  110.             3.根据开关结果实现需求
  111.              */
  113.              //3.1 提出假设
  114.              let isAllOk = true;
  116.             //3.2 验证假设
  117.             for(let j = 0;j<checkList.length;j++){
  118.                 // console.log(checkList[j].checked);
  119.                 //只要有任何一个选择框checked是false，假设被推翻
  120.                 if(checkList[j].checked == false){
  121.                     isAllOk = false;
  122.                 };
  123.             };
  125.             //3.3 根据开关结果实现需求
  126.             checkAll.checked = isAllOk;
  127.             // if(isAllOk){
  128.             //     checkAll.checked = true;
  129.             // }else{
  130.             //     checkAll.checked = false;
  131.             // };
  132.             // console.log(checkList[0].checked);
  133.             // console.log(checkList[1].checked);
  134.             // console.log(checkList[2].checked);
  138.         };
  139.     };
  143. </script>
  144. </body>
  145. </html>

03-获取元素语法补充

  • 重点掌握选择器获取,其他仅做了解 | 语法 | 示例 | 描述 | | —- | —- | —- | | getElementById() | document.getElementById(‘box’) | 根据id获取元素 | | getElementsByTagName() | document.getElementsByTagName(‘li’) | 根据标签名获取元素 | | getElementsByClassName() | document.getElementsByClassName(‘one’) | 根据类名获取元素 | | getElementsByName() | document.getElementsByName(‘sex’) | 根据name属性值获取表单元素 | | querySelector() | document.querySelector(‘选择器’) | 根据选择器获取满足条件第一个元素 | | querySelectorAll() | document.querySelectorAll(‘选择器’) | 根据选择器获取满足条件所有元素 |

1.1-innerText与innerHTML

  • 作用完全不同（只是有些类似）

    • 类似点：获取到的都是string类型字符串
    • innerText:获取元素文本
    • innerHTML:获取元素内容（文本+标签）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="box">我是班长
  10.     <p>我是班长小迷妹</p>
  11. </div>
  13. <script>
  16.     let box = document.querySelector('#box');
  18.     //1.innerText:获取元素文本（包含子标签的文本）
  19.     console.log ( box.innerText );
  21.     //2.innertHTML:获取元素内容(包含标签与文本)
  22.     console.log ( box.innerHTML );
  24.     //3.通过分别设置一个元素的innerText与innertHTML了解两者的区别
  26.     //innerText:会把所有的内容都当成文本，无法解析标签
  27.     // box.innerText = '<a>我是i连接</a><p>我是p</p>';
  29.     //innerHTML:可以解析字符串中的标签
  30.     //作用：可以和document.write()一样动态给页面添加元素
  31.     box.innerHTML = '<a>我是i连接</a><p>我是p</p>';
  32. </script>
  33. </body>
  34. </html>

1.1-根据id获取页面元素

  • 语法:document.getElementById('id名');

    • 如果没有这个id，那么会得到一个null

  • 由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素

    • 这种用法不推荐，有些浏览器不支持
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="div1">我是div1</div>
  10. <div id="div2">我是div2</div>
  12. </body>
  14. <script>
  16.     /**1.getElementById:通过id获取元素
  17.      * 参数：元素id字符串
  18.      * 返回值：元素对象（又称为dom对象）/null
  19.      */
  20.     let div1 = document.getElementById('div1');
  21.     console.log ( div1 );
  22.     console.log ( typeof  div1 );                    //object
  24.     //2.如果没有这个id，那么会得到一个null
  25.     let box = document.getElementById('box');
  26.     console.log ( box );                            //null
  28.     //3.由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素
  29.     //这种用法不推荐，有些浏览器不支持
  30.     console.log ( div2 );
  31. </script>
  32. </html>

1.2-根据标签名tagName获取页面元素

  • 语法:document.getElementsByTagName('标签名')

  • 细节：

    • （1）id具有唯一性所以获取到的要么是null要么是单个元素
    • （2）标签名可以在页面存在多个，所以获取到的一定是一个伪数组，如果没有则是空数组

  • 总结

    • 1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素
    • 2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素
    • 3.getElementById只能由document来调用，否则会报错
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <ul id="oldWang">
  10.     <li id="id1">隔壁老王1</li>
  11.     <li>隔壁老王2</li>
  12.     <li>隔壁老王3</li>
  13.     <li>隔壁老王4</li>
  14.     <li>隔壁老王5</li>
  15. </ul>
  17. <ul>
  18.     <li>隔壁老张1</li>
  19.     <li>隔壁老张2</li>
  20.     <li>隔壁老张3</li>
  21.     <li>隔壁老张4</li>
  22.     <li>隔壁老张5</li>
  23. </ul>
  25. </body>
  27. <script>
  28.     /**1.getElementsByTagName通过标签名获取元素
  29.      *参数：标签名字符串
  30.      * 返回值：标签数组(伪数组)
  31.      *      * 细节：（1）id具有唯一性所以获取到的要么是null要么是单个元素
  32.      *                  （2）标签名可以在页面存在多个，所以获取到的一定是一个数组，如果没有则是空数组
  33.      *
  34.      */
  35.     let liList = document.getElementsByTagName('li');
  36.     console.log ( liList );//一定是一个数组，所以找不到则是空数组
  38.     //console.log ( liList.slice () );//程序会报错，伪数组没有数组的API
  40.     //2.假如我只想获取某一个元素下所有标签名的元素，可以先获取父元素对象，然后调用父元素对象的getElementsByTagName方法
  41.     //2.1 先通过id获取ul标签
  42.     let oldWang = document.getElementById('oldWang');
  43.     //2.2 调用oldWang的getElementsByTagName方法
  44.     let wangList = oldWang.getElementsByTagName('li');
  45.     console.log ( wangList );
  47.     /*总结
  48.     1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素
  49.     2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素
  50.     3.getElementById只能由document来调用，否则会报错
  51.      */
  52.     //console.log ( wangList.getElementById ( "id1" ) );//这样写会报错，id只能通过document来获取
  54. </script>
  55. </html>

1.3-根据类名className获取元素

  • 语法：document.getElementsByClassName ( "类名" )

    • 返回的就是一个伪数组
  • 小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组 否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组
  • 注意点:根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <ul id="ul1">
  10.     <li class="li1">隔壁老王1</li>
  11.     <li class="li1">隔壁老王2</li>
  12.     <li class="li1">隔壁老王3</li>
  13.     <li class="li1">隔壁老王4</li>
  14.     <li class="li1">隔壁老王5</li>
  15. </ul>
  17. <ul id="ul2">
  18.     <li class="li1">隔壁老张1</li>
  19.     <li class="li1">隔壁老张2</li>
  20.     <li class="li1">隔壁老张3</li>
  21.     <li class="li1">隔壁老张4</li>
  22.     <li class="li1">隔壁老张5</li>
  23. </ul>
  25. </body>
  27. <script>
  28.     /*本小节知识点：根据类名classNmae获取元素
  29.     1.小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组
  30.     否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组
  32.     2.根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用
  34.      */
  36.     //1.获取ul1
  37.     let ul1 = document.getElementById('ul1');
  38.     //2.根据类名获取标签  返回的是一个伪数组
  39.     console.log ( ul1.getElementsByClassName ( "li1" ) )//获取ul1元素下的所有类名为li1的标签
  40.     console.log ( document.getElementsByClassName ( "li1" ) )//获取整个文档中类名为li1的标签
  41.     //3.根据类型获取标签getElementsByClassName，尽量少用，改用其他方式代替
  42.     //原因：存在浏览器兼容性问题，IE8及之前不支持
  43. </script>
  44. </html>

1.4-根据name属性值获取表单元素

  • 语法:document.getElementsByName('表单元素name属性的值');

    • name属性是表单元素特有的默认属性，返回值也是一个伪数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <input type="text" name="one">
  10. <input type="password" name="one">
  11. <input type="radio" name="one">
  12. <input type="checkbox" name="one">
  15. </body>
  17. <script>
  18.     /*使用name属性来获取元素，返回值也是一个伪数组
  19.         * name属性是表单元素特有的默认属性
  20.      */
  21.     let nameList = document.getElementsByName('one');
  22.     console.log ( nameList );
  23. </script>
  24. </html>

04-attribute语法学习

1.1-attribute操作自定义属性语法

  • 标签元素属性:

    • （1）行内标准属性：input.id（针对行内）
    • （2）行内自定义属性：开发追加的，html自己不能使用
    • （3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性
    • （4）行外属性

  • 1.attribute方式

    • 1.获取属性：元素.getAttribute ( “id” ) ==== 行内属性（元素.id）

      • 如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性
    • 2.设置属性：元素.setAttribute(‘属性名’,属性值); ==== 元素.id = 值
    • 3.删除属性：元素.removeAttribute(‘属性名’); ==== delete 元素.id
    • 用attribute方式设置的属性只能使用attribute方式来获取

  • 2.注意点

    • js点语法能获取到的属性：

      • （1）行内标准属性
      • （2）js点语法动态添加的自定义属性

    • 不能获取到的属性：

      • （1）行内自定义属性
      • (2)行外属性

    • getAttribute能获取到的属性：

      • （1）行内标准属性
      • （2）行内自定义属性
      • （3）setAttribute动态添加的属性

    • 不能获取到的属性：

      • （1）js点语法动态添加的自定义属性
      • （2）行外属性

  • 3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)

    • 标准属性操作：使用js点语法（代码简洁）
    • 自定义属性操作：用attribute（易读性更高）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .one{
  8.             width: 100px;
  9.             height: 100px;
  10.             //background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  16. <!--如果一个属性不是html中得属性，那么这个属性成为自定义属性-->
  17. <div id="div1" class="one" aaa='啊啊啊啊'></div>
  18. </body>
  20. <script src="common.js"></script>
  21. <script>
  23.     //元素属性写法： （1）行内标准属性   （2）行外属性  (3)js动态添加得属性  （4）行内自定义属性
  25.     //1.js点语法属性操作
  27.     //1.1 可以拿到哪些
  28.  let div1 =  id('div1');
  29.     div1.index = 1;
  30.     div1.setAttribute('index',1);
  32.  console.log ( div1.className );//行内标准属性
  33.     div1.a = 'a';
  34.     console.log ( div1.a )//js动态添加得属性
  36.     //1.2 不可以拿到
  37.  console.log ( div1.style.width );//行外属性
  38.    console.log ( div1.aaa );//行内自定义属性
  40.     //2. attribute方式
  42.     /*获取属性：  元素.getAttribute('属性名')
  43.     添加属性：元素.setAttribute('属性名',属性值);
  44.         * 用setAttribute方式添加只能用getAttribute获取
  45.      删除属性： 元素.removeAttribute('属性名');
  46.         * a.属性名属性值全部删除，更加彻底
  47.         * b.点语法只能删除属性值，不能删除属性名
  50.     总结：js点语法操作属性与attribute语法操作属性场景
  51.     标准属性：点语法（简洁）
  52.     自定义属性：attribute（代码易读性更高）
  54.      */
  56.     //2.1 可以获取
  57.     console.log ( div1.getAttribute ( "class" ) );    //行内标准属性   类名直接class即可
  58.     console.log ( div1.getAttribute ( "aaa" ) );    //行内自定义属性
  60.     //2.2 不可以获取
  61.     console.log ( div1.getAttribute ( "style.width" ) );    //行外属性
  62.     console.log ( div1.getAttribute ( "a" ) );                //js点语法动态添加得属性
  64.     //添加属性
  65.     div1.setAttribute('index',10);
  66.     console.log ( div1.getAttribute ( "index" ) )    //取值   用setAttribute方式添加只能用getAttribute获取
  67.     console.log ( div1.index );
  70.     //3.删除属性
  71.     //div1.className = '';                //属性得值没有了，属性名还在
  72.     div1.removeAttribute('class');        //属性名和属性值全部删除，更加干净彻底
  74. </script>
  75. </html>

1.2-案例：隔行变色

day02 - 图3

  • 需求： （1）单数行显示黄色 双数行显示绿色 （2）鼠标移入哪一个就显示红色高亮，移开就恢复原状

  • 思路分析：

    • 1.先获取到界面所有的li标签
    • 2.遍历数组，实现li标签的隔行变色
    • 3.给每一个li标签注册鼠标移入和移出事件

    • 4.移入则修改颜色为红色

      • 对象的赋值操作先回收旧值，再赋新值

    • 5.移出则修改颜色为原先的颜色

      • 可以给对象动态添加一个属性用于存储原先的颜色
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <ul id="ul1">
  10.     <li>隔壁老王1</li>
  11.     <li>隔壁老王2</li>
  12.     <li>隔壁老王3</li>
  13.     <li>隔壁老王4</li>
  14.     <li>隔壁老王5</li>
  15.     <li>隔壁老王6</li>
  16.     <li>隔壁老王7</li>
  17.     <li>隔壁老王8</li>
  18.     <li>隔壁老王9</li>
  19.     <li>隔壁老王10</li>
  20. </ul>
  21. </body>
  23. <script>
  24.     /*需求：（1）单数行显示黄色  双数行显示绿色  （2）鼠标移入哪一个就显示红色高亮，移开就恢复原状
  25.     思路分析：
  26.         * 1.先获取到界面所以的li标签
  27.         * 2.遍历数组，实现li标签的隔行变色
  28.         * 3.给每一个li标签注册鼠标移入和移出事件
  29.         * 4.移入则修改颜色为红色
  30.         * 5.移出则修改颜色为原先的颜色
  31.      */
  33.     //1.获取li标签列表
  34.     let liList = document.querySelectorAll('li');
  35.     //2.遍历数组，实现隔行变色
  36.     for(let i = 0;i<liList.length;i++){
  37.         if(i%2 == 0){
  38.             //双数行显示绿色
  39.             liList[i].style.background = 'green';
  40.         }else{
  41.             //单数行显示黄色
  42.             liList[i].style.background = 'yellow';
  43.         }
  45.         //3.1 给每一个li标签注册鼠标移入和移出事件
  46.         liList[i].onmouseover = function (  ) {
  48.             /*（1） 修改之前我们给这个元素添加一个属性用于存储当前颜色*/
  49.             this.setAttribute('defaultColor',this.style.background);
  51.             //（2）如果移入则修改颜色为红色高亮
  52.             this.style.background = 'red';
  54.         }
  56.         //3.2 移出
  57.         liList[i].onmouseout = function (  ) {
  58.             //如果移出则修改颜色为之前的颜色
  59.             this.style.background = this.getAttribute('defaultColor');
  60.         }
  61.     }
  62. </script>
  63. </html>

05-核心案例(tab栏切换)

1.1-tab栏切换02（作业）

效果预览/02-%E6%A1%88%E4%BE%8B%EF%BC%9Atab%E6%A0%8F%E5%88%87%E6%8D%A202.html)

day02 - 图4

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         ul {
  15.             list-style: none;
  16.         }
  18.         .box {
  19.             width: 400px;
  20.             height: 300px;
  21.             border: 1px solid #ccc;
  22.             margin: 100px auto;
  23.         }
  25.         .hd {
  26.             height: 45px;
  27.         }
  29.         .hd span {
  30.             display: inline-block;
  31.             /*将行内元素转换成行内块元素，宽高才起作用*/
  32.             width: 90px;
  33.             background-color: pink;
  34.             line-height: 45px;
  35.             text-align: center;
  36.             cursor: pointer;
  37.         }
  39.         .hd span.current {
  40.             /*交集选择器，标签指定式选择器*/
  41.             background-color: purple;
  42.             /*紫色*/
  43.         }
  45.         .bd li {
  46.             height: 255px;
  47.             background-color: purple;
  48.             display: none;
  49.             /*设置隐藏*/
  50.         }
  52.         .bd li.current {
  53.             display: block;
  54.             /*显示*/
  55.         }
  56.     </style>
  57. </head>
  59. <body>
  60.     <div class="box" id="box">
  61.         <div class="hd">
  62.             <span class="current">体育</span>
  63.             <span>娱乐</span>
  64.             <span>新闻</span>
  65.             <span>综合</span>
  66.         </div>
  67.         <div class="bd">
  68.             <ul id="list">
  69.                 <li class="current">我是体育模块</li>
  70.                 <li>我的娱乐模块</li>
  71.                 <li id="li3">我是新闻模块</li>
  72.                 <li>我是综合模块</li>
  73.             </ul>
  74.         </div>
  75.     </div>
  77.     <script>
  78.         // 1. 获取所有的span和li
  79.         let spans = document.querySelectorAll('.hd>span');
  80.         let lis = document.querySelectorAll('#list>li');
  82.         // 2. 给所有的span绑定鼠标移入事件：onmouseover
  83.         spans.forEach(function (item, index) {
  84.             // index代表每个span的下标，但是最终每个li也是对应的位置
  85.             // span与li共享下标
  86.             item.onmouseover = function () {
  87.                 // 3. 事件处理：排他：span和li都需要排他
  89.                 // 3.1 排他：将所有的类似的元素都变成统一的效果
  90.                 spans.forEach(function (sp) {
  91.                     sp.classList.remove('current');
  92.                 });
  94.                 lis.forEach(function (li) {
  95.                     li.classList.remove('current');
  96.                 });
  98.                 // 3.2 排他：让当前元素有特效
  99.                 item.classList.add('current');
  100.                 lis[index].classList.add('current');
  101.             };
  102.         });
  103.     </script>
  104. </body>
  106. </html>

1.2-京东商品展示

效果预览/02-%E4%BA%AC%E4%B8%9C%E5%95%86%E5%93%81%E5%B1%95%E7%A4%BA.html)

day02 - 图5

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         ul {
  13.             list-style: none;
  14.             padding-top: 15px;
  15.         }
  16.         .box {
  17.             width: 350px;
  18.             height: 420px;
  19.             border: 1px solid #000;
  20.             margin: 100px auto;
  21.         }
  22.         li {
  23.             float: left;
  24.             width: 20%;
  25.             text-align: center;
  26.         }
  27.         img:hover {
  28.             outline: 3px solid #0094ff;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div class="box">
  34.         <div>
  35.             <img src="images/b1.jpg" id="big" alt=""/>
  36.         </div>
  37.         <div>
  38.             <ul id="ul">
  39.                 <!--data-src是自定义属性，存放对应大图的src-->
  40.                 <li data-src="images/b1.jpg"><img src="images/s1.jpg"  alt=""/></li>
  41.                 <li data-src="images/b2.jpg"><img src="images/s2.jpg"  alt=""/></li>
  42.                 <li data-src="images/b3.jpg"><img src="images/s3.jpg"  alt=""/></li>
  43.                 <li data-src="images/b4.jpg"><img src="images/s4.jpg"  alt=""/></li>
  44.                 <li data-src="images/b5.jpg"><img src="images/s5.jpg"  alt=""/></li>
  45.             </ul>
  46.         </div>
  47.     </div>
  49.     <script>
  50.         /*
  51.         1.分析需求(交互)：
  52.             点击底部li元素：取出当前点击li元素的自定义属性data-src , 赋值给上面img的src属性
  53.         2.思路分析（事件三要素）
  54.             获取元素：事件源：
  55.             注册事件：事件类型
  56.             事件处理：
  57.         */
  59.         //1.获取元素
  60.         let big = document.querySelector('#big');//大图片
  61.         let liList = document.querySelectorAll('#ul>li');//小图片列表
  63.         //2.循环小图片列表
  64.         for(let i = 0;i<liList.length;i++){
  65.             //2.1 给每一个小图片添加点击事件
  66.             liList[i].onclick = function (  ) {
  67.                 //3.1 获取li标签的自定义属性data-src
  68.                 let src = this.getAttribute('data-src');
  69.                 //3.2 设置大图片的src属性为自己的href属性
  70.                 big.src = src;
  71.             }
  72.         }
  75.     </script>
  76. </body>
  77. </html>

1.3-tab栏切换选项卡（作业）

效果预览/03-%E6%A1%88%E4%BE%8B%EF%BC%9Atab%E6%A0%8F%E5%88%87%E6%8D%A2%E9%80%89%E9%A1%B9%E5%8D%A1.html)

day02 - 图6

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         ul {
  12.             list-style: none;
  13.         }
  14.         .wrapper {
  15.             width: 1000px;
  16.             height: 475px;
  17.             margin: 0 auto;
  18.             margin-top: 100px;
  19.         }
  20.         .tab {
  21.             border: 1px solid #ddd;
  22.             border-bottom: 0;
  23.             height: 36px;
  24.             width: 320px;
  25.         }
  26.         .tab li {
  27.             position: relative;
  28.             float: left;
  29.             width: 80px;
  30.             height: 34px;
  31.             line-height: 34px;
  32.             text-align: center;
  33.             cursor: pointer;
  34.             border-top: 4px solid #fff;
  35.         }
  36.         .tab span {
  37.             position: absolute;
  38.             right: 0;
  39.             top: 10px;
  40.             background: #ddd;
  41.             width: 1px;
  42.             height: 14px;
  43.             overflow: hidden;
  44.         }
  45.         .products {
  46.             width: 1002px;
  47.             border: 1px solid #ddd;
  48.             height: 476px;
  49.         }
  50.         .products .main {
  51.             float: left;
  52.             display: none;
  53.         }
  54.         .products .main.selected {
  55.             display: block;
  56.         }
  57.         .tab li.active {
  58.             border-color: red;
  59.             border-bottom: 0;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64. <div class="wrapper">
  65.     <ul class="tab">
  66.         <li class="tab-item active">国际大牌<span>◆</span></li>
  67.         <li class="tab-item">国妆名牌<span>◆</span></li>
  68.         <li class="tab-item">清洁用品<span>◆</span></li>
  69.         <li class="tab-item">男士精品</li>
  70.     </ul>
  71.     <div class="products">
  72.         <div class="main selected">
  73.             <a href="###"><img src="images1/guojidapai.jpg" alt=""/></a>
  74.         </div>
  75.         <div class="main">
  76.             <a href="###"><img src="images1/guozhuangmingpin.jpg" alt=""/></a>
  77.         </div>
  78.         <div class="main">
  79.             <a href="###"><img src="images1/qingjieyongpin.jpg" alt=""/></a>
  80.         </div>
  81.         <div class="main">
  82.             <a href="###"><img src="images1/nanshijingpin.jpg" alt=""/></a>
  83.         </div>
  84.     </div>
  85. </div>
  87. <script src="common.js"></script>
  88. <script>
  90.     /*
  91.     1.分析需求(交互)：
  92.         点击上方li元素 ： 排他思想修改样式  
  93.             a. 自身添加类名active，其他li元素移除类名active
  94.             b. 下方对应的div(下标一致)显示，其他div隐藏
  95.     2.思路分析（事件三要素）
  96.         获取元素：事件源：
  97.         注册事件：事件类型
  98.         事件处理：
  99.     */
  101.     //1.获取元素
  102.     let liList = document.querySelectorAll('.tab>li');//顶部li标签列表
  103.     let productsList = document.querySelectorAll('.products>div');//商品详情div列表
  105.     //2.添加事件
  106.     //2.1 遍历liList
  107.     for(let i = 0;i<liList.length;i++){
  108.         //2.2 给每一个li标签添加自定义属性
  109.         liList[i].setAttribute('index',i);
  110.         //2.3 给每一个li标签添加点击事件
  111.         liList[i].onclick = function (  ) {
  112.             //3.1 获取当前点击li元素下标
  113.             let index = this.getAttribute('index');
  114.             //3.2 排他思想修改样式 
  115.             for(let j = 0;j<liList.length;j++){
  116.                 if(j == index){
  117.                     liList[j].className += ' active';//这里有两个类名   注意中间空格
  118.                     productsList[j].style.display = 'block';
  119.                 }else{
  120.                     liList[j].className = 'tab-item';//默认类名样式
  121.                     productsList[j].style.display = 'none';
  122.                 };
  123.             } ;
  124.         };
  125.     };
  128. </script>
  129. </body>
  130. </html>