[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为真实属性值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值