こちらではjQueryのメソッドのうち、属性の取得や設定をするメソッドについて解説しています。
目次
属性の取得や設定をするメソッド
jQueryの属性の取得や設定をするメソッドを表にまとめました。
メソッド | 解説 |
---|---|
attr(name) | nameで指定した属性の値を取得 |
attr(name, value) | nameで指定した属性の値をvalueにする |
attr(map) | オブジェクト形式で属性を設定する |
attr(name, function) | 属性の値をコールバック関数で設定する |
removeAttr(name) | nameで指定した属性を削除する |
attr(name) 属性の値を取得する
nameで指定した属性の値を取得するメソッドです。
選択した要素のうち、一番最初の要素の属性を取得します。
attr(name)の使い方
<a href="https://aaa.com/">○○</a>
<a href="https://bbb.com/">△△</a>
<a href="https://ccc.com/">□□</a>
上記のHTMLにおいて
var url = $('a').attr('href')
とするとurl
はhttps://aaa.com/
となります。
attr(name, value) 属性の値を設定する
nameで指定した属性の値をvalueに設定するメソッドです。
attr(name, value)の使い方
<a href="https://aaa.com/">○○</a>
上記のHTMLにおいて
$('a').attr('target', '_blank');
とすると
<a href="https://aaa.com/" target="_blank">○○</a>
となります。
attr(map) 複数の属性を設定する
{name:valu, name:value, …}のオブジェクト形式で引数を渡すことで、複数の属性を設定するメソッドです。
attr(map)の使い方
<a href="https://aaa.com/">○○</a>
上記のHTMLにおいて
$('a').attr({target:'_blank', rel:'nofollow'});
もしくは
$('a').attr({'target':'_blank', 'rel':'nofollow'});
とすると
<a href="https://aaa.com/" target="_blank" rel="nofollow">○○</a>
となります。
attr(name, function) 関数で属性を設定する
nameで指定した属性の値を関数(function)で設定するメソッドです。
functionには2つの引数を渡すことができます。1つ目はインデックス番号、2つ目は現在の属性の値です。
attr(name, function)の使い方
<img src="1.jpg" alt="画像">
<img src="2.jpg" alt="画像">
<img src="3.jpg" alt="画像">
上記のHTMLにおいて
$('img').attr('alt', function(index, value){
return value + index;
});
とすると
<img src="1.jpg" alt="画像0">
<img src="2.jpg" alt="画像1">
<img src="3.jpg" alt="画像2">
となります。
もう1つ例を挙げると、
<a href="https://aaa.com/" target="_blank">○○</a>
<a href="https://bbb.com/" target="_blank">△△</a>
<a href="https://ccc.com/">□□</a>
上記のHTMLにおいて
$('a').attr('rel', function(index, value){
if( this.target == "_blank" ) return 'noopener';
});
とすると
<a href="https://aaa.com/" target="_blank" rel="noopener">○○</a>
<a href="https://bbb.com/" target="_blank" rel="noopener">△△</a>
<a href="https://ccc.com/">□□</a>
となります。
removeAttr(name) 属性を削除する
nameで指定した属性を削除します。
removeAttr(name)の使い方
<img src="1.jpg" alt="画像0">
<img src="2.jpg" alt="画像1">
<img src="3.jpg" alt="画像2">
上記のHTMLにおいて
$('img').removeAttr('alt');
とすると
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
となります。
[prism]