[class]与[class=""]

群里的abcd提出的问题，选择器如何区分这两个东西。说实话，我对此非常迷惑，于是看了几个选择器的实现，总结如下：

[class]要求目标节点显式地设置了class。

[class=""]不但要求目标节点显式地设置class，还要求其值为空字符串。

那剩下的问题是如何得知此属性是被显式地设置了。这简单，这东西我老早就在《tabIndex属性》一文研究过：

var _hasAttr = function(node, name){

              var attr = node.getAttributeNode && node.getAttributeNode(name);

               return attr && attr.specified; // Boolean

};

但对于一个选择器来说，过来的函数调用是非常不明显，我们需要努力寻求一些更简捷的替换品。hasAttribute不错，可惜IE6，IE7不支持。我们转向jQuery源码吧，毕竟拥有这些人为它添加砖加瓦。

由于它是属于属性选择器的范畴，因此它与[name=check],[name!=check],[name~=check]等一齐处理。jQuery会把它进行切割，如[name=check]会变成["name","name","=","check"]，[name!=check]会变成["name","name","!=","check"]，[name]会变成["name","name",,]，亦即有两个元素是undefined。第四个值会代入一个叫check的变量，并且再与""相加代入另一个叫value的变量。在那个长长的三目运算符中，它有一个分支专门用于处理像[class]这种是否显示地设置了属性但不管其值是多少的情况：

!check ?  value && result !== false ://当check为undefined，即进入此分支，result为真实属性值

如果您觉得此文有帮助，可以打赏点钱给我支付宝1669866773@qq.com ，或扫描二维码