蓝桥杯练习题（1）

2. 搜一搜呀

https://www.lanqiao.cn/problems/1762/learning/?page=1&first_category_id=2&second_category_id=11

实现目标：

请完善 index.html 文件，让页面具有如下所示的效果：

filteredList() {
            // TODO: 请补充代码
            return this.postList.filter(item =>item.title.search(this.search)!==-1)
          },

前置知识： 

         search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，查找并返回指定字符串第一次出现的位置。如果没有找到任何匹配的子串，则返回 -1。

       那么就只需加入这句话就可以了，数据都在postList里面，直接return this.postList我们可以得到全部数据，实现与输入框数据同步，我们可以使用filter api进行过滤，在使用search api进行内容匹配。

4. 关于你的欢迎语

https://www.lanqiao.cn/problems/1764/learning/?page=1&first_category_id=2&second_category_id=11

实现目标：

请修复 index.js 文件中存在的 bug，修复完成后，在表单的对应输入框中输入以下内容：

页面效果如下所示：

function generate() {
    subject = document.getElementById("subject");
    event1 = document.getElementById("event1");
    event2 = document.getElementById("event2");
    result = "欢迎用户"+subject.value+"在"+event2.value+"学习"+event1.value+"课程！";
    document.getElementById("result").value = result;
}

删掉if判断加上这句就好了。

5. 卡片化标签页 （考点 Dom）

https://www.lanqiao.cn/problems/1765/learning/?page=1&first_category_id=2&second_category_id=11

实现目标：

请在 index.js 文件中根据现有 DOM 结构（页面布局部分不能做任何修改操作）实现选项卡动态切换功能。

页面效果如下所示：

​

思路：

        通过观察我们不难发现，鼠标点击事件触发，让相对应选项栏和图片内容栏添加上 active类，从而达到展示效果。

 代码：

function init() {
  // TODO 待补充代码

  var tabs = document.getElementsByClassName("tabs")[0].children;
  var card = document.getElementById("content").children;
  for (let index = 0; index < tabs.length; index++) {
    tabs[index].onclick = function () {
      for (let j = 0; j < tabs.length; j++) {
        tabs[j].classList.remove("active");
        card[j].classList.remove("active");
      }
      tabs[index].classList.add("active");
      card[index].classList.add("active");
    };
  }
}

init();