解析jQuery空if条件、attr/css操作致边框丢失与hover失效的原因

所有异常均不属于jQuery框架bug，全部是对jQuery方法机制、DOM样式优先级规则的认知偏差导致，各场景的具体原因拆解如下：

第一类异常：空if内写if($(".mon").attr("style", "border")) {}时旧点击的边框丢失 #

• 核心认知偏差1：jQuery.attr()方法传入双参数时是设置属性操作，不是读取属性，方法返回值为当前jQuery对象（用于链式调用），且会触发隐式迭代——批量给选择器匹配到的所有元素执行属性修改。
• 这行代码的实际执行逻辑：每次触发点击事件时，判断条件里的attr("style", "border")会先无条件执行，把所有.mon元素的整个style内联属性整体覆盖为字符串"border"，之前给历史点击元素写入的border: 1px solid red内联样式会被直接冲掉，不是被逻辑主动清除。
• 因为双参数attr返回的jQuery对象永远是真值，所以这个设置操作会在每次点击时必然跑一遍，哪怕if的花括号里没有任何执行语句，判断条件的副作用已经生效。把这段代码注释掉，就不存在批量覆盖style属性的操作，历史设置的红色边框自然能正常保留。

第二类异常：替换为if($(".mon").css("border")) {}空判断后边框不再丢失 #

• 核心差异：这里的css()方法是单参数读取模式，作用是获取匹配集合中第一个元素的计算样式值，全程没有修改元素属性的副作用，不会对已有的内联边框造成覆盖。
• 因为没有批量改样式的操作，所有历史点击设置的红色内联边框不会被冲掉，自然不会出现边框丢失的问题。

第三类异常：执行$(".mon").css("border", "none")清除所有边框后，原生:hover边框效果失效 #

• 核心认知偏差：内联样式的优先级远高于样式表中定义的非!important规则，哪怕是:hover伪类的样式，权重也竞争不过内联样式。
• css("border", "none")的实际作用是给每个.mon元素的内联样式表写入border: none的高优先级声明，这个声明会一直压制样式表中定义的悬浮边框规则，不是“清除内联样式”，反而是给元素加了一个高优先级的样式限制。
• 要实现“清除内联样式、不影响hover规则”的效果，需要把清除值设为空字符串""，触发jQuery删除对应内联样式声明的逻辑，让元素的边框样式完全回归样式表规则的控制，而不是给内联样式设置none值。

共性误区提醒 #

• 不要把带修改副作用的方法直接写在if的判断表达式中：双参数的attr()、双参数的css()都会直接修改DOM状态，哪怕if块为空，判断条件的执行已经带来了实际的DOM变更。
• 注意区分“设置内联样式值”和“删除内联样式声明”的行为差异：前者会留下高优先级的覆盖规则，后者会把样式控制权交还给外部样式表。

内容的提问来源于stack exchange，提问作者happy_story