blocks|key|1886354|text|如果这是在CSS中很容易做到的事情，那么就抛弃jQuery，用CSS来做吧。这样你就不必依赖于javascript的执行来获得你的应用程序的外观。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1886355|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If it's something that is easily do-able in CSS, then ditch jQuery and do it in CSS. That way you don't have to depend on javascript execution for the look/feel of your application.

blocks|key|1886438|text|如果您使用的是jQuery+to+do+things+that+can+be+done+easily+without+jQuery，那么您就越界了。jQuery的目的是让生活变得更容易，但它不应该以兼容性或可用性为代价。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1886439|jQuery当然不应该用来代替CSS+--想想那些禁用了JavaScript的用户吧。|1886440|我知道这张图片被过度使用了，但总得有人把它放在这里：|1886441|📷|atomic|1886442|​|1886443|Image+Credit+-+bobince。|1886444|entityMap|0|LINK|mutability|MUTABLE|url|http://www.reddit.com/r/programming/comments/buosj/add_a_number_to_another_number_in_javascript_img/c0on5ev|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/50947581322db45e692dee9d9e9b96a5.gif|imageAlt|2|http://www.doxdesk.com/updates/2009.html#u20091116-jquery|3|https://stackoverflow.com/users/18936/bobince^0|7|1M|0|0|0|0|0|1|1|0|0|0|C|2|F|7|3|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|K|3|L|5|6|7|1G|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]|$A|1L|B|1M|1|1N]]|C|$]]|$1|O|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|X|S|Y|C|$Z|10|11|-4]]|12|$5|R|S|T|C|$U|13]]|14|$5|R|S|T|C|$U|15]]]]

You're crossing the line if you're using <a href="http://www.reddit.com/r/programming/comments/buosj/add_a_number_to_another_number_in_javascript_img/c0on5ev" rel="nofollow noreferrer">jQuery to do things that can be done easily without jQuery</a>. jQuery's purpose is to make life easier, but it shouldn't be at the expense of compatibility or usability.

jQuery most certainly shouldn't be used as a replacement for CSS -- think of the users who have JavaScript disabled. 

I know this image is overused, but someone had to throw it in here:
<img src="https://i.stack.imgur.com/sGhaO.gif" alt="">

<a href="http://www.doxdesk.com/updates/2009.html#u20091116-jquery" rel="nofollow noreferrer">Image Credit</a> - <a href="https://stackoverflow.com/users/18936/bobince">bobince</a>.

blocks|key|3294777|text|如果你关闭了浏览器上的java脚本，你的站点/应用程序不能运行，或者没有它的功能，那么你就有问题了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3294778|JS很棒，但如果它被禁用，它永远不会阻止用户使用您构建的东西。|3294779|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you turn off java script on your browser and your site/application does not run or look functionally with out it, then you have a problem.

JS is great, but it should never stop a user from using something you have built, IF it is disabled.

blocks|key|1886524|text|jQuery通常在文档加载后应用。我猜想，如果你能用普通的CSS实现同样的事情，那么CSS就是你要走的路。浏览器上的负载更少，如果有人没有启用jQuery，至少仍然有(一些)样式，因为CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1886525|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

jQuery most often gets applied after the document has been loaded. I guess that if you can achieve the same thing with plain CSS, CSS is the way to go. Less load on the browser, and if someone doesn't have jQuery enabled at least there's still (some) style because of the CSS.

blocks|key|1209866|text|好吧，别把我当巨魔……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1209867|如果您的web应用程序不能在未启用JavaScript或与JQuery不兼容的环境中工作，那么只需使用对您来说最容易管理的应用程序。如果应用程序实际上根本不能正常工作，那么对应用程序提供可视化支持是没有好处的。|1209868|因此，如果你想让它在没有JavaScript支持的情况下工作，那么你应该尝试使用css。但是，如果您不打算使用非JavaScript支持，并且它可以工作，那么可以使用对您来说最简单的方法|1209869|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

Ok, don't mark me as a troll...

If your web-app wont work in an environment that doesn't have JavaScript enabled or isn't compatible with JQuery, then just go with whatever is easiest for you to manage. There is no benefit to having visual support for an application if it doesn't actually work otherwise at all.

Tho if you want to make it work later without JavaScript support, then you should prob try to use css. But if you don't plan for no-JavaScript support, and it works, go with whatever is easiest for you

blocks|key|3294887|text|如果您可以设置一个类属性而不是许多样式属性，那么您使用了太多的jQuery。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3294888|/**+Select+400+rows+and+change+the+background+colour+**/
$('#table+tr').css('backgroundColor',+'blue');|code-block|syntax|javascript|3294889|而不是：|3294890|/**+jQuery+**/
$('#table').addClass('blueRows');

/**+CSS+**/
#table+tr.blueRows+{
++++background-color:+blue;
}|3294891|为了避免jQuery样式，您还可以将一个类设置为body，以便在支持Javascript的浏览器中更容易使用CSS设置样式：|3294892|/**+jQuery+**/
$(document).addClass('JS-enabled');

/**+CSS+**/
body+#table+tr{
++++background:+#FFF;
}

body.JS-enabled+#table+tr+{
++++background:+blue;
}|3294893|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

You use too much jQuery if you could set one class attribute instead of a lot style attributes. For example:

<pre><code>/** Select 400 rows and change the background colour **/
$('#table tr').css('backgroundColor', 'blue');
</code></pre>

Instead of:

<pre><code>/** jQuery **/
$('#table').addClass('blueRows');

/** CSS **/
#table tr.blueRows {
 background-color: blue;
}
</code></pre>

To avoid jQuery styling, you could also set a class to the body so it's easier to style with CSS for Javascript-enabled browsers:

<pre><code>/** jQuery **/
$(document).addClass('JS-enabled');

/** CSS **/
body #table tr{
 background: #FFF;
}

body.JS-enabled #table tr {
 background: blue;
}
</code></pre>

blocks|key|3294941|text|我不认为这里有一条“线”，我认为有一些简单的东西和一些灰色地带，你必须平衡你想要的东西。高级特性，性能，兼容性，想想这些是一个三角形，很难同时做到最好的三者。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3294942|如果CSS可以做到这一点，当然也可以在CSS中做到。如果不能在CSS中使用jQuery，但不要在不需要开销的地方使用jQuery，例如$(this).attr("id")通常可以是this.id，许多东西都可以严格地在DOM上使用，并且仍然是跨浏览器的方式。|offset|length|style|CODE|3294943|你什么时候用得太多了？当它不是需要的时，有时你需要jQuery来实现跨浏览器的CCS3选择器，有时你正在使用一个已经可用的CSS选择器，并将它放在样式表中。还有上百个其他的例子，但是如果你可以在没有它的情况下以一种跨浏览器的干净方式过活，那么就没有必要，像淡出这样的事情是不容易完成的。如果您需要包含jQuery，那么没有理由不使用.fadeIn()+(代码已经包含，为什么要重复它呢？)|BOLD|3294944|JavaScript+vs+No+JavaScript|3294945|正如这里的评论所说，你的站点应该在没有javascript的情况下为提供所有的基本功能，这通常不是问题，例如捕捉点击并通过AJAX...if加载内容你没有捕捉到它他们做了一个完整的页面重新加载，这是一个简单的回退到标准行为。然而，所有的“花花公子”？这肯定是固执己见的，但我认为你不应该不遗余力地向提供所有没有JavaScript的功能。用户关闭了它，他们没有得到花哨的东西，这是fine...look在所以作为一个例子，禁用JavaScript禁用了许多不必要的功能，你可以浏览很好，但是评论，投票，主要是动作在没有javascript的情况下不一定可用。|3294946|entityMap^0|0|1V|I|2I|7|0|F|3|4M|9|0|0|Y|6T|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@$D|X|E|Y|F|J]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@$D|13|E|14|F|J]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$]]

I don't think there is a "line" here, I think there are some straightforward things and some grey areas there you have to balance what you want. Advanced features, performance, compatibility, think of these are a triangle, it's hard to do all 3 as best as possible at the same time.

If CSS can do it, of course do it in CSS. If it can't be done in CSS use jQuery, but do't use jQuery where the overhead isn't needed, e.g. <code>$(this).attr("id")</code> can usually be <code>this.id</code>, many things are available strictly on the DOM and still in a cross-browser way.

When are you using it too much? When it's not needed, sometimes you need jQuery for cross-browser CCS3 selectors, sometimes you're using a CSS selector that's already available put it in the stylesheet. There are a hundred other examples, but if you can get by in a cross-browser clean way without it, then there's no need, things like fading aren't trivially done. If you need to include jQuery at all, there's no reason not to use <code>.fadeIn()</code> once you have (the code's been included, why duplicate it?)

<h2>JavaScript vs No JavaScript</h2>

As said in comments here your site should offer all the basic functionality without javascript, this usually isn't a problem, e.g. capturing a click and loading the content via AJAX...if you don't capture it they do a full page reload, this is an easy fallback to the standard behavior. However, all the "bells and whistles"? This is opinionated for sure, but I don't think you should bend over backwards to offer all the functionality without JavaScript. The user turned it off, they don't get the fancy stuff, that's fine...look at SO as an example, disable javascript disables a lot of non-essential features, you can browse around just fine, but commenting, voting, mainly actions aren't necessarily available without JavaScript.

blocks|key|463027|text|例如，我使用JavaScript/+|type|unstyled|depth|inlineStyleRanges|entityRanges|data|463028|替换表格行的颜色或创建按钮和链接悬停效果。这可以接受吗？或者我应该继续使用CSS来做这类事情？|blockquote|463029|463030|463031|实际上，这取决于您对浏览器的支持。你可以用下面的代码简单地对表格进行斑马条纹处理：|463032|table.classname+tr:nth-child(even)+td+{
++background-color:+#ddd;
}|code-block|syntax|javascript|463033|但这在Internet+Explorer中根本不起作用(尽管在即将到来的版本9中应该可以)。因此，如果您希望所有内容在跨浏览器时看起来都是一样的，那么可以使用jQuery。|463034|对于链接悬停效果，假设你指的是颜色变化等，而不是花哨的动画，一定要使用CSS，因为这是所有地方都支持的。|463035|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|W|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|Y|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<blockquote>
 For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kind of things?
</blockquote>

Really, it depends on your browser support. You can do zebra-striping on tables really simply with this code:

<pre><code>table.classname tr:nth-child(even) td {
 background-color: #ddd;
}
</code></pre>

But this doesn't work in Internet Explorer at all (although it should in the upcoming version 9). So if you need everything to look the same cross-browser, use jQuery instead.

For link hover effects, assuming you mean colour changes, etc. and not fancy animation, definitely use CSS since this is supported everywhere.

Lately I found myself using jQuery and JavaScript a lot, often to do the same things that I did before using CSS.

For example, I alternate table rows color or create buttons and links hover effects using JavaScript/jQuery. Is this acceptable? Or should I keep using CSS for these kinds of things?

So the real question is:
When I'm using too much jQuery? How can I understand when I'm crossing the line?

Am I using too much jQuery? When am I crossing the line?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

最近，我发现自己经常使用jQuery和JavaScript，经常做与使用CSS之前相同的事情。例如，我使用JavaScript/jQuery替换表行的颜色或创建按钮和链接悬停效果。这可以接受吗？或者我应该继续使用CSS来做这类事情？所以真正的问题是:什么时候我使用了太多的jQuery？当我越界的时候，我怎么理解呢？

问我是否使用了太多的jQuery？我什么时候越界了？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我是否使用了太多的jQuery？我什么时候越界了？EN