我最好做什么?.hide()
比写出来要快.css("display", "none")
,但是有什么区别,它们实际上对HTML元素做了什么?
在有关.hide()的jQuery页面中:
“匹配的元素将立即被隐藏,没有动画。这大致相当于调用.css('display','none'),不同之处在于display属性的值保存在jQuery的数据缓存中,以便以后可以显示恢复为初始值。如果一个元素的显示值为inline,则将其隐藏并显示,它将再次以inline显示。”
因此,如果能够恢复到的先前值很重要,则display
最好使用,hide()
因为这样可以记住先前的状态。除此之外,没有区别。
.hide()
在将之前的 display
属性设置为之前存储该属性none
,因此,如果它不是该display
元素的标准属性,那么您会更安全一些,.show()
它将使用该存储的属性作为返回内容。所以...它做了一些额外的工作,但是除非您要处理大量的元素,否则速度差异应该可以忽略不计。
查看jQuery代码,会发生以下情况:
hide: function( speed, easing, callback ) {
if ( speed || speed === 0 ) {
return this.animate( genFx("hide", 3), speed, easing, callback);
} else {
for ( var i = 0, j = this.length; i < j; i++ ) {
var display = jQuery.css( this[i], "display" );
if ( display !== "none" ) {
jQuery.data( this[i], "olddisplay", display );
}
}
// Set the display of the elements in a second loop
// to avoid the constant reflow
for ( i = 0; i < j; i++ ) {
this[i].style.display = "none";
}
return this;
}
},
他们是一样的东西。.hide()
调用jQuery函数,并允许您向其中添加回调函数。因此,.hide()
您可以添加一个动画。
.css("display","none")
将该元素的属性更改为display:none
。与在JavaScript中执行以下操作相同:
document.getElementById('elementId').style.display = 'none';
该.hide()
函数显然需要更多时间来运行,因为它会检查回调函数,速度等。
两者都使用是一个很好的答案。这不是一个或一个的问题。
同时使用两者的好处是CSS会在页面加载时立即隐藏元素。jQuery .hide会将元素闪烁四分之一秒,然后将其隐藏。
如果我们希望在页面加载时不显示该元素,则可以使用CSS并设置display:none并使用jQuery .hide()。如果我们计划切换元素,则可以使用jQuery切换。
两者在所有浏览器AFAIK上的功能都相同。已在Chrome和Firefox上选中,均附加display:none
到style
元素的属性。
如果使用基本的hide方法,则看不到任何区别。但是jquery提供了各种可以使元素生效的hide方法。请参阅下面的链接以获取详细说明:
jQuery中的隐藏效果
文章标签:css , html , javascript , jquery , show-hide
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!