JQuery Attributes 方法说明
| 標(biāo)簽:it? | 分類:編程 |
attr( name )
參數(shù):
- String
返回值:
- Object
取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果第一個匹配元素沒有這個屬性,則返回“undefined”
實例
取得頁面中第一個em元素的title屬性
var title = $("em").attr("title"); $("div").text(title);attr( properties )
參數(shù):
- Map
返回值:
- jQuery
將一個“名/值”形式的對象設(shè)置為所有匹配元素的屬性。 這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。注意,如果需要設(shè)置一個類屬性,則必須使用類名作為名,或使用addClass和removeClass來操作
實例
給img元素添加多項屬性
$("img").attr({ src: "/images/hat.gif", title: "jQuery", alt: "jQuery Logo" }); $("div").text($("img").attr("alt"));attr( key, value )
參數(shù):
- String
- Object
返回值:
- jQuery
為所有匹配的元素設(shè)置一個屬性值
實例
禁用所有索引數(shù)大于0的按鈕
$("button:gt(0)").attr("disabled","disabled");attr( key, fn )
參數(shù):
- String
- Function
返回值:
- jQuery
為所有匹配的元素設(shè)置一個計算的屬性值。不提供值,而是提供一個函數(shù),由這個函數(shù)計算的值作為屬性值。fn參數(shù)可以帶有一個參數(shù),此參數(shù)為當(dāng)前元素在jQuery集合中的索引數(shù),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 )
參數(shù):
- String
返回值:
- jQuery
從每一個匹配的元素中刪除一個屬性
實例
點擊按鈕后使此按鈕的下一個輸入框可編輯
$("button").click(function () { $(this).next().removeAttr("disabled").focus().val("editable now"); });addClass( class )
參數(shù):
- String(一個或多個class名,多個class以空格分開)
返回值:
- jQuery
為每個匹配的元素添加指定的類名
實例
給匹配的元素添加“selected”類
$("p:last").addClass("selected");給匹配的元素添加“selected”和“highlight”類
$("p:last").addClass("selected highlight");hasClass( class )
參數(shù):
- 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 )
參數(shù):
- String (可選)
返回值:
- jQuery
從所有匹配的元素中刪除全部或者指定的類,多個類名之間用空格分開。如果不指定類名,則刪除全部的類
實例
從匹配的元素集合中刪除“blue”類
$("p:even").removeClass("blue");從匹配的元素集合中刪除“blue”和“under”類
$("p:odd").removeClass("blue under");從匹配的元素集合中刪除所有類屬性
$("p:eq(1)").removeClass();toggleClass( class )
參數(shù):
- String
返回值:
- jQuery
如果存在(不存在)就刪除(添加)一個類(只支持單獨的類名)
實例
點擊時切換p元素的highlight類的有無
$("p").click(function () { $(this).toggleClass("highlight"); });html( )
返回值:
- String
取得第一個匹配元素的html內(nèi)容(使用innerHTML方法)。這個函數(shù)不能用于XML文檔(雖然可以用于XHTML文檔)。
實例
點擊一個段落,將它的HTML代碼轉(zhuǎn)化成內(nèi)容顯示
$("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); });html( val )
參數(shù):
- String
返回值:
- jQuery
設(shè)置每一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔(雖然可以用于XHTML文檔)。
實例
將每一個div元素中的代碼設(shè)置為指定的HTML代碼
$("div").html("<span class='red'>Hello <b>Again</b></span>");將每一個div元素中的代碼設(shè)置為指定的HTML代碼,然后再添加文本和style屬性
$("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")).css("color", "red");text( )
返回值:
- String
取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。這個方法對HTML和XML文檔都有效
實例
取得第一段中的文本,將文本作為HTML代碼添加到最后一段中
var str = $("p:first").text(); $("p:last").html(str);text( val )
參數(shù):
- String
返回值:
- jQuery
設(shè)置所有匹配元素的文本內(nèi)容。這個函數(shù)與html()函數(shù)類似,但是將給定的<和>字符轉(zhuǎn)義以HTML字符實體代替
實例
將段落中的文本設(shè)置為<b>Some</b> new text.
$("p").text("<b>Some</b> new text.");val( )
返回值:
- String, Array
獲得第一個匹配元素的當(dāng)前值。在jQuery1.2中,此方法對包括select在內(nèi)的所有元素都有效。對于多選項(multiple select),則返回一個數(shù)組。
實例
取得輸入框的值
$("input").keyup(function () { var value = $(this).val(); $("p").text(value); }).keyup();從單選項中取得一個值,從多選項中取得一個數(shù)組
function displayVals() { var singleValues = $("#single").val(); var multipleValues = $("#multiple").val() || [];val( val )
參數(shù):
- String
返回值:
- jQuery
設(shè)置每一個匹配元素的值。在jQuery 1.2中,此方法也可以設(shè)置select元素的值,但是需要指定恰當(dāng)?shù)倪x項值。
實例
設(shè)置輸入框的值
$("button").click(function () { var text = $(this).text(); $("input").val(text); });val( val )
參數(shù):
- Array[String]
返回值:
- jQuery
選擇或設(shè)置所有的單選按鈕、復(fù)選框和下拉列表為指定的val值
實例
設(shè)置單選按鈕、多選菜單和選擇框
$("#single").val("Single2"); $("#multiple").val(["Multiple2", "Multiple3"]); $("input").val(["check2", "radio1"]);轉(zhuǎn)載于:https://www.cnblogs.com/wbcms/archive/2009/03/13/1410466.html
總結(jié)
以上是生活随笔為你收集整理的JQuery Attributes 方法说明的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 面试三
- 下一篇: 【转】构造函数的执行序列