10

我有这段代码：

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])");

如果我想将textareaand添加select到查询中，我将得到以下结果：

var requiredFields = el.querySelectorAll("input[required]:not(:disabled):not([readonly]):not([type=hidden])"+  
",select[required]:not(:disabled):not([readonly]):not([type=hidden])"+
",textarea[required]:not(:disabled):not([readonly]):not([type=hidden])");

我的感觉说这可能会更好..但是如何？

奖励：请给我一个很好的 querySelectorAll 函数资源。

4

2 回答 2

10

正如影子巫师所说，您至少可以:not([type=hidden])在没有意义的各个地方删除不必要的（select和textarea）。

我认为结果没有问题：

var requiredFields = el.querySelectorAll(
    "input[required]:not(:disabled):not([readonly]):not([type=hidden])" +  
    ",select[required]:not(:disabled):not([readonly])"+
    ",textarea[required]:not(:disabled):not([readonly])");

...尤其是因为它将整个事情交给了选择器引擎，以利用它可以做的任何优化。

或者，您可以为所有相关输入提供一个通用类，然后使用：

var requiredFields = el.querySelectorAll(
    ".the-class[required]:not(:disabled):not([readonly]):not([type=hidden])");

...但我不确定它会为你买多少。

请给我一个很好的 querySelectorAll 功能资源。

有规范。MDN通常也是这些东西的好地方。

于 2013-12-19T09:42:41.140 回答
3

查询选择器全部

window.l = ['input','textarea','select'];
function myQuerySelectorAll() {
    q = '';
    t = '[required]:not(:disabled):not([readonly]):not([type=hidden])';
    l.forEach(function(e) {
        q += e;
        q += t;
        q += ',';
    });
    console.log(q)
}

$> myQuerySelectorAll();
$> input[required]:not(:disabled):not([readonly]):not([type=hidden]),textarea[required]:not(:disabled):not([readonly]):not([type=hidden]),select[required]:not(:disabled):not([readonly]):not([type=hidden]),
于 2013-12-19T09:42:33.260 回答