4.4 -蓝桥杯- 课程列表- event.stopPropagation()和event.preventDefault()区别-蓝桥知识网页面的搭建-搜一搜-折叠手风琴(功能的实现)

本文链接：https://blog.csdn.net/weixin_69333225/article/details/129960749

文章介绍了蓝桥杯课程列表的实现，包括数据的获取、分页逻辑和价格转换。同时，讲解了event.stopPropagation()和event.preventDefault()的区别，前者阻止事件冒泡，后者阻止默认行为。此外，还展示了蓝桥知识网页面的HTML结构和内容布局。

摘要由CSDN通过智能技术生成

4.4 -蓝桥杯- 课程列表- `event.stopPropagation()`和`event.preventDefault()`区别-蓝桥知识网页面的搭建-搜一搜-折叠手风琴(功能的实现)

一.学习内容

1.1 课程列表

在这里插入图片描述

知识点：toFixed（小数位数）：数字转换为字符串，四舍五入到指定的小数位数

let sum = 5900 //需转化成59.00元
let newsum=(5900/100).toFixed(2)
console.log(newsum)//59.00

解题过程：

1.首先创建函数pageFn()，需要添加最大页数，和当前页的结构。

2.再次创建函数datapage通过axios获取数据，计算出最大页数，将计算出的最大页数maxPage和当前页传递给pageFn()动态渲染到页面

3.获取每一页需要展示的数据，在所有数组中进行选择，利用slice方法。由于每页需要展示五条数据，第一页获取1-5，第二页获取5-10.可以得出（当前页-1）x5 —当前页x5.

4.接着遍历每页获取的数据将其动态渲染到页面

5.在点击上一页判断当前页是否等于1，如果等于1，当前页就不变，并且禁用此按钮this.classList.add('disabled')；不等于1，当前页减-1. 并在此函数中调用datapage函数，重新获取数据列表，更新页面。点击下一页同理；

let pageNum = 1; // 当前页码，默认页码1
let maxPage; // 最大页数

// TODO：待补充代码
function pageFn(){
  //渲染总页数和当前页
  document.querySelector('#pagination').innerHTML=`共${maxPage}页,当前${pageNum}页`
}
//存储所有数据的数组
let arr=[]
function datapage(){
  //获取所有数据
  axios.get('js/carlist.json').then(res=>{
    arr=res.data
    //获取最大的页数
    maxPage=Math.ceil(arr.length/5)
    //调用函数传递当前获取的最大页数和当前页
    pageFn(pageNum,maxPage)
    //获取每页的数据
    let onepagedata=arr.slice((pageNum-1)*5,pageNum*5)
    //渲染数据列表，对每页的数据进行循环遍历，并动态渲染到页面
    document.querySelector('#list').innerHTML=onepagedata.map((item)=>
    ` <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">${item.name} uni-app</h5>
        <small>${(item.price/100).toFixed(2)}元</small>
      </div>
      <p class="mb-1">${item.description}
      </p>
    </a>
  </div>`)
  })
}
datapage()
// 点击上一页
let prev = document.getElementById("prev");
prev.onclick = function () {
  next.classList.remove('disabled')
  console.log(this)
  // TODO：待补充代码
  if(pageNum != 1){
    pageNum--;
  }else{
    pageNum==1
    this.classList.add('disabled')
  }
//重新获取数据
datapage()
};
// 点击下一页
let next = document.getElementById("next");
next.onclick = function () {
  prev.classList.remove('disabled')
  // TODO：待补充代码
  if(pageNum !=maxPage){
    pageNum++
  }else{
    pageNum=maxPage
    this.classList.add('disabled')
  }
  //重新获取数据
  datapage()
};

1.2 `event.stopPropagation()`和`event.preventDefault()`区别

1.event.stopPropagation()：阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行如果点击一个连接，这个连接仍然会被打开。

2.event.preventDefault()：阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

例如：

<div class="box">
	<a href="http://www.baidu.com" target="_blank"></a>
</div>

//阻止冒泡：
			$(".box a").click(function(event){
				event.stopPropagation();//不会打印1，但是页面会跳转；			
			});
			$(".box").click(function(){
				console.log("1")；				
			});

//阻止默认事件
			$(".box a").click(function(event){			
				event.preventDefault();//页面不会跳转，但是会打印出1，
			})；
			$(".box").click(function(){
				console.log("1")；				
			});

1.3蓝桥知识网页面的搭建

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>蓝桥知识网</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <!--TODO：请补充代码-->
    <div class="Countainer">
      <div class="headCountainer">
        <div class="headtitle">
          <span style="font-size: 18px;">蓝桥知识网</span>
          <div class="headright">
            <span>首页</span>
            <span>热门技术</span>
            <span>使用手册</span>
            <span>知识库</span>
            <span>练习题</span>
            <span>练习我们</span>
            <span>更多</span>
          </div>
        </div>
        <div class="big">蓝桥云课</div>
        <div class="moudle">随时随地丰富你的技术栈！</div>
        <div class="small">加入我们</div>
      </div>
      <div class="contentCountainer">
        <div class="content">
          <div class="proportion">
            <div class="title">人工智能</div>
            <div class="skecal">
              人工智能亦称智械、机器智能，指由人制造出来的机器所表现
              出来的智能。 通常人工智能是指通过普通计算机程序来呈现人
              类智能的技术。
            </div>
          </div>
          <div class="proportion">
            <div class="title">前端开发</div>
            <div class="skecal">
              前端开发是创建 WEB 页面或 APP 等前端界面呈现给用户的过程，
              通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、
              解决方案，来实现互联网产品的用户界面交互。
            </div>
          </div>
          <div class="proportion">
            <div class="title">后端开发</div>
            <div class="skecal">
              后端开发是实现页面的交互逻辑，通过使用后端语言来实现页面的
              操作功能，例如登录、注册等。
            </div>
          </div>
          <div class="proportion">
            <div class="title">信息安全</div>
            <div class="skecal">
              ISO（国际标准化组织）的定义为：为数据处理系统建立和采用的技术、
              管理上的安全保护，为的是保护计算机硬件、软件、数据不因偶然和恶意
              的原因而遭到破坏、更改和泄露。
            </div>
          </div>

        </div>
    </div>
    <div class="footer">
      <div class="footercontent">
        <div>© 蓝桥云课 2022</div>
        <div style="margin-top: 10px;">京公网安备 11010102005690 号 | 京 ICP 备 2021029920 号</div>
      </div>
    </div>
  </div>
  </body>
</html>

.Countainer{
    margin: 0;
    padding: 0;
}
.headCountainer{
    width: 100%;
    height: 486px;
    background-color: #a6b1e1;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.headtitle{
    display: flex;
    width: 1024px;
    height: 46px;
    justify-content: space-around;
    color: white;
    margin-top: 19px;
}
.headright{
    display: flex;
    width: 500px;
    justify-content: space-between;
    font-size: 16px;
}
.big{
    display: block;
    font-size: 45px;
    color: black;
    margin-top: 30px;
}
.moudle{
    display: block;
    color: white;
    font-size: 21px;
    font-weight: 200;
    margin-top: 62px;
}
.small{
    color: #efbfbf;
    border: 2px solid #efbfbf;
    font-size: 18px;
    margin-top: 36px;
    height: 45px;
    width: 120px;
    line-height: 45px;
    text-align: center;
    box-shadow: inset 0 0 0 2px #efbfbf;
}
.contentCountainer{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    height: 378px;
}
.content{
    width: 1024px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 74px;
    height: 302px;
}
.proportion{
  width: 452px;
  height: 144px;
  line-height: 1.4;
}
.title{
    font-size: 30px;
    font-weight: 200;
    color: black;
}
.skecal{
 font-size: 18px;
 color: #aaa;
}
.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-top: 1px solid #aaa;
}
.footercontent{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1024px;
    height: 80px;
    margin-top: 30px;
    font-size: 14px;
    color: #aaa;
}

1.4搜一搜

思路：该题主要考察过滤器filter()方法的使用

filter用于对数组进行过滤，它会创建一个新数组，不会改变原数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

Array.filter(function(currentValue, indedx, arr), thisValue)

 computed: {
          filteredList() {
            // TODO: 请补充代码
            return this.postList.filter(item=>
           // 过滤条件，过滤含有this.search搜索的内容的所有图片
            item.title.includes(this.search));
          },
        },

1.5 折叠手风琴(功能的实现)

功能：点击当前的图片就会展开，其他图片就会折叠

在这里插入图片描述

方法一，利用jQuery方法实现**，使用siblings() 方法，它的作用它会获取被选元素的所有同级元素**

在这里插入图片描述

方法二：使用原生js

var dianji=document.querySelectorAll('.options .option')//使用dianji数组接受options下的option
        for(let i=0;i<dianji.length;i++){//使用for循环，绑定点击事件
           dianji[i].onclick=function(){
               //再次进行循环遍历是将除当前点击的元素，都进行移除active，先当于jQuery的siblings() 方法
               for(let j=0;j<dianji.length;j++){
                   //将所有的option 重载，相将所有的calssName,修改成option
                   dianji[j].className="option"
               }
               //将当前点击的div加上active
               dianji[i].className="option active";
                 break;//跳出循环
        }
    }

二.学习总结

今天做了蓝桥杯，课程列表，蓝桥知识网页面的搭建，搜一搜，折叠手风琴(功能的实现)以及扩展学习event.stopPropagation()和event.preventDefault()区别。难点：课程列表翻页的制作，如何在所有数据中得出每个页面的数据，通过分析第一页1-5，第二页5-10.可以得知是(当前页数-1)x5-当前页数x5.通过slice方法进行获取。在之前就已经做过类似的题目在理解起来还是比较容易的。今天所做的题在之前都做过类似的，还是比较简单的，今天学习比较顺利，学习状态良好。