首先先說說我們編寫一個前端頁面的流程：
1設計HTML：
首先根據頁面的佈局，來確定對應的div區域，接着判斷處在同一層級或其樣式是否是相同的，若是相同的，則將這些相同樣式的類定義一個相同的類名。（方便再接下來編寫對應的樣式的時候，集中寫在一起，減少代碼重複率，並 同時提高代碼的可維護性，便於後期進行維護，
**2設計CSS:**接着就是來 編寫對應的樣式了，如果在前期設計HTML階段，設計的合理，那麼這一步就會很方便了 ，爲對應的類名定義對應的樣式
3在JS中設計方法:
爲了將這個講的深一點，我們提出一個實際例子，講解起來更加深刻
比如淘寶網頂部導航欄上的“我的淘寶”這個按鈕，我們將鼠標放在上面的時候，會出現對應的下拉菜單欄：
（1該菜單欄的初始顏色爲#cdd0d4,點擊之後該背景顏色需要被更改爲白色，且出現#cdd0d6顏色的邊框
2該菜單右邊的按鈕圖標會發生變化，所以就需要我們更換該圖片）
我們要做的就是實現這個功能：
有以下三種方式可以實現，
1將該hover方法寫在JS中，如下：
JS:
$(".dropdown").hover(function(){
var $dropdown=$(this);//this代表該函數的執行環境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#fff";
border-color:"#cdd0d6"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown-act.png";
)},function(){//鼠標移出之後，就恢復之前的樣式
var $dropdown=$(this);//this代表該函數的執行環境
$dropdown.find(".dropdown-tax").css({
backgroud-color:"#cdd0d4";
border-color:"#cdd0d4"}
$dropdown.find(".dropdown-img").css({
backgroud-image:"url(img/dropdown.png";
}
以上就是我們完成了對應的更改，
這是第一種方法，同時也是最不建議的一種方法，主要有以下三種原因：
1重繪
在我們使用js來改變div的樣式的時候，瀏覽器會爲了顯示這個新樣式會重新繪一遍該對應的div，影響瀏覽器的性能
2迴流
和重繪類似，在使用js改變div屬性的時候，比如長和高，不僅會該變自身，其周圍的元素都有可能會受到影響，所以會導致瀏覽器重新計算一遍這些受影響的元素標籤，這也是大大影響了瀏覽器的性能
3是否易於維護
採用這種方式編寫，是非常不利於維護的，修改起來困難複雜
於是我們可以選擇將實現該功能的方法寫在js中，將具體的樣式更改寫在css中
JS：
$(".dropdown").hover(function(){
$(this).addClass(".dropdown-hov");//擋鼠標移動到該元素的時候，添加類名爲dropdown-hov的樣式
},function()}
$(this).removeClass(".dropdown-hov");//當鼠標移開的時候，刪除該樣式
CSS:
.dropdown-hov .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown-hov .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
這就是我們的第二種方式，將方法的聲明寫在該js中，將樣式的變換寫在css中
除了這兩種寫法之外還有第三種寫法：
將該方法和樣式的都寫在CSS中
CSS：
.dropdown:hover .dropdown-act{
background-colot:"#fff";
border-color:"#cdd0d6";
}
.dropdown:hover .dropdown-img{
background-image:“url(img/dropdown.png)”;
}
//適用於，該.dropdown-act類在.dropdown類中
這就是我們的第三種了，也是最簡單直接的寫法，便於修改和維護