jQuery API 中文文档中描述：
hide()用于隐藏匹配的元素。
show()用于显示匹配的元素
<div id='d'>哈哈</div>
div{
display: flex;
}
$('#d').hide()
$('#d').show()
这个时候查看div的display属性为flex，因为jQuery记录了样式中的flex。但是，看如下代码：
<div id='d'>哈哈</div>
div{
display: none;
}
$('#d').show()
查看div的display属性为block，jQuery默认给div的display样式增加了none的属性。但是我们可能需要的是inline/inline-block/flex等其他属性值，这样就可能导致页面样式错乱。
所以在遇到有hide()/show()页面样式错乱时可以从这里排查原因。或者在用此属性时多多思考是否容易导致弊端出现。
严格意义上讲这里并没有用到『内容/样式/行为分离』的原则。实际上我们可以用addClass()/removeClass() ，通过添加或删除类名来控制div的显示与隐藏。这样我们就真正意义上做到了『内容/样式/行为分离』
网友评论