Question

我喜欢$('mySelector')的jQuery语法。它简短，整洁，功能强大。但我不想在我的页面中包含jQuery。我希望jQuery的$选择器函数作为本机JS的一部分。

我知道我可以使用querySelector和querySelectorAll，但第一个问题是这些问题很详细 - 我不想每次都写document.querySelectorAll('mySelector')，它只会使代码膨胀太多了。

我可以通过使用这样的行来缩短它〜

var $ = document.querySelectorAll.bind（document）;

然后我会得到$，但它仍然无法正常工作，因为它将返回数组，我必须检查数组长度并从数组中索引元素或者使用每次都forEach，进一步膨胀代码。

如何在纯现代JavaScript中简洁有效地选择元素？

Answer 1

查看http://microjs.com/#selector

处的非常小的选择器库

查询 - https://github.com/ded/qwery 和巴拉莱卡 - https://github.com/finom/balalaika似乎非常适用。

您可能还想查看Sizzle（https://github.com/jquery/sizzle）。

虽然，我建议使用普通querySelectorAll进行处理。它的速度要快得多，而且代码并没有真正膨胀。

const $ = sel => Array.from(document.querySelectorAll(sel));
$('.selector').forEach(el => {});

我通常会创建三个辅助函数：

$ = sel => document.querySelector(sel) // single element
$id = id => document.getElementById(id)
$$ = sel => [...document.querySelectorAll(sel)]; // multiple elements

此外，如果我需要更深入或更复杂的选择，我会使用filter或find，如：

$$(sel).filter(el => el.innerText === "mytext");
// similar to what jQuery contains would do

您还应该查看＆＃34;您不需要jQuery＆＃34;对于许多其他这样的技巧和功能。 Vanilla js和基于它的任何库一样强大。

您最有可能最终创建自己的选择器库/辅助函数。因此，最好使用一些轻量级选择器库，如上所述。

Answer 2

jQuery本质上是NodeList的包装器对象，它为DOM操作添加了更多功能。如果你想创建自己的包装器对象来定义所有Element API的批量版本的函数，你可以自由地这样做，但是你可以使用jQuery或者衍生物。

如果你想要一个非常轻量级的代理对象来对DOM元素进行批量操作，那么ES6中的Proxy对象可以很容易地做到这一点。

Proxy对象用于定义基本操作的自定义行为（例如属性查找，赋值，枚举，函数调用等）。

注意： Proxy对象没有IE支持。

// select a list of matching elements, context is optional

const $ = function( selector, context ) {
    const nodeList = (context || document).querySelectorAll( selector );

    return new Proxy( nodeList, {
        set: function( target, property, value ) {
            for ( let i = 0; i < target.length; i++ ) {
                target[ i ][ property ] = value;
            }
        },
        get: function( target, property ) {
            return target[ 0 ] && target[ 0 ][ property ];
        }
    });
};

function test() {
  $( '.myclass' ).innerHTML = '<a href="#">New HTML</a>';
  $( '.myclass' ).className = 'redcolor';
  $( 'p' ).innerHTML = 'Click the links for check Binding of event handlers';

  $( 'a' ).onclick = function( e ) {
    e.preventDefault();
    console.log( 'a tag Clicked!' )
  }
}

.redcolor {
    color: red
}

<div class="myclass">Element 1</div>
<div class="myclass">Element 2</div>
<div class="myclass">Element 3</div>
<div class="myclass">Element 4</div>
<div class="myclass">Element 5</div>

<button type="button" onclick="test()">Test</button>
<p></p>

通过这样做，您可以使用$（...）来获取元素，就像使用jQuery一样;你甚至可以传入一个上下文元素。

如何在纯JavaScript中简洁地选择元素？

2 个答案: