【蓝桥杯Web】第十三届蓝桥杯（Web 应用开发）楼赛 第31期(Web前端)

前言

第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.

---

一、【功能实现】搜一搜呀

1. 题目描述:使用Vue完成以下功能:
   
2. 题目分析:题目和第二次模拟赛类似,还比它简单,想看更难的可以去看菜单树检索.这里直接给出代码了,但这里有一个地方是可以借鉴的,就是对于搜索栏的监控,使用的计算属性,随时获取search的内容,进行搜索.
3. 题目代码

filteredList() {
  // TODO: 请补充代码
  if(this.search==""){
    return this.postList
  }else{
    newPostList = []
    this.postList.forEach(item=>{
      if(item.title.indexOf(this.search) != -1){
        newPostList.push(item)
      }
    })
    return newPostList
  }
},

---

二、【功能实现】折叠手风琴

1. 题目描述:使用JQuery完成以下效果
   
   2.题目分析:题目本身并不难,样式也是题目给写好的,如果用JS写相信大家都会,但是本题要求用JQuery写,就要一起复习以下JQuery中涉及到的知识点,本题涉及到①JQuery入口函数,②获取元素,③操作元素,④排他思想,⑤类名的增删.
   ①JQuery入口函数

$(function(){
//..........
})

②获取元素

名称	用法	描述
ID选择器	$(‘#id’)	获取指定ID的元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(‘.class’)	获取同一类的元素
标签选择器	$(‘div’)	获取同一标签的元素
并集选择器	$(‘div,p,li’)	获取多个元素
交集选择器	$(‘li.current’)	交集元素
子代选择器	$(‘ul>li’)	使用>号,获取亲儿子的层级元素,并不会获取孙子层级的元素
后代选择器	$(‘ul li’')	使用空格,获取儿子孙子等层级的元素

③操作元素

事件	操作
click	鼠标单击
dbclick	鼠标双击
mouseenter	鼠标放上
mouseleave	鼠标移开
keydown	键盘按下
keyup	键盘抬起

④排他思想

$(this).css('color','red').sibling().css('color','')
//等同于,可以减少代码量
$(this).css('color','red')
$(this).sibling().css('color','')

⑤类名的增删

//添加类
$('div').addClass('current')
//移除类
$('div').removeClass('current')
//切换类
$('div').toggleClass('current')

3. 题目代码

$(function(){
    $('.options>div').click(function(){
   		 //也可以简写
        $('.options>div').removeClass('active')
        $(this).addClass('active')
    })
})

三、【代码改错】关于你的欢迎语

1. 题目描述: 修改代码达到以下效果.
   
2. 题目代码

result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程！`

四、【功能实现】新年贺卡

1. 题目描述:根据代码实现如下功能,点击书写贺卡可以展示随机的祝福语
   
2. 题目分析:本题涉及到的知识点包括,随机数的生成以及JS的HTML内容操作

//改变 HTML 内容
document.getElementById(id).innerHTML=新的HTML
//改变 HTML 属性
document.getElementById(id).attribute=新属性值

3. 题目代码

function writeGreeting() {
	// TODO 带补充代码  
	var rad = Math.round(Math.random()*4)
	return greetings[rad]
}
function show(greetingDisplay) {
	// TODO 待补充代码
	greetingDisplay.innerHTML = writeGreeting()
}

五、其他代码都在第二次线上模拟赛