jQuery .not() 的纯 JavaScript 替代品

Question

JS 可以替代.not()jQuery 吗？我有$(".form :input").not，但需要将其转移到纯JS。有指南可以帮助我吗？

 var input = $(".form :input").not('button, [type="button"], [type="submit"]').on({
input: return
});

我想在 JS 中做到这一点

Answer 1

现代浏览器确实支持NOT子句querySelectorAll()：

document.querySelectorAll(".form :input:not(...)");

示例（jsFiddle）：

<div>This should be colored!</div>
<div>This should be colored!</div>
<div id="this-not">This must not colored!</div>
<div>This should be colored!</div>
<div>This should be colored!</div>

var matchedElements = document.querySelectorAll("div:not(#this-not)");
for (var i=0; i<matchedElements.length; i++) {
    matchedElements.item(i).style.backgroundColor = "red";
}

Answer 2

普通 JS 中的等价物是这样的

var forms = document.querySelectorAll('.form'),
    inputs = [];

for (var i = forms.length; i--;) {
    var els = forms[i].querySelectorAll('input, textarea, select');

    for (var j = els.length; j--;) {
        if (els[j].type != 'button' && els[j].type != 'submit') {
            inputs.push(els[j]);
            els[j].addEventListener('input', cback, false);
        }
    }
}

function cback(event) {
    var b = [];

    for (var i = inputs.length; i--;) {
        if (!inputs[i].value.length) b.push(inputs[i]);
    }

    var l1 = b.length;
    var l2 = inputs.length;
    var top = document.querySelectorAll('.top');

    for (var j = top.length; j--;) {
        top[j].style.width = 100 - (l1 / l2) * 100 + "%";
    }
}

小提琴