当两者完成相同的工作时，是否更愿意使用 css 而不是 jquery？
我正在了解 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>
I'm learning about the wonders of jquery and just wanted to see if either of these methods was preferred.
Example 1
<style type="text/css">span:hover {background: yellow;}</style>
<span>Hello!</span>
Example 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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
答案几乎是这样的：“如果你能用 CSS 做到这一点，就用 CSS 做到这一点”。 CSS 用更少的代码处理您正在做的事情，得到更好的支持，并且不需要像 jQuery 这样的库。
The answer pretty much goes like this: "If you can do it with CSS, do it with CSS". CSS handles what you're doing with less code, is better supported, and doesn't require a library like jQuery.
这里几乎每个人都表现得很好。 jQuery 必须先加载，然后才能完成任何其他奇特的事情。但通常情况下，缩短的 jQuery 加载时间是相当微不足道的。我不一定会担心这一点。
然而，我发现像悬停这样的简单事情绝对没有理由使用jquery。在你的悬停函数中，乍一想使用 jQuery 似乎没什么用，但好处是你基本上可以用一行简单的代码做任何用 CSS 做不到的事情 - 特别是在大多数浏览器中。
例如：
如果您想要的只是悬停，那么真的没有理由使用 jQuery。在 CSS 中，您可以在悬停时指定任意数量的内容...但您无法制作一些非常流畅的动画。因此，让我们保留代码并保持代码量基本相同，但考虑一下 jQuery 提供的可能性。
因此，在该示例中，我们不仅更改宽度（可以使用纯 CSS 实现），而且现在我们在悬停时制作动画。此外，我们同时淡入“other-div”！所以我们可以瞄准其他元素来轻松移动。
您可能希望在初始实例中使用 jQuery 的另一个原因是对元素进行更改，并在用户与其交互后保持更改。因此，它不再只是悬停，而是触发某些操作的鼠标悬停事件，但它会保持这种状态，直到用户执行其他操作。
我认为最重要的是 jQuery 并不是 CSS 的替代品，反之亦然。但它们确实应该一起使用。只要你能做一些简单的事情（比如悬停等），就使用 CSS。但是当您想要添加“魅力”时，请使用 jQuery 将其提升一个档次。
Just about everyone here has been pretty spot on. jQuery has to load before any of this other fancy stuff can be done. Usually though, the minified jQuery load time is pretty insignificant. I wouldn't necessarily worry about that.
However, I've found that simple things like hovers there is absolutely no reason to use jquery. In your hover function, it seems useless to use jQuery on first thought, but the advantage is that you can basically do any number of things with a simple line of code that you'd never be able to do with CSS - especially across most browsers.
For instance:
Really no reason to use jQuery if all you wanted was a hover. In CSS you'd be able to specify any number of things on your hover... BUT you wouldn't be able to do some really slick animations. So let's take your code and leave the amount of code basically the same, but think about the possibilities jQuery offers.
So in that example we're not only changing the width (something you could do with pure CSS) but now we're animating as we hover. Additionally, we're fading in "other-div" at the same time! So we can target other elements to move pretty easily.
Another reason you may want to use jQuery in your initial instance would be to make a change to the element and leave it changed after the user has interacted with it. So it's no longer just a hover, but a mouseover event that triggers some action, but it stays that way until the user does something else.
I think the main thing to take away is that jQuery is not a replacement for CSS or vise versa. But they really should be used together. Use CSS whenever you can do something simple (like hovers, etc). but When you want the added "oomph" use jQuery to kick it up a notch.
对于简单的悬停，最好仅使用 CSS ，除非您想更改另一个元素的背景。
For a simple hover It's better to use only CSS , except if you'd want to change the background of another element.
如果您要使用 jQuery，它将加载整个 jQuery 库，这会减慢您的网站速度。如果你可以用 css 来完成它，它会快得多，你不必写 5 行，而是可以写一两行。
if you are to use jQuery it will load the whole jQuery library and that will slow down your website. if you can do it with css it would be much faster and you wouldent have to write like 5 lines instead you could write the one or two.
答案是用 css 来做，因为，
The answer is do it with css because ,
另一件需要考虑的事情是代码的可读性和可维护性。
假设您已经有大量用于多种效果的 jQuery 代码，而另一个开发人员想要更改有关效果的某些内容，他可能会查看这些文件。当您现在排除悬停效果时，这不是一个一致的结构。
当然，一般来说，用 CSS 实现是更好的方法，但在某些情况下，更有逻辑地组织代码并将所有效果放在 jQuery 文件中是有意义的。
One more thing to consider is readability and maintainability of your code.
Let's say you have already tons of jQuery code for a lot of effects and another developer wants to change something concerning effects, he will probably look into those files. When you now exclude the hover effect, this is not a consistent structure.
Of course in general doing it in CSS is the better approach, but under certain circumstances it makes sense to organize the code a little bit more logically and putting all the effects in jQuery files.