jQuery 屬性與樣式 (Attributes & CSS)

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

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

取得選取到的元素之屬性值：

.attr(attributeName)

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

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

替選取到的元素設定屬性值：

.attr(attributeName, value)

例如，替所有連結的 title 屬性設為 Enjoy jQuery：

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

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

.attr(attributes)

例如，同時改變 alt 和 title 屬性：

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

移除元素屬性也很簡單：

.removeAttr(attributeName)

例如，移除所有連結的 title 屬性：

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

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

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

增加 class:

.addClass(className)

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

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

移除 class：

.removeClass(className)

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

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

Value - Getter/Setter

val，一個很常用到的方法，用來取得和設定表單元素的 value 值：

.val() // get
.val(value) // set

例如，取得表單元素的值：

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如，設定表單元素的值：

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

jQuery 對於樣式的操作 (CSS)

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

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

.css(propertyName)

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

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

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

.css(propertyName, value)

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

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

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

.css(properties)

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

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

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

.width() // 取得元素寬度
.width(value) // 設定元素寬度

.height() // 取得元素高度
.height(value) // 設定元素高度

.width() .height() 抓到的值是元素內容寬、高度，不包含 padding, border, margin。

例如，取得第一個匹配到的段落元素高度 (px) (無參數)

$('p').height();

例如，設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)

$('p').height(100);

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

.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

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

看過上述 jQuery 對於屬性及樣式的操作，是不是簡化了我們許多不必要的煩惱，讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢！