サーチ…
備考
jQuery関数.attr()
、一致する要素のセットの最初の要素の属性の値を取得します。または、一致するすべての要素の1つ以上の属性を設定します。
$("input").attr("type");
これは、属性の値を取得するときにセレクタと一致する最初の要素( $("input").attr("type");
取得するだけで、最初の入力の型、複数ある場合)
ただし、属性を設定すると、一致するすべての要素に属性が適用されます。
HTML要素の属性値を取得する
単一のパラメータが.attr()
関数に渡されると、選択された要素の渡された属性の値が返されます。
構文:
$([selector]).attr([attribute name]);
例:
HTML:
<a href="/home">Home</a>
jQuery:
$('a').attr('href');
data
属性の取得:
jQueryはデータ属性を扱うために.data()
関数を提供しています。 .data
関数は、選択した要素のdata属性の値を返します。
構文:
$([selector]).data([attribute name]);
例:
Html:
<article data-column="3"></article>
jQuery:
$("article").data("column")
注意:
jQueryのdata()メソッドはdata- *属性にアクセスできますが、属性名の大文字小文字を区別します。 参照
HTML属性の設定値
ある要素に属性を追加する場合は、 attr(attributeName, attributeValue)
関数を使用できます。例えば:
$('a').attr('title', 'Click me');
この例では、ページ上のすべてのリンクにマウスオーバーテキスト"Click me"
を追加します。
同じ関数を使用して属性の値を変更します。
属性の削除
要素から属性を削除するには、 .removeAttr(attributeName)
関数を使用します。例えば:
$('#home').removeAttr('title');
ID home
要素からtitle
属性が削除されます。
attr()とprop()の違い
attr()
は、DOM関数getAttribute()
およびsetAttribute()
を使用してHTML属性を取得または設定します。 prop()
は、属性を変更せずにDOMプロパティを設定することによって機能します。多くの場合、2つは交換可能ですが、時にはもう一方が必要です。
チェックボックスをオンにして設定するには:
$('#tosAccept').prop('checked', true); // using attr() won't work properly here
プロパティを削除するには、 removeProp()
メソッドを使用します。同様に、 removeAttr()
は属性を削除します。