轉：http://blog.sina.com.cn/s/blog_5ea2cb7e0100c4cx.html JQuery?Attributes?方法說明(2009-02-17 01:02:33)

標簽：it?

分類：編程

attr( name )

參數:

• String

返回值:

• Object

取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果第一個匹配元素沒有這個屬性，則返回“undefined”

實例

取得頁面中第一個em元素的title屬性

var title = $("em").attr("title"); $("div").text(title);

attr( properties )

參數:

• Map

返回值:

• jQuery

將一個“名/值”形式的對象設置為所有匹配元素的屬性。 這是一種在所有匹配元素中批量設置很多屬性的最佳方式。注意，如果需要設置一個類屬性，則必須使用類名作為名，或使用addClass和removeClass來操作

實例

給img元素添加多項屬性

$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));

attr( key, value )

參數:

• String
• Object

返回值:

• jQuery

為所有匹配的元素設置一個屬性值

實例

禁用所有索引數大于0的按鈕

$("button:gt(0)").attr("disabled","disabled");

attr( key, fn )

參數:

• String
• Function

返回值:

• jQuery

為所有匹配的元素設置一個計算的屬性值。不提供值，而是提供一個函數，由這個函數計算的值作為屬性值。fn參數可以帶有一個參數，此參數為當前元素在jQuery集合中的索引數，fn中的this指代這個元素

實例

針對div元素在頁面中的位置來添加id屬性值

$("div").attr("id", function (arr) { return "div-id" + arr; }).each(function () { $("span", this).html("(ID = '<b>" + this.id + "</b>')"); });

removeAttr( name )

參數:

• String

返回值:

• jQuery

從每一個匹配的元素中刪除一個屬性

實例

點擊按鈕后使此按鈕的下一個輸入框可編輯

$("button").click(function () { $(this).next().removeAttr("disabled").focus().val("editable now"); });

addClass( class )

參數:

• String(一個或多個class名，多個class以空格分開)

返回值:

• jQuery

為每個匹配的元素添加指定的類名

實例

給匹配的元素添加“selected”類

$("p:last").addClass("selected");

給匹配的元素添加“selected”和“highlight”類

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

hasClass( class )

參數:

• String

返回值:

• Boolean

在匹配的元素集合中，如果至少有一個元素具有指定的class類，則返回true，否則返回false

實例

在匹配的元素集合中找出class屬性值為“selected”的元素

$("div#result1").append($("p:first").hasClass("selected").toString()); $("div#result2").append($("p:last").hasClass("selected").toString()); $("div#result3").append($("p").hasClass("selected").toString());

removeClass( class )

參數:

• String (可選)

返回值:

• jQuery

從所有匹配的元素中刪除全部或者指定的類，多個類名之間用空格分開。如果不指定類名，則刪除全部的類

實例

從匹配的元素集合中刪除“blue”類

$("p:even").removeClass("blue");

從匹配的元素集合中刪除“blue”和“under”類

$("p:odd").removeClass("blue under");

從匹配的元素集合中刪除所有類屬性

$("p:eq(1)").removeClass();

toggleClass( class )

參數:

• String

返回值:

• jQuery

如果存在（不存在）就刪除（添加）一個類(只支持單獨的類名)

實例

點擊時切換p元素的highlight類的有無

$("p").click(function () { $(this).toggleClass("highlight"); });

html( )

返回值:

• String

取得第一個匹配元素的html內容(使用innerHTML方法)。這個函數不能用于XML文檔(雖然可以用于XHTML文檔)。

實例

點擊一個段落，將它的HTML代碼轉化成內容顯示

$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });

html( val )

參數:

• String

返回值:

• jQuery

設置每一個匹配元素的html內容。這個函數不能用于XML文檔(雖然可以用于XHTML文檔)。

實例

將每一個div元素中的代碼設置為指定的HTML代碼

$("div").html("<span class='red'>Hello <b>Again</b></span>");

將每一個div元素中的代碼設置為指定的HTML代碼，然后再添加文本和style屬性

$("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")).css("color", "red");

text( )

返回值:

• String

取得所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效

實例

取得第一段中的文本，將文本作為HTML代碼添加到最后一段中

var str = $("p:first").text(); $("p:last").html(str);

text( val )

參數:

• String

返回值:

• jQuery

設置所有匹配元素的文本內容。這個函數與html()函數類似，但是將給定的<和>字符轉義以HTML字符實體代替

實例

將段落中的文本設置為<b>Some</b> new text.

$("p").text("<b>Some</b> new text.");

val( )

返回值:

• String, Array

獲得第一個匹配元素的當前值。在jQuery1.2中，此方法對包括select在內的所有元素都有效。對于多選項(multiple select)，則返回一個數組。

實例

取得輸入框的值

$("input").keyup(function () { var value = $(this).val(); $("p").text(value); }).keyup();

從單選項中取得一個值，從多選項中取得一個數組

function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || [];

val( val )

參數:

• String

返回值:

• jQuery

設置每一個匹配元素的值。在jQuery 1.2中，此方法也可以設置select元素的值，但是需要指定恰當的選項值。

實例

設置輸入框的值

$("button").click(function () { var text = $(this).text(); $("input").val(text); });

val( val )

參數:

• Array[String]

返回值:

• jQuery

選擇或設置所有的單選按鈕、復選框和下拉列表為指定的val值

實例

設置單選按鈕、多選菜單和選擇框

$("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);

轉載于:https://www.cnblogs.com/wbcms/archive/2009/03/13/1410466.html

總結

以上是生活随笔為你收集整理的JQuery Attributes 方法说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。