个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
<分区>
我是 JavaScript 的初学者，我正在关注 30 天的 javascript30.com 任务之一，第一次看到 document.querySelector()。
读完这篇我很清楚 MDN - Query Selector它的作用，但是我无法弄清楚它是如何在代码中使用的，尤其是:
这里的美元符号是什么意思？ (我知道这不是这种语言的特定含义，这让我很困惑)
一般来说，我不明白选择器括号 () 之间发生了什么，这个:
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
谁能帮帮我？
谢谢!
这是构建架子鼓的代码:
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
audio.currentTime = 0;
audio.play();
key.classList.add('playing'); //add class defined in css
}
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>
<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
0
这两种引用方法的主要区别是什么？ 使用其中一种有什么好处？另外，它们各自最适合哪种用例？ var selection = document.querySelector('.selector') !==
对于下面给出的代码，document.querySelector('createButton') 和 Polymer.dom(this.$).querySelector('createButton')
查看 mdn“querySelector”会在两个部分下弹出，但它们似乎都达到了相同的目的。哪一个是不同情况的理想选择？ ...或者它们基本上在功能上是相同的？ https://developer.m
这个问题已经有答案了: Is element.querySelector() different from document.querySelector()? (2 个回答) 已关闭 3 年前。 当我
我做了几次迭代测试来测试 Document.querySelector 的效率和 Element.querySelector . 标记: 脚本: 查询 Document.querySelec
如何使用 document.querySelectorAll() 从下面的代码中选择特定的文本输出？ 我想在变量中捕获结果，并尝试使用以下代码来实现: let result = document.qu
HTML 2018-2019 如何使用 CSS 选择器定位元素 onclick 我试过下面的代码但不工作 ie.document.querySelector("[onclick='loadYearPa
通常在 javascript 中使用查询选择器时，我们会这样做， ABCD var className = 'abcd'; var x = document.querySelector('.'+cla
我目前正在学习 querySelector方法，惊讶地发现它被归类为过时了 这是 screenshot 的链接 querySelector 方法真的已经过时了吗？若有，原因为何？应该使用什么方法呢？
MDN 指定的 querySelectorALL() 不支持事件节点并且仅返回静态节点。 MDN querySelectorALL querySelector() 是否支持活节点 MDN 没有指定任何
这个问题在这里已经有了答案: What does this `…${…}…` code in the node docs mean? [duplicate] (1 个回答) 关闭 6 年前。 我是
根据下面的书面代码，当单击具有 keyCode 65 的“a”时，预期结果应该是在控制台中返回 DOM 元素“”。当我运行代码并检查它时，它在控制台中返回 null。 部分源码: wind
我正在使用 SVG.js select() 函数，它使用 querySelector() 函数。 目前，我使用的命令是:select("[id='1']")(1可以用其他数字代替) 我想做的是选择该元
我有这个循环应该设置 值为无并更新占位符。当我登录节点时它工作正常但是 value和 placeholder没有更新？怎么了？ 数据是一个 JSON 对象。 var data = {"password
我正在尝试使用 QuerySelector 获取数据表单中每个评论的值。有一个“添加”按钮，允许显示另一个元素并将元素的名称增加 +1。例如，第一个评论的名称为“comment0”，第二个评论的名称为
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 7 年前。 Improv
我有一个具有以下格式类的输入字段: some_starting_constant_string somevariablestring some_ending_constant_string 所以我想要
我正在寻找一种方法来查找包含以给定字符串开头的属性的所有元素。例如: document.querySelectorAll('[ng-*]') 将返回带有 Angular 指令的所有元素(ng-clic
我的第一列应该是实际日期，但我的 js 脚本仅适用于我的 html 代码中的一个类。 问题:如何使我的js代码适用于html代码中的每个类，我使用querySelector()，但我应该使用类似$(t
有没有办法使用 CSS 选择器来选择出现在给定元素之后的元素。 假设我有一个像这样的 DOM A next span the target next span
我是一名优秀的程序员,十分优秀！