JQuery：自定义属性关键字选择器

Question

对于项目，我在元素上使用自定义属性来指定它们是否具有自定义模板。我需要能够根据关键字选择带有自定义模板的元素。我做了一个简化的演示案例。

所以，例如：

<div jk_template="blue">Blue</div>
<div jk_template="red">Red</div>
<div jk_template="red big">Red Big</div>

我试过了：

$('[jk_template="blue"]').css('color', 'blue');
$('[jk_template="red"]').css('color', 'red');
$('[jk_template="red big"]').css('font-size','22px');

不幸的是，red big只会出现较大的字体大小，但不会显示为红色。

Fiddle

我还希望能够根据缺少属性选择没有自定义模板的元素。只使用JQuery选择器可以实现所有这些吗？

Answer 1

是的，JQuery实际上利用了CSS 1-3 selectors。

要选择具有特定属性值子元素的元素，请使用[attr*=value]：

$('[jk_template*="red"]').css('color', 'red');

要选择没有特定属性的元素，请使用:not selector：

$(':not([jk_template])').css('color','orange');

Updated Fiddle