devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端学习day14-DOM：模板字符串，占位符，根据数据源展示数据，元素隐藏与显示，图片切换，全局变量要等循环结束才能确定其值_``模板字符串显示${}

作者：Gausst松鼠会 | 2024-02-16 12:12:55

赞

踩

``模板字符串显示${}

目录

1.``模板字符串   ${}占位符  

2.展示数据作业：根据数据源展示数据

3.元素的显示隐藏

5.切换图片

6.关于变量的问题

1.``模板字符串   ${}占位符  

        模板字符串 可以换行 任意的嵌套的

  1.  str += `
  2.                  <div class='box'>
  3.                      <img src="${obj.imgsrc}">
  4.                      <p>${obj.title}</p>
  5.                  </div>
  6.              `
 // 对于单引号 和双引号 都不可以换行 只能通过 + 进行拼接
        // var str  = "helloe " + "world";

        // \ 转义符 把后边特殊符号做为一个普通字符串  或者 转义成换行 制表符健
        // \n 换行  \t  4个空格 tab
        var str = "我要送你个\"惊喜\"";
        console.log(str);
        // 第一个\ 把第二个\转义成字符串
        var path = "c:\\user\\desktop";

 

2.展示数据作业：根据数据源展示数据

2.1直接利用innerHTML添加

  1.   str = "";
  2.         for (var obj of arr) {
  3.             str += `
  4.         <div>
  5.             <img src=${obj.imgsrc}>
  6.             <p>${obj.title}</p>
  7.             </div>`
  8.             document.querySelector("main").innerHTML = str;
  9.         }

2.2 利用数组的join拼接实现

  1.  str = "";
  2.          var array = [];
  3.         for (var i = 0; i < datas.length; i++) {
  4.  
  5.             var obj = datas[i];
  6.             var str = `
  7.                 <div class='box'>
  8.                     <img src="${obj.imgsrc}">
  9.                     <p>${obj.title}</p>
  10.                 </div>
  11.             `
  12.             array.push(str);
  13.         }
  14.         document.querySelector("main").innerHTML = array.join("");

2.3创建div然后利用appendChild追加div

  1.  for(var i =0; i< datas.length;i++){
  2.             var obj = datas[i];
  3.             var div = document.createElement("div");
  4.             div.classList.add("box");
  5.             div.innerHTML = `
  6.              <img src="${obj.imgsrc}">
  7.              <p>${obj.title}</p>
  8.              `
  9.             document.querySelector("main").appendChild(div);
  10.         }

3.元素的显示隐藏

  1.     <style>
  2.         html,body{
  3.             height: 100%;
  4.             margin: 0;
  5.         }
  6.         .login {
  7.             float: right;
  8.             margin-right: 100px;
  9.             width: 100px;
  10.             line-height: 50px;
  11.             text-align: center;
  12.             border-radius: 20px;
  13.             background: blue;
  14.             color: white;
  15.         }
  16.         .mask {
  17.             display: none;
  18.             position: fixed;
  19.             width: 100%;
  20.             height: 100%;
  21.             background: rgba(110, 110, 97, 0.5);
  22.         }
  23.         .box{
  24.             width: 200px;
  25.             height: 100px;
  26.             background: white;
  27.             position: absolute;
  28.             top: 50%;
  29.             left: 50%;
  30.             transform: translate(-50%,-50%);
  31.         }
  32.  
  33.         .box>span{
  34.             float: right;
  35.             margin-right: 20px;
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <div class="login">登录</div>
  41.     <div class="mask">
  42.         <div class="box">
  43.             <span> X </span>
  44.         </div>
  45.     </div>
  46.  
  47.     <script>
  48.         var btn = document.querySelector(".login");
  49.         var mask = document.querySelector(".mask");
  50.         var span = document.querySelector("span");
  51.         btn.onclick = function () {
  52.             mask.style.display = "block";
  53.         }
  54.         span.onclick = function () {
  55.             mask.style.display = "none";
  56.         }
  57.     </script>
  58. </body>

4.补充内容

document.writeln,

  1. <div myname="test" class="name red">aaaaaa</div>
  2.     <!-- 绑定事件的另外一种写法    "方法名()"  一定要记得加() -->
  3.     <button onclick="btnclick()">点我</button>
  4.     <script>
  5.  
  6.         // 移除 自定义属性
  7.         var div = document.querySelector("div");
  8.         div.removeAttribute("myname");
  9.  
  10.         // 查看元素是否拥有 某个自定义属性
  11.         // true  or  false
  12.         div.hasAttribute("myname");
  13.  
  14.  
  15.         // 检查class列表中是否拥有某个值
  16.         // true  or  false
  17.         var contain = div.classList.contains("red");
  18.         console.log(contain)
  19.  
  20.  
  21.         function btnclick() {
  22.             // 一般不用  
  23.             // 会覆盖页面中的内容
  24.             // 不会换行
  25.             // document.write("111111  <br> 2222");
  26.  
  27.             document.write("111111");
  28.             document.write("222222");
  29.  
  30.  
  31.             // writeln 可以实现换行
  32.             // 配合 pre标签进行使用带有换行
  33.             document.writeln("<pre>");
  34.             document.writeln("111111");
  35.             document.writeln("222222");  
  36.             document.writeln("</pre>");
  37.  
  38.         }
  39.  
  40.  
  41.  
  42.     </script>

5.切换图片

  1. <div class="big">
  2.         <img src="./imgs/1.jpg" alt="">
  3.     </div>
  4.     <div class="small">
  5.         <img src="./imgs/1.jpg" alt="" class="active">
  6.         <img src="./imgs/2.jpg" alt="">
  7.         <img src="./imgs/3.jpg" alt="">
  8.         <img src="./imgs/4.jpg" alt="">
  9.         <img src="./imgs/5.jpg" alt="">
  10.     </div>
  11.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  12.     <script>
  13.  
  14.         // ctrl +shift + p  
  15.         // 配置vscode 偏好设置的
  16.         // 设置一下代码片段
  17.  
  18.  
  19.         var imgs = document.querySelectorAll(".small img");
  20.  
  21.         var bigImg = document.querySelector('.big img');
  22.  
  23.  
  24.         // 1.
  25.         // for(let i =0;i < imgs.length;i++){
  26.         //     var smallImg = imgs[i];
  27.         //     smallImg.onclick = function () {   
  28.         //         // 把点击的小图 src 赋值 大图
  29.         //         bigImg.src = this.src;
  30.         //         // 先把之前拥有class为active的全部 移除掉
  31.         //         for(var j = 0;j < imgs.length;j++){
  32.         //             imgs[j].classList.remove("active");
  33.         //         }
  34.         //         // 把点击的元素添加类名
  35.         //         this.classList.add("active");
  36.         //     }
  37.         // }
  38.  
  39.         // 2
  40.  
  41.         // for (let i = 0; i < imgs.length; i++) {
  42.         //     var smallImg = imgs[i];
  43.         //     // 找一个中间变量 来记录当前高亮的
  44.         //     var previous = imgs[0];// 第一个高亮 指定第一个img对象
  45.         //     smallImg.onclick = function () {
  46.         //         // 当高亮和点击的是同一个元素时  不执行
  47.         //         if(previous == this)
  48.         //             return;
  49.         //         // 把点击的小图 src 赋值 大图
  50.         //         bigImg.src = this.src;
  51.         //         // 把点击的元素添加类名
  52.         //         this.classList.add("active");
  53.         //         // 把之前高亮的移除
  54.         //         previous.classList.remove("active");
  55.         //         // 改变高亮元素 为当前点击的元素
  56.         //         previous= this;
  57.         //     }
  58.         // }
  59.  
  60.  
  61.  
  62.         // 3.
  63.         for (let i = 0; i < imgs.length; i++) {
  64.             var smallImg = imgs[i];
  65.             // 找一个中间变量 来记录当前高亮的
  66.             var previous = imgs[0];// 第一个高亮 指定第一个img对象
  67.             smallImg.onclick = function () {
  68.                 // 当高亮和点击的是同一个元素时  不执行
  69.                 if(previous == this)
  70.                     return;
  71.                 // 把点击的小图 src 赋值 大图
  72.                 bigImg.src = this.src;
  73.                 // 把点击的元素添加类名
  74.                 imgs[i].classList.add("active");
  75.                 // 把之前高亮的移除
  76.                 previous.classList.remove("active");
  77.                 // 改变高亮元素 为当前点击的元素
  78.                 previous= this;
  79.             }
  80.         }

6.关于变量的问题

       全局变量要等循环结束才能确定其值

  1.  
  2.         // Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
  3.  
  4.         var lis = document.querySelectorAll("li");
  5.  
  6.         for(var i = 0;i < lis.length;i++){
  7.             
  8.             var li = lis[i];
  9.  
  10.             li.onclick = function () {
  11.                 // console.log(lis[i].innerText);// 此处会报错 因为i是全局变量 要等到循环结束才能确定其值
  12.                 console.log("i ===== ",i);//  ==  4
  13.             }
  14.  
  15.         }
  16.  
  17.         // 怎么解决呢 
  18.         // 把var  换成 let  
  19.         // (立即执行函数和闭包来解决)
  1.   <div>
  2.         <input type="text"> <button> + </button>
  3.         <div class="box"></div>
  4.     </div>
  5.     <script>
  6.         // innerHTML 
  7.         // create  append
  8.  
  9.         var btn = document.querySelector("button");
  10.  
  11.         // var div = document.querySelector("div");
  12.         // btn.onclick = function () {
  13.         //     // 往父元素中添加子元素 通过innerHTML的方式  会导致父元素的所有绑定的事件被注销
  14.         //     div.innerHTML += "<input type='text'> <button> -- </button>"
  15.         // }
  16.  
  17.         var div = document.querySelector(".box");
  18.         var num = 0;
  19.  
  20.         // 1.
  21.         // btn.onclick = function () {
  22.         //     if (num < 5) {
  23.         //         div.innerHTML += "<input type='text'> <button> -- </button> <br/>"
  24.         //     }
  25.         //     else{
  26.         //         // alert("num的值是:",num);
  27.         //         console.log("num == ",num);
  28.         //     }
  29.         //     num++;
  30.         // }
  31.  
  32.  
  33.         // 2.
  34.         btn.onclick = function() {
  35.             var section = document.createElement("section");
  36.             // var input = document.createElement("input");
  37.             // var button = document.createElement("button");
  38.             // button.innerText = " - ";
  39.             // section.appendChild(input);
  40.             // section.appendChild(button);
  41.  
  42.             section.innerHTML += "<input type='text'> <button class='del'> -- </button> <br/>"
  43.             div.appendChild(section);
  44.         }
  45.         var delbtns = document.querySelectorAll(".del");
  46.         console.log(delbtns.length);
  47.  
  48.         // 注意代码执行的顺序 
  49.         // 此时删除按钮点击无效 
  50.         // 
  51.         for (const btn of delbtns) {
  52.             btn.onclick = function () {
  53.                 console.log(" ====== ");
  54.             }
  55.         }
  56.  
  57.  
  58.     </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/93091
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号