當兩個人都完成同樣的工作時，是否喜歡使用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？

回答

相關問題