網頁

CSS Seletor與jQuery Seletor

在CSS部份,先設計好你所要的樣式,我們這裡舉下載檔案的例子,我們常在網頁上放PDF等類型的檔案讓訪客下載,我們jQuery寫幾行簡單的Code,就可以幫我們處理好全部這類下載的樣式而不用我們一行一行class屬性的設定。
HTML部份:
<a href="kkbruce.blogspot.com" title="KingKong Bruce">Bruce</a> | <a href="KingKong.pdf" title="KingKong PDF file">KingKong PDF</a>

CSS部份:
.pdf {
  background-color: green;
  border: 1px solid #ABABAB;
  color: white;
}

jQuery部份:
$(function(){
  $('a[href$=".pdf"]).addClass('pdf');
  //a[]:屬性過濾
  //$=:結尾是…
  //addClass:加入Class
  //整句話:將a屬性href結尾是.pdf加入Class屬性為pdf
});

或是我們要為網站上的Link設定一個統一的樣式,也可以採用以下寫法,將CSS包在jQuery中:

$(function(){
  $('a[href$=".com"]').css({"background-color": "green",
  "border":"1px solid #ABABAB",
  "color":"white",
  "font-family":'"Verdana", "Courier New"', 
  "font-size": ".93em"});
  //css:加入css設定
  //特性:值
  //整句話:將a屬性href結尾是.com加入css設定(即style屬性)
});

以上只是透過一個簡單的jQuery屬性過濾功能,來針對href來進行過濾及設定。但其實jQuery的選擇器(Selector)是採用CSS Selector,所以相同的東西我們在CSS裡也可以這樣設定:

CSS部份:
a[href$=".pdf"] {
background-color: green;
border: 1px solid #ABABAB;
color: white;
}

這裡我連jQuery程式都沒有寫就完成了我想要的效果。這裡其實我想表達的有兩件事:
  1. CSS能做到的事,不要拿jQuery來開刀。
  2. jQuery就是拿來做有經濟效益的事,如動態效果、程式邏輯、AJAX…等。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。