首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何隐藏几个类,但在用JS DOM单击后单独隐藏。JS的新特性&经历了一段艰难的时光

隐藏几个类并在单击后单独隐藏是通过JavaScript DOM操作实现的。下面是完善且全面的答案:

在JavaScript中,可以使用classList属性来操作HTML元素的类。要隐藏一个元素,可以将其对应的类设置为隐藏的样式,比如设置display属性为none。要隐藏多个元素,可以给它们共同的类名,并通过classList来添加或移除这个类名。

下面是具体步骤:

  1. 为需要隐藏的元素添加共同的类名,比如"hide"。
  2. 使用document.querySelectorAll方法来选取所有拥有这个共同类名的元素。
  3. 遍历选中的元素列表,使用classList.add方法来给每个元素添加一个点击事件监听器。
  4. 在事件监听器内部,使用this关键字来表示被点击的元素本身。
  5. 使用classList.remove方法来移除被点击元素的共同类名,实现单独隐藏的效果。

下面是示例代码:

代码语言:txt
复制
// HTML
<!-- 隐藏的元素 -->
<div class="hide">元素1</div>
<div class="hide">元素2</div>
<div class="hide">元素3</div>

// JavaScript
// 获取所有需要隐藏的元素
const hiddenElements = document.querySelectorAll('.hide');

// 给每个元素添加点击事件监听器
hiddenElements.forEach(element => {
  element.addEventListener('click', function() {
    // 隐藏被点击的元素
    this.classList.remove('hide');
  });
});

这样,当点击每个被隐藏的元素时,该元素将会单独隐藏。

关于JS的新特性,经历了一段艰难的时光,JavaScript在不断演进中引入了很多新特性来改善语言本身的功能和性能。例如,ES6(ECMAScript 2015)引入了let和const关键字、箭头函数、模板字符串、解构赋值等特性。ES7(ECMAScript 2016)引入了async/await关键字用于处理异步操作。ES8(ECMAScript 2017)引入了async迭代器、SharedArrayBuffer、Atomics等特性。此外,ES9(ECMAScript 2018)和ES10(ECMAScript 2019)也带来了许多新的功能和语言改进。

以上是隐藏几个类并在用JS DOM单击后单独隐藏的解决方法,希望能对您有所帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQuery 入门学习(一)

web前端 Jquery     写这个之前要先抱歉一下,由于我这段时间要做一个网站,而且比较重要,所以之前那个gh0st文章先停一段时间,实在没有功夫写那个代码,不过迟早是会继续写...这快一个礼拜在家里,不停地在前端和php上花忙。收获可以说颇丰,Jquery、ajax、css、php基本上现在用还比较熟悉。...又有很多特性是它独有的。...Jquery最大特点是方便对DOM封装。什么是DOMDOM就是操作html文件树结构方法,我们看图片。    ...我们点击按钮就能看到,“离别歌”三个字变成了红色。 隐藏和显示和动画效果     Jquery自带了一些动画效果,通过一些参数就能显示出来。

1.6K11

H5 直播避坑指南

解决方案: 1.在弹出会显示在视频上方dom时候暂停视频播放 2.将视频所在dom父元素高度设为1 3.处理完弹出事件将视频所在父元素高度还原 4....在iOS都会默认显示,不能通过js控制,但是可以通过css样式将其隐藏 video::-webkit-media-controls-start-playback-button {...在拉起键盘输入弹幕时候,键盘不受控制还是竖屏显示 如果页面不涉及与原生组件交互,那么这种方案是一种很可行且兼容性比较好方案 2.用户在点击全屏时,通过js api来控制webview旋转横屏...注: 之前我们发现x5插入了一段js来劫持视频全屏事件 ? 满足条件video标签全屏时都会被X5接管,另外调用webkitEnterFullscreen方法时,X5也会接管播放器。...如果发现在x5内核下无法使用伪全屏而被浏览器接管,可以咨询下x5同事为你域名开启白名单,不接管你域名下视频播放 总结: 在经历过各种优化和调整,我们可以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物

2.8K90
  • 每天10个前端小知识 【Day 18】

    当然,以后事情谁都说不准,说不定以后网速都是每秒几个G,网页加载速度完全就忽略不计,说不定就会支持。 8.js和css是如何影响DOM树构建?...所以说 JavaScript 脚本是依赖样式表,这又多了一个阻塞过程。 总结:通过上面三点分析,我们知道 JavaScript 会阻塞 DOM 生成,而样式文件又会阻塞js执行。...浏览器将会把DOM树和样式规则组合在一起(DOM元素和样式规则匹配)将会合建一个渲染树(Render Tree),渲染树类似于DOM树,两者别还是很大:渲染树能识别样式,渲染树中每个节点(NODE...一旦渲染树构建完毕,浏览器就可以根据渲染树来绘制页面。...样式文件中background-image引入图片,如果匹配不到DOM元素,图片不会加载 伪引入background-image,比如:hover,只有当伪被触发时,图片才会加载

    14610

    几个CSS概念你了解吗?

    为了解决冲突就需要进行模块化区分,没有命名冲突,更好让组件间沙箱化,而CSS Module就是css模块化实现方式之一 CSS Module 在打包时候会将名转换成带有hash值名,...在国外很吃香,因为自定义属性强且名语义话强,你再也不用为取class名字很犯愁(毕竟单独一个组件开发我们就可能需要n个),自定义就像搭积木一样,国内争议比较大,早期原子类在国内基本被喷,到2020...年却态度有所改观。...最早期实现方式应该就是iframe,iframe自带天然隔离,但是这种方式局限性也很多,还有就像上文我们提及几个点,比如 scoped CSS:通过定义属性scoped来就能结合 DOM 树限制...重新添加载入子项目的标签来实现 shadow DOM:你可以理解为domdom,是 Web components一个重要属性,它允许将隐藏 DOM 树附加到常规 DOM 树中,弊端就是兼容性较差

    1.6K20

    前端面试之JavaScript(总结)

    URL 302——请求网页被转移到一个地址,客户访问仍继续通过原始URL地址,重定向,URL会在response中Location中返回,浏览器将会使用URL发出新Request。...5**(服务端错误):服务器不能正确执行一个正确请求 500 - 服务器遇到错误,无法完成请求 502 - 网关错误 503:由于超载或停机维护,服务器目前无法使用,一段时间可能恢复正常 7.描述浏览器渲染过程...,DOM书和渲染树区别 浏览器渲染过程: 解析HTML构建DOM,并行请求css、image、js css文件下载完成,开始构建CSSOM(CSS树) CSSOM构建结束,和DOM一起生成Render...Tree(渲染树) 布局(layout):计算出每个节点在屏幕中位置 显示:通过显卡把页面画到屏幕上 DOM树和渲染树区别 DOM树与HTML标签一一对应,包括head和隐藏元素 渲染树不包括head...和隐藏元素,大段文本每一个行都是独立节点,每一个独立节点都有对应css属性 8.如何最小化重绘(repaint)和回流(reflow) 需要创建多个DOM节点时,使用DocumentFragment

    1K20

    多种前端框架优缺点「建议收藏」

    这一特点使得JQuery代码无比优雅。 9、隐式迭代:当用JQuery找到带有“.myClass”全部元素,然后隐藏他们时。无需循环遍历每一个返回元素。...11、丰富插件支持:JQuery易扩展性,吸引来自全球开发者来编写JQuery扩展插件。目前已经有超过几百种官方插件支持,而且还不断有插件面试。...这可能会影响到开发者已经编写好代码或插件。 2、插件兼容性:与上一点似,当新版jQuery推出,如果开发者想升级的话,要看插件作者是否支持。...缺点: 新生儿:Vue.js是一个项目,没有angular那么成熟。 影响度不是很大:google一下,有关于Vue.js多样性或者说丰富性少于其他一些有名库。...缺点: 1.angular 入门很容易 深入概念很多, 学习中较难理解. 2.文档例子非常少, 官方文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来, 或直接问

    3.6K20

    介绍个前端框架,不是Bootstrap!

    实际效果 虽前面讲可能复杂,抛开文字看看效果,这就是Material Design效果 materializecss代码举例 举个多选例子吧 这里就只贴一下那个多选框需要代码 它实现机制和...Bootstrapjs组件一样(单从这个多选框它更像select2),需要引入一个JS,然后自动绑定这个select,隐藏它并创建假更好看一组标签来实现用户交互功能,在用户交互之后更新这个select...中一定要注意React Virtual DomDom管理和materializecss中JQueryDom操作之间冲突。...materializecss并没有很神奇高科技,甚至可以说使用JQuery操作Dom有点过时,这并不能掩盖它优点,更好看,更好交互体验。...前端外延有几个大块:后端-如何更好地实现业务;项目管理-如何按时按预期交付;测试-如何保证交付质量;产品交互及美术-如何保证用户体验。就是最后这一点,美感对前端来讲很重要。

    2.2K100

    不再支持 IE,React 特性详细解读

    正式发布之路 在深入了解所有特性之前,我们先来回顾一下 React 18 发布背后整个过程,因为与之前版本相比这一次发布经历非常独特。React 17 并没有带来很多特性。...然而它改进了很多基础组件,支持 React 特性无缝渐进采用,从而为未来更新奠定基础。这些更改效果现在就体现在 React 18 中。...重大更改 由于并发特性是渐进适配并按需启用,React 18 中重大更改仅限于几个简单 API 更改,以及对 React 中多个行为稳定性和一致性一些改进。...它允许并发渲染,即同时在后台准备多个版本 UI。这意味着更好性能和更平滑状态转换。 虽然并发似乎只是一个实现细节,其实它是大多数特性动力源泉。...要知道何时使用 transition,你必须更好地了解用户是如何与你应交互。例如,在字段中键入或单击按钮是用户期望立即获得响应操作——响应可能是出现在文本字段中一个值,或是要打开某个菜单。

    2K30

    前端学习资料整理

    ES6特性 定义变量let(替换var),const(定义常量,不能改变值变量),块级作用域,无变量提升; 箭头函数,前边是参数,后边为函数处理逻辑; 函数定义方法; 定义方法...所以如果 JSX 中含有转义实体字符比如 © (©) 最后显示到 DOM 中不会正确显示,因为 React 自动把 © 中特殊字符转义。...[ Chrome:Blink(WebKit分支)] 详细文章:浏览器内核解析和对比 html5有哪些特性、移除了那些元素?如何处理HTML5标签浏览器兼容问题?...CSS3有哪些特性?...解释一下这2个伪元素作用。 单冒号(:)用于CSS3伪,双冒号(::)用于CSS3伪元素。 如何修改chrome记住密码自动填充表单黄色背景 ?

    3.5K20

    极意 · 代码性能优化之道

    V8 在将解释 JavaScript 代码编译为实际机器码时会利用“隐藏”。...如果再次向该对象添加属性,则会发生相同过程:创建隐藏,并具有以前属性作为偏移量: obj.age = 20 这个隐藏概念不仅可以绕过字典查找,还允许在创建或修改类似对象时重用已创建...比如,我再创建一个空对象: const obj2 = {} 此时V8 不会重复创建一个隐藏,而是直接复用隐藏C01: 当给 obj2 添加属性时(不同于 obj),才会创建隐藏,...比如: obj2.time = '2022' 这里可以看出,隐藏特性 动态增删对象属性,会导致隐藏同步增删 不同对象如果具有的属性一致,可以共享隐藏,避免重复创建 所以优化思路就很明显: 我们要避免...正常页面渲染一般会经历:JavaScript运行 => 样式计算 => 布局 => 绘制 => 合成 几个步骤,但是 JS 可以强制将样式计算和布局提前到当前任务当中,这就是强制同步。

    9610

    因为搞不懂V8页面渲染机制,我被女朋友鄙视

    网页渲染流程 上面介绍渲染引擎各个模块,那么一张网页,要经历怎样过程,才能展示给用户。...引擎执行才继续DOM创建 2.从DOM树到构建WebKit绘图上下文 2.1 CSS文件被CSS解释器解释成内部表示; 2.2 CSS解释器完成工作,在DOM树上附加样式信息,...3.其次,执行编译代码为JavaScript构建JS对象,这需要Runtime来辅组创建对象,并需要从Heap分配内存。...隐藏与内嵌缓存 隐藏 在执行C++代码时,仅凭几个指令即可根据偏移信息获取变量信息,而JavaScript里需要通过字符串匹配来查找属性值,这就需要更多操作才能访问到变量信息,而代码量变量存取是十分频繁...示例如下: 例子解释 - 使用Point构造两个对象p和q,这两个对象具有相同属性名,V8将它们归为同一个组,也就是隐藏,这些属性在隐藏中有相同偏移值,p和q共享这一信息,进行属性访问时,只需根据隐藏偏移值即可

    57110

    我碰到那些面试题js及es6(1)

    es6是一个标准,它包含了许多语言特性和库,是JS最实质性一次升级。...Jsonp原理就是利用浏览器可以动态地插入一段js并执行特点完成。...如何理解虚拟dom 在用JS对象表示DOM结构,当页面状态发生变化而需要操作DOM时,我们可以先通过虚拟DOM计算出对真实DOM最小修改量,然后再修改真实DOM结构(因为真实DOM操作代价太大)。...虚拟dom更像是jsdom之间一个缓存,js构建虚拟dom树,视图变化时构建虚拟dom树,比较两者之间差别,把差异地方打进dom。不需要重新渲染整个dom树。...display:none和visibility:hidden区别 如果给一个元素设置display: none,那么该元素以及它所有后代元素都会隐藏隐藏元素无法点击,无法使用屏幕阅读器等辅助设备访问

    2.3K21

    浏览器是如何工作:Chrome V8让你更懂JavaScript

    ---- 隐藏和内联缓存 JavaScript 是一门动态语言,其执行效率要低于静态语言,V8 为了提升 JavaScript 执行速度,借鉴很多静态语言特性,比如实现 JIT 机制,为了提升对象属性访问速度而引入了隐藏...有隐藏之后,那么当 V8 访问某个对象中某个属性时,就会先去隐藏中查找该属性相对于它对象偏移量,有偏移量和属性类型,V8 就可以直接去内存中取出对应属性值,而不需要经历一系列查找过程,...重新构建隐藏 给一个对象添加属性,删除属性,或者改变某个属性数据类型都会改变这个对象形状,那么势必也就会触发 V8 为改变形状对象重建隐藏。...但是针对函数中一段代码,如果对象隐藏是不同,那么反馈向量也会记录这些不同隐藏,这就出现多态和超态情况。我们在实际项目中,要尽量避免出现多态或者超态情况。...,则将性能敏感代码放到一个嵌套函数中); 在优化避免在方法中修改隐藏

    1.3K41

    浏览器是如何工作:Chrome V8 让你更懂 JavaScript

    ---- 隐藏和内联缓存 JavaScript 是一门动态语言,其执行效率要低于静态语言,V8 为了提升 JavaScript 执行速度,借鉴很多静态语言特性,比如实现 JIT 机制,为了提升对象属性访问速度而引入了隐藏...有隐藏之后,那么当 V8 访问某个对象中某个属性时,就会先去隐藏中查找该属性相对于它对象偏移量,有偏移量和属性类型,V8 就可以直接去内存中取出对应属性值,而不需要经历一系列查找过程,...重新构建隐藏 给一个对象添加属性,删除属性,或者改变某个属性数据类型都会改变这个对象形状,那么势必也就会触发 V8 为改变形状对象重建隐藏。...但是针对函数中一段代码,如果对象隐藏是不同,那么反馈向量也会记录这些不同隐藏,这就出现多态和超态情况。我们在实际项目中,要尽量避免出现多态或者超态情况。...,则将性能敏感代码放到一个嵌套函数中); 在优化避免在方法中修改隐藏

    86720

    聊聊未来前端时代

    或者其它?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术变化将不会像原来一样具有颠覆性。   ...例如CoffeeScript虽然最终没有形成JavaScript开发标准,EcmaScript 6却借鉴其中很多优秀特性;或者目前生成Virtual DOM衍生脚本语法,未来也是有可能被列入到JavaScript...1.2 应用开发技术趋于稳定并将等待下一次革新   从前端应用开发框架上来看,先后经历DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*阶段,逐步解决前端开发效率、设计模式、...这些却仍然给了我们很多未来技术实现可能,并且未来较多技术也会在这些特性基础上优化或改进产生。...,例如目前VR直播也成为了一个行业内热点技术,而且极有可能成为一种媒体内容表现形式出现在用户浏览器上。

    66830

    前端基础:jQuery

    ", "#ccc"); jQuery Function 访问和操作 DOM 元素 控制页面样式 对页面事件进行处理 扩展 jQuery 插件 与 Ajax 技术完美结合 jQuery 能做 JavaScript...也都能做,使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小,压缩只有 100 KB 左右 强大选择器 出色 DOM 封装 可靠事件处理机制 出色浏览器兼容性...jQuery Usage jQuery 作为一个单独存在 js 文件,并不会与其他 js 文件发生冲突 ...改变元素宽和高(带动画效果) show(speed):显示 hide(speed):隐藏 toggle(speed) 等价于 show + hide:显示隐藏隐藏显示 可选 speed 参数规定隐藏...addClass() 为元素添加样式 removeClass() 将元素样式移除 toggleClass() 样式切换;有->无,无->有 div{ width

    13.5K20

    浏览器是如何工作:Chrome V8让你更懂JavaScript

    ---- 隐藏和内联缓存 JavaScript 是一门动态语言,其执行效率要低于静态语言,V8 为了提升 JavaScript 执行速度,借鉴很多静态语言特性,比如实现 JIT 机制,为了提升对象属性访问速度而引入了隐藏...有隐藏之后,那么当 V8 访问某个对象中某个属性时,就会先去隐藏中查找该属性相对于它对象偏移量,有偏移量和属性类型,V8 就可以直接去内存中取出对应属性值,而不需要经历一系列查找过程,...重新构建隐藏 给一个对象添加属性,删除属性,或者改变某个属性数据类型都会改变这个对象形状,那么势必也就会触发 V8 为改变形状对象重建隐藏。...但是针对函数中一段代码,如果对象隐藏是不同,那么反馈向量也会记录这些不同隐藏,这就出现多态和超态情况。我们在实际项目中,要尽量避免出现多态或者超态情况。...,则将性能敏感代码放到一个嵌套函数中); 在优化避免在方法中修改隐藏

    1.3K41

    前端入门6-JavaScript客户端api&jQuery

    基础语法 如果有一定 Java 基础,那么,只需了解下一些基础 JS 语法,便可开始学习相关客户端 API,熟悉,足够编写 JS 代码来操作 DOM,达到动态网页效果。...以上基本语法了解,至少就知道如何声明变量、函数、对象,如何使用了,这就足够了,那么接下去就是熟悉下客户端 API,也可以说是浏览器按照标准提供各 API 使用。...那么,不同浏览器厂商实现可能就会有所不同,比如 W3C 规定一系列操纵 DOM API 接口,浏览器不想全部实现,就实现其中核心部分,或者就算实现,具体表现也有可能有所不同。...jQuery 为什么使用 jQuery 类似于 JVM 隐藏不同操作系统之间差异,让开发能够更专注于功能实现,而不必花费过多时间适配不同操作系统。...jQuery 隐藏不同浏览器之间差异,减少开发者花费在适配不同浏览器之间精力。

    6K40

    聊聊未来前端时代

    未来前端在已经趋向成熟技术方向上面将会慢慢稳定下来,并进入技术迭代优化阶段,例如语言标准、前端框架等。这并不代表前端领域技术就此稳定,因为技术方向已经出现,并在等待着下一个风口到来。...或者其它?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术变化将不会像原来一样具有颠覆性。...例如CoffeeScript虽然最终没有形成JavaScript开发标准,EcmaScript 6却借鉴其中很多优秀特性;或者目前生成Virtual DOM衍生脚本语法,未来也是有可能被列入到JavaScript...1.2 应用开发技术趋于稳定并将等待下一次革新 从前端应用开发框架上来看,先后经历DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*阶段,逐步解决前端开发效率、设计模式、DOM...,例如目前VR直播也成为了一个行业内热点技术,而且极有可能成为一种媒体内容表现形式出现在用户浏览器上。

    1.3K90

    JavaScript工作原理:V8引擎内部机制及优化代码5个技巧

    -engine-5-tips-on-how-to-write-optimized-code-ac089e62b12e 几个星期前,我们开始一系列旨在深入挖掘 JavaScript 及其工作原理系列:...当代码运行一段时间之后,分析器线程已经收集到了足够数据,知道应该优化哪个方法。 接下来,Crankshaft优化从另一个线程开始。...每次将属性添加到对象时,旧隐藏都会更新为指向隐藏转换路径。 隐藏转换非常重要,因为它们允许在以相同方式创建对象之间共享隐藏。...每次将属性添加到对象时,旧隐藏都会更新为指向隐藏转换路径。 隐藏转换非常重要,因为它们允许在以相同方式创建对象之间共享隐藏。...事实证明,这个管道实现更高性能提升,并显著节省了内存开销。

    2.3K20
    领券