前言
第十三届蓝桥杯全国软件和信息技术专业人才大赛(软件类)新开了Web应用开发比赛,已经组织了几次模拟赛和楼赛,这里主要记录模拟赛题目和设计的知识点,帮助参赛者更好的复习琐碎的知识点和代码,有写的不对的地方欢迎指教并讨论.
文章目录
- 前言
- 一、【功能实现】搜一搜呀
- 二、【功能实现】折叠手风琴
- 三、【代码改错】关于你的欢迎语
- 四、【功能实现】新年贺卡
- 五、其他代码都在[第二次线上模拟赛](https://blog.csdn/weixin_44337386/article/details/124009772?spm=1001.2014.3001.5502)
一、【功能实现】搜一搜呀
- 题目描述:使用Vue完成以下功能:
- 题目分析:题目和第二次模拟赛类似,还比它简单,想看更难的可以去看菜单树检索.这里直接给出代码了,但这里有一个地方是可以借鉴的,就是对于搜索栏的监控,使用的计算属性,随时获取search的内容,进行搜索.
- 题目代码
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
}
},
二、【功能实现】折叠手风琴
- 题目描述:使用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')
- 题目代码
$(function(){
$('.options>div').click(function(){
//也可以简写
$('.options>div').removeClass('active')
$(this).addClass('active')
})
})
三、【代码改错】关于你的欢迎语
- 题目描述: 修改代码达到以下效果.
- 题目代码
result = `欢迎用户${subject.value}在${event2.value}学习${event1.value}课程!`
四、【功能实现】新年贺卡
- 题目描述:根据代码实现如下功能,点击书写贺卡可以展示随机的祝福语
- 题目分析:本题涉及到的知识点包括,随机数的生成以及JS的HTML内容操作
//改变 HTML 内容
document.getElementById(id).innerHTML=新的HTML
//改变 HTML 属性
document.getElementById(id).attribute=新属性值
- 题目代码
function writeGreeting() {
// TODO 带补充代码
var rad = Math.round(Math.random()*4)
return greetings[rad]
}
function show(greetingDisplay) {
// TODO 待补充代码
greetingDisplay.innerHTML = writeGreeting()
}
五、其他代码都在第二次线上模拟赛
更多推荐
【蓝桥杯Web】第十三届蓝桥杯(Web 应用开发)楼赛 第31期(Web前端)
发布评论