$() V4
将提供的 targets 参数转换为一个元素 Array
,作为 document.querySelectorAll()
的替代方案。
当在 Scope(作用域)中使用时,它使用 Scope 的 root
元素而不是 document
,相当于调用 root.querySelectorAll()
。
const targetsArray = utils.$(targets);
参数
名称 | 接受 |
---|---|
targets | CSS 选择器 | DOM 元素 |
返回
一个 Array
包含 HTMLElement
、SVGElement
或 SVGGeometryElement
$() 代码示例
import { utils, createScope } from 'animejs';
// Targets all the '.square' elements
utils.$('.square').forEach($square => {
utils.set($square, { scale: .5 });
});
createScope({ root: '.row:nth-child(2)' }).add(() => {
// Limits the selection to '.row:nth-child(2) .square'
utils.$('.square').forEach($square => {
utils.set($square, { rotate: 45 });
});
});
<div class="medium justified row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="medium justified row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
<div class="medium justified row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>