当两个人都完成同样的工作时，是否喜欢使用css而不是jquery？

我正在学习jquery的奇观，只是想看看这些方法是否是首选。当两个人都完成同样的工作时，是否喜欢使用css而不是jquery？

例1

<style type="text/css">span:hover {background: yellow;}</style> 
<span>Hello!</span>

例2

<style type="text/css">span.highlight{background:yellow;}</style> 
<script type="text/javascript"> 
$("span").hover(function() { 
    $(this).addClass("highlight"); 
    }, function() { 
    $(this).removeClass("highlight"); 
}); 
<span>Hello!</span>

来源

2012-01-27 user784637

同意Christian。一个具体的例子：CSS可以在不支持javascript的浏览器上以及关闭javascript的用户（如公司和高安全性用户）上运行。 – sscirrus 2012-01-27 04:12:41

答案几乎是这样的： “如果你可以用CSS做，用CSS做” 。 CSS使用更少的代码处理你正在做的事情，得到更好的支持，并且不需要像jQuery这样的库。

来源

2012-01-27 04:10:13

感谢，仅需9分钟最佳答案，检查了你的网站，你的“关于我们”部分是热闹，真棒同时 – user784637 2012-01-27 04:12:32

2分钟好吧，你打进5个upvotes，这是最你有任何的回答笑 – user784637 2012-01-27 04:14:03

谢谢:)。有时你赢了，今天是我的一天。但是，是的，这是规则，试着在CSS中保留所有与演示相关的代码。使用JS DOM操作等 – 2012-01-27 04:28:58

对于简单的悬停最好只使用CSS，除非你想改变另一个元素的背景。

来源

2012-01-27 04:13:52

您仍然可以向下遍历与CSS的树，如：'.parent：悬停.child {颜色：红}'。但旅行起来，不要以为没有js就没有可能。 – 2012-01-27 04:20:39

你是对的。这是使用jQuery的另一个很好的理由。我真的希望他们能够在下一个CSS中创建这个方面。那和变数！ – 2012-01-27 17:17:03

如果你要使用jQuery，它会加载整个jQuery库，这会减慢你的网站。如果你可以用css来做，它会更快，你必须写5行，而不是写1或2。

来源

2012-01-27 04:15:05 theliberalsurfer

答案是用CSS这样做是因为，

CSS永远不是JavaScript
他们使用禁用了javascript浏览器的用户更快。

来源

2012-01-27 04:19:35 alex

还有一件事要考虑的是代码的可读性和可维护性。假设你已经有大量的jQuery代码用于很多效果，而另一个开发者想要改变一些关于效果的东西，他可能会研究这些文件。当您现在排除悬停效果时，这不是一个一致的结构。

当然，通常在CSS中做更好的方法是，但在某些情况下，将代码更加逻辑地组织起来并将所有效果放在jQuery文件中是有意义的。

来源

2012-01-27 04:51:12

几乎每个人在这里都很适合。 jQuery必须先加载任何其他花哨的东西才能完成。通常情况下，缩小的jQuery加载时间是相当不重要的。我不一定会担心这一点。

但是，我发现像徘徊这样简单的事情绝对没有理由使用jQuery。在悬停函数中，首先想到使用jQuery似乎毫无用处，但优点是基本上可以使用一些简单的代码来完成许多事情，而这些代码是您无法用CSS完成的 - 特别是在大多数浏览器中。

例如：

$("span").hover(function() { 
    $(this).addClass("highlight"); 
    }, function() { 
    $(this).removeClass("highlight"); 
});

实在没有理由使用jQuery，如果你想一切都悬停。在CSS中，你可以指定任何数量的东西在你的悬停......但你不能做一些真正的光滑的动画。因此，让我们拿走您的代码，并让代码量基本相同，但请考虑jQuery提供的可能性。

$("span").hover(function() { 
     $(this).animate({width:'100px'}, 500); 
     $(".other-div").fadeIn(200); 
    }, function() { 
     $(this).animate({width:'50px'}, 500); 
     $(".other-div").fadeOut(200); 
});

所以在这个例子中，我们不仅改变了宽度（你可以用纯CSS做），但现在我们的动画我们徘徊。另外，我们同时在“other-div”中褪色！所以我们可以针对其他元素轻松移动。

您可能想要在初始实例中使用jQuery的另一个原因是更改元素，并在用户与它进行交互后将其更改。所以它不再只是一个悬停，而是一个触发某些动作的鼠标悬停事件，但直到用户做了其他事情之前，它一直保持这种状态。

我认为主要的东西是jQuery不是CSS的替代品，反之亦然。但他们确实应该一起使用。只要你可以做一些简单的事情就可以使用CSS（如悬停等）。但是当你想添加“oomph”时使用jQuery来踢一个档次。

来源

2012-01-27 05:29:16

当两个人都完成同样的工作时，是否喜欢使用css而不是jquery？

回答

相关问题