案例作业反馈总结

当一个标签有多个类名的时候

这个标签的类名都是兄弟关系 在对该标签的css样式设定时 兄弟之间的类名不能含有空格符号

this.classList.toggle('active')  含义：判断当前是否含有类名叫active的 如果有则删除active 没有则加上active
toggle-切换
add-
remove-  括号里面都是填写字符串类名 不需要加点

-----------------------------------------------------------------------------------------------

倒计时案例

个位小时/分/秒 补0筹齐两位数字

先提前调用函数进行数据渲染 再启动定时器

关于单标签

反斜杠前面必须要有空格隔开 否则src无法正常加载

-----------------------------------------------------------------------------------------------

微博发布案例

整体效果

1.用户在文本域中输入内容 有字符串长度计数器显示你当前输入的字符串长度
2.点击发布留言-- 会检测内容长度-- 如果为0 提示空内容无法发布--如果内容前后首位处有多个空格 会将其无意义的空格删除在现实在留言板中

细节1
-检测用户在文本域中输入的字符串长度： textaera.value.length
-事件是：input
-将用户输入的长度给计数器

细节2

细节3

-----------------------------------------------------------------------------------------------

购物车将减号按钮启用

false不要加引号
false不要加引号
false不要加引号

 reduces[i].disabled = flase;

获取字符串中的数字

用parseInt( ）； 100px-----------100

图片跟随鼠标移动

动态创建表格案例

什么时候考虑用事件委托？
当要对多个同一类型标签绑定事件的时候 可以委托给他的父亲 例如：在本次的删除中 如果数据太多了对应的删除也随之增多，此时委托给tbody ；对tbody进行事件绑定

当鼠标滚动到某个位置 导航栏下滑

注意点：
页面滚动事件： 给window添加scroll事件  
			html元素：document.documentElement.scrollTop;

QQ音乐轮播图案例

部分代码：
 <div class="indicator">
      <ul>
        <li class="active">
          <img src="assets/s_01.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_02.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_03.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_04.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_05.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_06.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_07.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_08.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_09.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
        <li>
          <img src="assets/s_10.jpg">
          <span class="mask"></span>
          <span class="border"></span>
        </li>
      </ul>
    </div>
-----------------------------------------------------------
JS部分：

  <script>
    // 需求①：小图标鼠标经过事件
    // 鼠标经过小图片，当前高亮，其余兄弟变淡 添加类
    let lis = document.querySelectorAll('.indicator li');
    let piclis = document.querySelectorAll('.slides li');
    let text = document.querySelector('.extra h3');
    for (let i = 0; i < lis.length; i++) {
      //给li绑定事件
      lis[i].addEventListener('mouseenter', function () {
        //排他思想 找到加了类的并且删除 最后自己加上
        document.querySelector('.indicator  .active').classList.remove('active');
        this.classList.add('active');

        //         需求② ：大图片跟随变化
        // 对应的大图片跟着显示，如果想要过渡效果，可以使用opacity效果，可以利用CSS淡入
        // 淡出的效果，还是添加类
        //当鼠标移动到哪个li 对应的picli就添加active类  也是排他思想
        document.querySelector('.slides .active').classList.remove('active');
        piclis[i].classList.add('active');

        //修改对应的文本描述信息
        text.innerHTML = `这是第${i + 1}张图片的信息`;
      });

    }
  </script>

注意点

本地存储学习信息案例

新增数据：先读取本地数据----在新加数据----存储数据---渲染数据