將 jQuery 與 CSS 樣式抽離心法

將 jQuery 與 CSS 樣式抽離,可以讓程式碼的維護更方便

舉一個輪播套件nivo為例,它的id是slider

是如何去觸發它的輪播效果的呢?

是來自於在all.js寫了這段程式碼來啟動(綠色箭頭處,直接指定id=“slider”)

比較建議的作法

但會比較建議,

假如想要載入 jQuery 的第三方插件,或者是有自己寫的 jQuery 語法,要寫任何 jQuery 效果前,都在 class 多加上一個【有前綴詞「jq-」的class名稱】,用這個class名稱專門來寫jQuery效果

因此就像這樣,用「.jq-nivo」來觸發jQuery效果

自己命名的 class 名稱(例如下面範例中的 .cart),就單純負責我自己設計的 css 網頁樣式就好了。

這樣做的好處是:

  • 方便管理,維護更方便
  • 「樣式的class」不會跟 jQ 綁在一起,把「css 樣式」和 「jQ動畫效果」給抽離

舉例:

一個網站有二、三十頁,其中許多頁的商品區塊(div)都會套用同一個 class 名稱(例如上圖中的 <div class="cart">

⭐️ 有些頁面的圖片需要套用 jQuery 效果 --> 就加上有前綴詞的class名稱 .jq-cart
⭐️ 不需要套用 jQuery 效果的圖片 --> 就不需加上 .jq-cart

(在all.js中,就用 .jq-cart 來寫效果)

這樣就非常方便!