2013-11-14 95 views
4

出于好奇,这两种技术哪一种更“有效”?jQuery show()和hide()vs class with display:block/none

我和我的主管讨论过,他告诉我应该使用display:block/none创建两个类,并使用jQuery将它们分配给元素,而不是使用jQuery自己的函数show/hide。

我有印象,显示/隐藏被广泛使用的是没有任何问题的工作职能和他们提出了让我们的生活更容易通过不迫使我们指定的类。

+0

他们工作得很好。这可能是你工作时编码标准的问题。 – tymeJV

+0

是完全一样的......当然,如果你使用jQuery,更喜欢显示和隐藏,而不是制作类......只关于显示和隐藏,这使得inlin风格 – DaniP

+3

查看这里的差异:http://stackoverflow.com /问题/ 13562439 /差之间,jQuery的隐藏和cssdisplay-没有 – lifetimes

回答

1

您可以使用这样的CSS类最初隐藏网页中的元素与jQuery.show()后来证明这一点。 无论如何jQuery.show()直接设置样式属性,因此浏览器不需要通过CSS声明来查找每次分配它时查找类。所以我相信它会更快,而且对开发人员更方便。顺便说一句,show/hide的代码也更具可读性。

只是比较

$username.hide(); 

$username.addClass('hidden'); 

似乎代码的可读性,所以它更易于维护,因此它更便宜的客户支持...等等。

0

他们是相同的 - show()hide()display: block(或inlineinline-block等),display: none或类似之间只是切换。使用这些或使用简单的类来切换这些样式都是完全“有效的”。

主要区别在于show()hide()支持开箱即用的jQuery动画。此外,类不添加内联CSS,而show()hide()(内联html可以覆盖最初的display值)。根据您的使用情况,这可能会也可能不方便。

show()hide()还缓存初始display值,所以如果你hide()一个元素,然后show()它,它就会记住原display值(这意味着它更灵活,因为你不需要为元素独特的可视类具有不同类型的display值)。

0

有关于使用或者两种技术没有“无效”。它归结于你的偏好,我相信。 jQuery的显示/隐藏方法工作得很好。需要考虑的几点

  • 如果使用show/hide,它是一个纯粹的基于javascript/jquery的解决方案。
  • 如果通过分配他们使用jQuery使用CSS类这种方法涉及CSS + jQuery的

已经说过,它总是建议尽可能使用一个CSS的解决方案。如果您使用display block/none来创建类,则可以在整个应用程序中使用它们。所以我想最终要取决于ypur的个人选择。

0

我认为这些方法的不同之处在于,通过使用类来进行选择,您可以选择隐藏未来重新设计的方式。您可能希望在有一天实际穿过并隐藏灰色的情况下交换新的CSS。通过使用类,您可以保持演示文稿和数据的分离。