addEventListener/querySelector/Toggle -需要帮助更改颜色，但取消选择其他选项卡 - 腾讯云开发者社区

文章/答案/技术大牛

发布

移除jQuery好像也没那么难

与 jQuery 可以直接对选择的所有元素调用方法不同，在纯 JavaScript 中，你需要使用 NodeList.forEach() 遍历这个 NodeList。...// jQuery // 选择 .box 并将文本颜色更改为 #000 $(".box").css("color", "#000"); // JavaScript // 选择第一个 .box 并将文本颜色更改为...("focus"); box.classList.remove("focus"); box.classList.toggle("focus"); 如果需要同时添加或删除多个类，可以传入多个参数： //...(".container").appendChild(element); 总结以上内容并不是对所有原生 JavaScript 方法的详尽指南，但希望这些实用示例能帮助您更轻松地从 jQuery 过渡到纯...总而言之，我们讨论了以下方法：使用 querySelector 和 querySelectorAll 选择元素使用 addEventListener 监听事件通过 style 属性更新 CSS 和样式

2.6K1 0

JS快速入门（二）

() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 getElementById案例 //获取 id 为 container...()代码示例 //获取被选择器'.box .item'匹配的第一个节点 document.querySelector('.box .item') //获取选择器'div'（标签）匹配的节点 document.querySelector...document.querySelector('.box .item').innerHTML = '项目A' // 更改为 html 内容（p 元素中内容替换为 span 元素） document.querySelector...('active') // [box2] => [box2, active] 节点写入当我们需要更改一个标签的文字或内容时，这时就需要了解节点写入的知识，学会节点写入可以帮助我们更加精确的控制网页内容...，加载窗口，关闭窗口，窗口滚动等，掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果；常用窗口事件方法说明 load 当整个页面及所有依赖资源（如样式表和图片）都已完成加载时，将触发load事件

7.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

JavaScript 编程精解中文第三版十五、处理事件

下面的示例中，文本域在拥有焦点时会显示帮助文本。...有时读者需要取消调度的函数。可以存储setTimeout的返回值，并将作为参数调用clearTimeout。... 选项卡选项卡面板广泛用于用户界面。它支持用户通过选择元素上方的很多突出的选项卡来选择一个面板。本习题中，你必须实现一个简单的选项卡界面。...除了显示一个初始子节点，其他子节点都应该隐藏（将display样式设置成none），并通过点击按钮来选择当前显示的节点。...当它生效时将其扩展，为当前选中的选项卡，将按钮的样式设为不同的，以便明确选择了哪个选项卡。

6.8K2 0

仿手机底部导航栏制作

底部导航栏需要固定在底部、等宽分布、图标垂直排列（图标上，文字下）。这是基本布局。...但这个切换显得太生硬，我想要加入更细腻的体验：点击时图标轻微放大，文字颜色渐变，甚至有“滴”一声的反馈音。...('click', closeMenu); document.querySelector('.popup-menu .cancel').addEventListener('click', closeMenu...尤其是触发条件的精度控制，比如用户手指略微移动该不该取消长按？遮罩点击是否需要防止事件穿透？这些都必须考虑清楚，否则体验会打折。经过这些努力，这个项目的功能已经趋于完整。...例如选中时图标颜色渐变、路径平滑过渡。

1K1 0

AngularDart Material Design 复选框顶

用户可以点击该复选框以选中或取消选中它。通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项，请避免使用单个复选框并使用material-toggle。...我们没有扩展ButtonDecorator，因为我们需要覆盖几个属性，包括role，tabindex，但最重要的是因为checkbox只能与SPACE交互，而button适用于SPACE和ENTER。...true将去检查，false将取消选中。 label String 复选框的标签，或者使用内容。 readOnly bool 是否可以通过用户交互更改复选框。...除非您需要此行为，否则请使用mixin设置themeColor。...checkedChange Stream 选中或取消选中复选框时触发，但设置indeterminate时则不触发。发送checked的状态。

2.6K4 0

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

我们需要通过点击播放按钮来播放或者暂停视频，并且更改应该匹配视频状态的图标。...这实际上为本教程的其他部分定下了基调。我们通常会选择一个视频控件，创建一个实现特定功能的函数，通过事件监听器将其连接起来。我们继续，根据视频状态更新播放按钮。...', updateVolumeIcon); 添加上面的更改后，在你浏览上你可以看到下面的效果：我们需要添加的另一个事件是能够通过单击音量图标使得视频静音和取消静音。...为了让视频全屏（包括控制器），我们需要选择 .video-container 元素，然后询问浏览器去全屏放置它（及其子元素）。...如果你对额外的功能感兴趣，下面是些想法：添加对字幕的支持添加对播放速度的支持添加快速前进或者倒放视频的功能添加选择视频分辨率(720p, 480p, 360p, 240p)的功能我希望本教程对你有帮助

13.2K2 0

C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

常用节点获取方法：名称描述 getElementById() 获取带有指定id的节点 getElementsByTagName() 获取带有指定标签名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点...querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 2....________('div#container') 答案：querySelector “div#container”属于CSS选择器字符串，且id名不可重复，选择的只能是一个元素，所以需要获取指定选择器或选择器组匹配的第一个节点...，使用style属性更改样式时，如果原CSS属性包含“-”，则需转换命名形式，此处应为修改命名形式后的背景颜色属性名。...（5）span元素的文字颜色是红色。

2.8K2 0

24 个 ES6 实用方法，用来解决实际开发的 JS 问题

const toggleClass = (el, className) => el.classList.toggle(className) // 事例移除 p 具有类`special`的 special...('#form')); // { email: 'test@email.com', name: 'Test Name' } 12.如何从对象检索给定选择器指示的一组属性？...options); 其中 options 可以是： { detail: { ... }, bubbles: true, //是否冒泡 cancelable: false //是否取消默认事件...其他属性就是定义该事件是否具有冒泡等等功能。内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。...); } }; // 事例 copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard 22.如何确定页面的浏览器选项卡是否聚焦

9961 0

C1 能力认证——Web进阶

() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合除了函数方法，我们还可以使用属性来获取节点信息，下表介绍了一些获取元素节点信息常用的属性...remove(class1, class2, …) 移除一个或多个类名 replace(oldClass, newClass) 替换类名 contains(class) 判定类名是否存在，返回布尔值 `toggle...(class, true false)` 将div元素背景颜色设置为蓝色，请补全横线处代码 var box = document.querySelector('div') box.style.___...= '我被点击了' }) addeventlistener 实现点击按钮，更改按钮内容效果，请补全横线处代码点击这个盒子 <script...('.btn') btn.addEventListener('click', function() { scrollTo(0,________) }) 0 # 返回顶部需要使用

3.9K3 0

【设计模式】我这样学习设计模式-发布订阅者模式

---- 发布-订阅者模式虽然你可能还不熟悉发布-订阅者模式，但你肯定已经用过它了。因为发布-订阅者模式在前端领域可谓是无处不在。...如果我在其它地方买到书了，请取消订阅（off）。...$on('红宝书', handlerB) ⭐ 分析 $off() 方法 $off() 可以取消订阅某个消息，也可以取消整个订阅消息队列。...例子选择老生常谈的 ToDoList 。分析结构通常情况下，我们有一个 handleDom 来操作 Dom ；一个 handleData 来操作数据。...参考 web前端不可不掌握的核心设计模式：发布订阅者模式（附实战）小伙伴们觉的对你有帮助的请点赞支持一下，感觉写的不错的请关注一下专栏适合前端人员的设计模式

8463 0

Web APIs第二天

，则下面复选框全部选择，取消全选则全部取消,文字对应变化取消HTML if (num1.checked) { num4.innerHTML = '取消' } else { num4.innerHTML = '...购物车加减操作 ①给添加按钮注册点击事件, 获取表单的value,然后自增 ②解除减号的disabled状态 ③给减号按钮添加点击事件,获取表单的value,然后自减 ④自减结束需要判断,如果结果小于等于...编程思想 1.排他思想当前元素为A状态,其他元素为B状态干掉所有人, 使用for循环复活他自己, 通过this或者下标找到自己或者对应的元素第1个</button...Tab栏切换 ①点击当前选项卡，当前添加类，其余的兄弟移除类，排他思想 ②下面模块盒子全部隐藏，当前的模块显示 //需求：点击不同的选项卡，底部可以显示不同的内容 <div class="wrapper

1.6K6 0

Dark Mode 实践踩坑记录

Manually toggle 对于手动选择的模式，我们要如何让开关和样式关联上呢？肯定要给这个开关加个事件处理函数了，里面可以去改变页面根元素的类名，通过类名控制样式，如下。...const btn = document.querySelector('.btn-toggle'); btn.addEventListener('click', function() { document.body.classList.toggle...(".btn-toggle"); const theme = document.querySelector("#theme-link"); btn.addEventListener("click",...想要达到目标样式，只需要设置一个特定的偏白色，让这个色通过 filter 后呈现目标样式就行 (目标颜色在设计稿里)。那么问题来了，我要怎么根据设计稿里的偏黑颜色，去反推我要设置的偏白初始值呢？...来取当前的颜色，这个颜色是不是就是我们需要的呢？果不其然，的确如此。不过随着实验越多，我发现黑白这一类的可以得到正确的颜色，但是彩色的貌似不是这么容易就能推出来的。

8013 0

教你使用HTML5原生对话框元素，轻松创建模态框组件

以前，如果我们想要构建任何形式的模式对话框或对话框，我们需要有一个背景，一个关闭按钮，将事件绑定在对话框中的方式安排我们的标记，找到一种将消息传递出去的方式对话......这真的很复杂。...-- 按钮触发模态框 --> toggle="modal" data-target="#myModal">...通过::backdrop伪类选择器，我们可以用它来设置背景的样式。...您需要使用JavaScript API来显示/隐藏它。这是dialog对话框！...这将激发cancel您可以取消使用的事件event.preventDefault()。

6.2K1 0

可以提高web前端开发效率的6个浏览器书签，建议你赶快用起来吧

我想向您展示一些很棒的 Web 浏览器 hack，以帮助您的 Web 开发工作流程，以及如何将这些 hack 转换为节省时间的书签。...image.png 本期分享目录：激活开发设计模式将背景应用于所有内容模拟事件设置 cookie 切换类颜色小部件书签你还能想到哪些其他书签？...类切换可用于触发外观的更改（例如替代主题或状态）甚至动画，但仅出于测试原因使用开发人员工具执行此操作时可能会有点繁琐（即网站实际上并不能正常运行）用户的方式）。...与其他小书签类似，使用此小书签可以快速切换课程并节省时间。创建以下小书签以定位与您选择的“SELECTOR”匹配的所有元素，然后切换“CLASS”。...)); 颜色小部件书签虽然从技术上讲不是“书签”，但 Scott Jehl 的这个可书签数据 URI在新选项卡中打开了一个： image.png data

2.4K1 0

AdminLTE - 完全响应式Bootstrap 5管理仪表盘

true"有意义图像有适当的alt文本使用屏幕阅读器友好的图标字体方法语义化的HTML结构和适当的地标表单标签与输入正确关联表格标题有正确的scope属性标题层次遵循逻辑顺序(h1 → h2 → h3)颜色对比度满足.../card-widget.js'// 初始化卡片小部件const card = document.querySelector('.card')if (card) { const cardWidget..."]', removeTrigger: '[data-lte-toggle="card-remove"]', maximizeTrigger: '[data-lte-toggle="card-maximize...this.createLiveRegion() } if (this.config.skipLinks) { this.addSkipLinks() } // 其他初始化...= element } holdTransition(): void { let resizeTimer: ReturnType window.addEventListener

5881 0

【JS】1678- 重学 JavaScript API - Broadcast Channel API

如果你的网站需要支持 IE 浏览器，可能需要使用其他技术或库来实现数据共享。详细兼容性情况可以在 Can I Use[3] 网站上查看。...「案例需求」：使用了 Broadcast Channel API 将相同来源的不同浏览器选项卡之间的消息广播到其他选项卡。...所有选项卡都将显示同样的结果，并且如果有任何一种选项卡更改了结果，则其他选项卡也会显示更改后的结果。实现代码如下：选项卡更改结果时，所有选项卡都会显示更改后的结果。...希望本文能够帮助读者更好地使用该 API。

1.1K3 0

【Java 进阶篇】深入了解 Bootstrap 插件

您还可以更改模态框的标题、操作按钮的颜色等，以满足您的项目需求。...用户可以点击按钮来展开菜单，然后选择菜单项来执行操作。自定义下拉菜单下拉菜单可以根据不同的设计需求进行自定义。您可以更改菜单项的样式、内容、触发按钮的样式等。...您还可以更改分隔线的样式、菜单项的颜色等，以满足您的项目需求。 Bootstrap 标签页（Tab）标签页是一个常见的插件，用于在网页上创建多个选项卡，用户可以切换不同的内容。...这个基本的标签页结构包含了标签页导航和不同选项卡的内容。用户可以点击选项卡来切换到不同的内容。自定义标签页标签页可以根据不同的设计需求进行自定义。您可以更改选项卡的样式、内容、默认活动选项卡等。...在前面的示例中，我们使用了 data-toggle 和其他属性来定义插件的行为，但这些行为通常需要 JavaScript 的支持。

3.8K3 0

h5 补白（1）

你在一个领域钻研多年，都成了专家，突然之间那个领域过时了，你的所学所长没人需要了，那将是怎样的处境? 当一种技术消亡的时候，与它相关的工作岗位也就消亡了。...7.2 类（classList）管理添加类样式(add) document.querySelector('#btn1').addEventListener('',function(e){ document.querySelector...('#aaa').classList.add('text'); }) 移除类样式(remove) document.querySelector('#btn2').addEventListener('',...function(e){ document.querySelector('#aaa').classList.remove('text'); }) 切换类样式（toggle） document.querySelector...('#btn3').addEventListener('',function(e){ document.querySelector('#aaa').classList.toggle('text');

1.2K1 1

❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️

直接跳到末尾获取完整源码今天我将带着大家使用 HTML、CSS 和 JS创建音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。...= document.querySelector('.music-player-section .nav-btn'); navBtn.addEventListener('click', () => {... 现在我们必须创建很多函数，所以在开始之前让我们快速选择我们可能需要进行操作的所有元素。...// 刷新按钮 repeatBtn.addEventListener('click', () => { repeatBtn.classList.toggle('active'); }) //...音量部分 volumeBtn.addEventListener('click', () => { volumeBtn.classList.toggle('active'); volumeSlider.classList.toggle

9.3K6 2

Web开发tutorial

环境 VS code + Live Server ¶VS code快捷键 Ctrl+D 每按一次选中一个之后一样的，可以一起替换 Ctrl+\ 注释或取消注释 ¶清除谷歌浏览器缓存设置（万恶的缓存啊...¶CSS 常用属性 border 边框 margin padding color 字体颜色 opacity background display margin和padding的区别： margin： ?...1 #id #firstname 选择 id=“firstname” 的所有元素。 1 * * 选择所有元素。 2 element p 选择所有元素。...; }); Event： $(function(){ $("#btn1").on("click",function(){ $("#panel1").toggle...如果网络的流量很大，需要多个“Web Application” Server，然后使用负载均衡器去调配多个服务器。

1.1K1 0

点击加载更多

移除jQuery好像也没那么难

JS快速入门（二）

JavaScript 编程精解中文第三版十五、处理事件

仿手机底部导航栏制作

AngularDart Material Design 复选框顶

怎么用 JavaScript 构建自定义的 HTML5 视频播放器

C1能力认证训练题解析 _ 第四部分 _ Web进阶「建议收藏」

24 个 ES6 实用方法，用来解决实际开发的 JS 问题

C1 能力认证——Web进阶

【设计模式】我这样学习设计模式-发布订阅者模式

Web APIs第二天

Dark Mode 实践踩坑记录

教你使用HTML5原生对话框元素，轻松创建模态框组件

可以提高web前端开发效率的6个浏览器书签，建议你赶快用起来吧

AdminLTE - 完全响应式Bootstrap 5管理仪表盘

【JS】1678- 重学 JavaScript API - Broadcast Channel API

【Java 进阶篇】深入了解 Bootstrap 插件

h5 补白（1）

❤️使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)❤️

Web开发tutorial

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐