jQuery 針對 HTML Tag 屬性的操作方式 (Attributes)

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}