2020-10-17(数组应用)

数组简单的实际应用

一、问题描述

本次demo的目的是对前面的数组各项方法的一次实际演练，这个demo主要最终可以为我们展示的效果是有两个：一个是过滤（筛选出来男性、女性），或者是实现一个模糊的搜索（可以在输入框中输入姓来进行查找）

二、样式布局

首先我们先要进行布局

分析：html：观察上面的最终显示的效果，我们可以非常简单的想到分为两个结构，一个是上面的过滤区域，一个是下面的一个下拉列表，它在未添加样式之前的效果是这样的。

加下来我们为他们添加样式
分析：巧妙地设置使得img元素绝对定位，脱离原来的位置，然后为父级li元素设置padding值来空出img元素的位置，从而巧妙地实现了我们想要的结果。

总体思路：总体思路还是比较简单的，主要是上面有一个布局方面的细节点，其余的样式设定我们根据给出来的设计稿直接对应出来就可以。
js部分：

1. 根据获取到的数据渲染页面
   
   2.通过input标签内输入的信息来渲染
   
   3.为每个span元素绑定事件，并且可以进行切换