jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式，如果你有這個經驗，就會知道在設定時會有許多複雜及麻煩的問題，比如說 IE 它 setAttribute 不吃 name 屬性；又像在指定 class 屬性時，名稱不能用 class 而要用 className 等問題。令人開心的，jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了！你只需記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得第一個匹配到的元素之屬性值：

attr(name)

例. 取得第一個連結的 title 值：

$("a").attr("title");

替所有匹配到的元素設定屬性值：

attr(key,value)

例. 替所有連結的 title 設為 Enjoy jQuery：

$("a").attr("title","Enjoy jQuery");

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值：

attr(properties)

例. 替所有的圖片設定 src、title 及 alt 屬性：

$("img").attr({ 
  src: "logo.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});

移除元素屬性也很簡單：

removeAttr(name)

例. 移除所有連結的 title：

$("a").removeAttr("title");

jQuery 對 class 這個屬性有特別的處理

對於 class，jQuery 另外提供個別的函式來作 class 增刪的動作，這是為了可以方便疊加與移除特定的 class。

增加 class：

addClass(class)

例. 幫所有的段落加入 selected 和 highlight 類別：

$("p").addClass("selected highlight");

移除 class：

removeClass(class)

例. 移除 id 為 wrapper 的元素其 blue 這個類別：

$("#wrapper").removeClass("blue");

Value － Getter/Setter

val([val])，一個很常用到的 Attr. －取得與設定表單元素的 Value 值：

/* 取得表單的Value值 － 無參數 */
$(selectors).val();

/* 設定表單的Value值 － 有參數 */
$(selectors).val(val); 

/* 勾選check、select、radio中值為val的選項 － 有參數
    參數val：Array<String> */
$(selectors).val(val);

例如這樣用：

/* HTML */
<input type="text" /> 
/* jQuery codes */
$("input").val("Hello World!"); 
/* 設定後的 HTML */
<input type="text" value="Hello World!" />

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 css 的問題上簡直頭大，設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor；對透明度 opacity 設定上你要了解 IE 是用 filter··。jQuery 的寫法很簡單，就直接用 key/value 成對的一組屬性來設定，我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式：

css(name)

例. 取得第一個段落的字體顏色：

$("p").css("color");

替所有匹配到元素設定一種樣式：

css(name,value)

例. 替所有段落的透明度設為半透明：

$("p").css("opacity","0.5");
// 是的，設opacity就可以，jQuery已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式：

css(properties)

例. 替所有段落的字體設為紅色，背景設為藍色：

$("p").css({color:"red","background-color":"blue"});

若屬性中包含「-」，記得加上引號，沒有的話則可有可無。

元素的位置及寬高－常用的屬性獨立出來

height([val])、width([val]) －取得/設定元素的寬度和高度

/* 取得第一個匹配到的元素其height(高度 px)值 － 無參數 */
$("p").height(); //取得第一個段落的高度

/* 設定每個匹配到的元素其height(沒指定單位時預設為px)值 － 有參數 */
$("p").height(20); //將所有段落的高度設作20px

offset() －取得元素相對於當前視窗左上角的位置偏移量

返回值 Object{top,left}

一般在傳統JavaScript我們會用offsetLeft及offsetTop來取得元素在頁面上的座標，不過IE與FF瀏覽器解讀這兩個屬性是不一樣的，IE會解讀成目標元素跟父元素的left-top距離；FF則是相對於頁面上的left-top，所以在IE下我們一般都需要利用往父元素跑迴圈加總offsetLeft來取得元素在頁面上的座標值。不過，在jQuery中我們統一用offset()就可以囉！