jquery - 选择属性中不包含字符串的元素

Question

假设我有一些

<TR style = "background-color : red ;">

还有一些

<TR>

（需要注意的是冒号和分号旁边的空格是故意的，因为我正在处理的页面是这样写的）

现在，这个：

$('.detailtable tr:not([style~="darkgray"])')

完美运行。但这里说：

[name!="value"] 无法利用本机 DOM querySelectorAll() 方法提供的性能提升。为了在现代浏览器中获得更好的性能，请改用 $("your-pure-css-selector").not('[name="value"]')

所以我想知道：我的表达方式是最好的还是类似的：

$('.detailtable tr').not('[style~="darkgray"]') // this doesn't work!

表现更好？写最后一个表达式的正确方法是什么？

提前致谢

Answer 1

如果你真的想“选择属性中不包含字符串的元素”，你应该使用*=而不是~=，像这样：

$('.detailtable tr').not('[style*="darkgray"]');

这是小提琴。

---

不，使用.not可能不会更快。querySelectorAll应该能够按原样解析该选择器。

看到这个小提琴。

---

编辑：如果您非常关心 IE8，那么使用该.not方法而不是:not选择器会给您带来小的性能提升。原因很简单：IE8 确实支持属性选择器，但不支持否定选择器。

Answer 2

我建议你看看这个。

有趣的是，伪选择器（如 ":not"）实际上比在初始选择器旁边使用函数要慢。事实上......他们显然“慢了一倍”。

我引用：

1. $("#id p");
2. $("#id").find("p");

得知第二种方法的速度是第一种方法的两倍以上，您会感到惊讶吗？了解哪些选择器优于其他选择器（以及为什么）是确保您的代码运行良好并且不会让等待事情发生的用户感到沮丧的关键构建块。

我会和.not我的朋友一起去！

Answer 3

根据W3C 建议，您当前使用的内容即使与document.querySelectorAll().

也许您可以测试它是否按预期工作。