?️ NodeJS专栏:Node.js从入门到精通
?️ 博主的前端之路:前端之行,任重道远(来自大三学长的万字自述)
? 加入社区领红包:海底烧烤店ai(从前端到全栈)
??个人简介:即将大三的学生,一个不甘平庸的平凡人?
? 你的一键三连是我更新的最大动力❤️!
?分享博主自用牛客网?:一个非常全面的面试刷题求职网站,真的超级好用(点击跳转)?
文章目录
前言一、切换Tab栏目二、实现双向绑定(视图与数据绑定)三、查找高频数据类型四、搜索字体高亮五、根据虚拟DOM生成真实DOM结语
前言
最近博主一直在牛客网刷题巩固基础知识,牛客网不仅具有公司真题、专项练习、面试题库、在线编程等功能,还具有非常强大的AI模拟面试功能,简直是求职者的福音!
牛客网里的题库非常全面的,无论你是前端还是后端,是想要备考还是准备面试又或者是想要提高自己,你都能在牛客网上找到适合自己的题,赶快点击链接去注册登录吧:点我进入牛客网
牛客网 | 牛客网 |
---|---|
本篇文章所有示例来自于牛客网题库/在线编程/JS篇
(36-40题),这些都是前端开发中常用的功能,借此记录一下刷题过程,巩固基础
一、切换Tab栏目
补全JavaScript
代码,实现效果如下:
#25bb9b'
,其它栏目背景色位’#fff
’。当选中某个栏目时,下方内容就展示索引值相同的类名为".items
"的"li
"元素 注意:
必须使用DOM0
级标准事件(onclick
)已使用自定义属性存储了栏目的索引值。点击栏目获取索引值,使用索引值控制类名为"items
"下的"li
"元素 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> ul { padding: 0; margin: 0; list-style: none; } .options li { float: left; width: 100px; height: 40px; line-height: 40px; text-align: center; border: solid 1px #ddd; } .items li { width: 405px; height: 405px; display: none; border: solid 1px #ddd; } </style></head><body> <ul class='options'> <li data-type="0" style='background-color: #25bb9b;'>题库</li> <li data-type="1">面试</li> <li data-type="2">学习</li> <li data-type="3">求职</li> </ul> <ul class='items'> <li style="display: block;">牛客题库,包含编程题、选择题等</li> <li>为你的面试提供一站式服务</li> <li>校招学习来牛客</li> <li>求职中有什么难题,可以联系我们</li> </ul> <script> var options = document.querySelector('.options'); var optionItems = [].slice.call(document.querySelectorAll('.options li')); var items = [].slice.call(document.querySelectorAll('.items li')); // 补全代码 options.onclick = function (e) { for (let i in optionItems) { optionItems[i].style.backgroundColor = ""; items[i].style.display = "none" } optionItems[e.target.getAttribute('data-type')].style.backgroundColor = "#25bb9b" items[e.target.getAttribute('data-type')].style.display = 'block' } </script></body></html>
e.target
:获取点击的元素getAttribute
:获取元素指定的属性值
二、实现双向绑定(视图与数据绑定)
补全JavaScript
代码,要求如下:
person
"对象属性发生变化时,页面中与该属性相关的数据同步更新将输入框中的值与"person
"的"weight
"属性绑定且当输入框的值发生变化时,页面中与该属性相关的数据同步更新 注意:
必须使用Object.defineProperty
实现且触发set
方法时更新视图必须使用DOM0
级标准事件(oninput
)可以使用预设代码"_render
"函数 这个案例是在【三、监听对象更新视图(简易vue2响应式功能)】的基础上增加了一个数据双向绑定的功能
<body> <style> ul { list-style: none; } </style> <input type="text"> <ul></ul> <script> var ul = document.querySelector('ul'); var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 }; var inp = document.querySelector('input'); inp.value = person.weight; const _render = () => { var str = `<li>姓名:<span>${person.name}</span></li> <li>性别:<span>${person.sex}</span></li> <li>年龄:<span>${person.age}</span></li> <li>身高:<span>${person.height}</span></li> <li>体重:<span>${person.weight}</span></li>` ul.innerHTML = str; inp.value = person.weight; } _render(ul); // 补全代码 function observe(obj) { if (typeof obj !== "object" || obj == 'null') { return } for (const key in obj) { defineReactive(obj, key, obj[key]) } } function defineReactive(obj, key, value) { Object.defineProperty(obj, key, { get() { return value; }, set(newVal) { if (newVal !== value) { value = newVal _render(ul); } } }) } observe(person) inp.oninput = function () { person.weight = this.value } </script></body>
三、查找高频数据类型
补全JavaScript
代码,要求找到参数数组中出现频次最高的数据类型,并且计算出出现的次数,要求以数组的形式返回。
注意:
object
"当多种数据类型出现频次相同时将结果拼接在返回数组中,出现次数必须在数组的最后 示例:
输入:__findMostType([0,0,'',''])输出:['number','string',2]或['string','number',2]
const _findMostType = array => { // 补全代码 // 先用对象typeObj保存数组里面的类型以及对应出现的频率,maxType保存最大频率数,returnArr为返回的数组 let typeObj = {}; let maxType = 0; let returnArr = []; // 遍历数组 for (let item of array) { // 获取数据类型 let type = item === null ? 'null' : (typeof item === 'function' ? 'object' : (typeof item)); // typeObj中存在该类型时将其频率加一,否者将频率初始化为1 typeObj[type] ? typeObj[type]++ : typeObj[type] = 1; // 更新最大频率 maxType = typeObj[type] > maxType ? typeObj[type] : maxType; } // 遍历对象 for (let key in typeObj) { // 将频率最大的类型放到返回的数组中 if (typeObj[key] == maxType) { returnArr.push(key) } } returnArr.push(maxType) return returnArr}
四、搜索字体高亮
补全JavaScript
代码,实现一个搜索字体高亮的效果。要求如下:
input
框中输入要搜索的内容,当点击查询按钮时,被搜索的字体样式变为加粗,背景色变为’yellow
’重新输入搜索文字,点击查询按钮时,去掉上一次的搜索效果,高亮显示效果只加在本次搜索文字上如果搜索不到相关内容,清除之前的效果 注意:
4. 需要加粗的文字请使用b
标签包裹
5. 必须使用DOM0
级标准事件(onclick
)
<body> <input type="text"> <button style="margin-right: 80px">查询</button> <div class="text" style="margin-top: 70px"> 牛客网隶属于北京牛客科技有限公司,牛客网成立于 2014 年 9 月,是以科技和创新驱动的教育科技公司。牛客网坚持以前沿技术服务于技术、以人工智能和大数据提升学习效率,专注探索在线教育创新模式,致力于为技术求职者提供能力提升解决方案,同时为企业级用户提供更高效的招聘解决方案,并为二者搭建桥梁,构建从学习到职业的良性生态圈。 发展至今,牛客网在技术类求职备考、社群交流、企业招聘服务等多个垂直领域影响力均在行业中遥遥领先,产品矩阵包括IT题库、在线编程练习、线上课程、交流社区、竞赛平台、笔面试服务、ATS系统等,用户覆盖全国高校百万IT学习者并在高速增长中,同时也为京东、百度、腾讯、滴滴、今日头条、华为等200多家企业提供校园招聘、编程竞赛等线上服务,并收获良好口碑。 </div> <script> var text = document.querySelector(".text"); var search = document.querySelector("input"); const btn = document.querySelector("button"); btn.onclick = () => { // 补全代码 let value = search.value; let textValue = text.innerText; text.innerHTML = textValue.replace(new RegExp(value,'g'), `<b style="background-color:yellow">${value}</b>`); } </script></body>
这里我本来想使用replaceAll
,但在牛客上会出现通过不了的情况,于是就使用replace
配合正则表达式来实现:
// replaceAll写法text.innerHTML = textValue.replaceAll(value, `<b style="background-color:yellow">${value}</b>`)
五、根据虚拟DOM生成真实DOM
补全JavaScript
代码,要求将对象参数转换为真实的DOM
结构并返回。
注意:
tag
为标签名称、props
为属性、children
为子元素、text
为标签内容 var vnode = { tag: 'ul', props: { class: 'list' }, text: '', children: [ { tag: "li", props: { class: "item" }, text: '', children: [ { tag: undefined, props: {}, text: '牛客网', children: [] } ] }, { tag: "li", props: {}, text: '', children: [ { tag: undefined, props: {}, text: 'nowcoder', children: [] } ] } ]}const _createElm = vnode => { // 补全代码 const { tag, props, text, children } = vnode; if (tag) { const ele = document.createElement(tag); for (const p in props) { ele.setAttribute(p, props[p]); } ele.innerText = text; children.forEach(child => ele.appendChild(_createElm(child))); return ele; } return document.createTextNode(text)}
这一题没有什么难度,主要就是考察了JS
操作DOM
节点的几个方法:
Document.createElement()
方法用于创建一个由标签名称 tagName
指定的 HTML
元素Element.setAttribute()
设置指定元素上的某个属性值。如果属性已经存在,则更新该值;否则,使用指定的名称和值添加一个新的属性Node.appendChild()
方法将一个节点附加到指定父节点的子节点列表的末尾处Document.createTextNode()
创建一个新的文本节点 结语
这篇文章的所有内容都出自于牛客网的JS篇题库:
牛客网的JS
题库非常贴合实际的,在写的过程中自己查漏补缺,收获了很多,身为前端,之前的我非常迷茫,不知道怎么刷题,后端常刷的算法题又不太适合我,直到发现牛客网,才结束这一现状!牛客网里的题真的是对前端太友好了,强烈将牛客网推荐给大家!
如果本篇文章对你有所帮助,还请客官一件四连!❤️
基础不牢,地动山摇! 快来和博主一起来牛客网刷题巩固基础知识吧!