jQuery API の attr( map ) は、「map」に指定した属性名と属性値の対応マップの通りに設定するメソッド。
記述方法
jQuery( 'セレクター' ) . attr( { 属性名: '属性値', 属性名: '属性値', 属性名: '属性値' ... } )
「セレクター」に指定した要素の、「属性名」に指定した属性の値を、「属性値」に指定した値に設定。
記述例
jQuery( '#sample img' ) . attr( { src: 'sample.gif', title: 'サンプル' } )
idが「sample」である要素の子孫要素であるimg要素の、src属性を「sample.gif」、title属性を「サンプル」に設定。
実装例(サンプル)
実装例(サンプル)の動作について
「属性値取得」ボタンをクリックすると、画像が出現する。
「属性値取得」ボタンを再度クリックすると、画像を非表示にし、「属性値設定ボタンを押してください。」と表示する。
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample img' ) . attr( { src: 'sample.jpg', title: 'サンプル' } );
},
function() {
jQuery( '#jquery-sample img' ) . attr( { src: '', title: '' } );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample img' ) . attr( { src: 'sample.jpg', title: 'サンプル' } );
},
function() {
jQuery( '#jquery-sample img' ) . attr( { src: '', title: '' } );
}
);
} );
// -->
</script>
HTML
<p>
<button id="jquery-sample-button">属性値設定</button>
</p>
<p id="jquery-sample">
<img alt="属性値設定ボタンを押してください。" />
</p>
<button id="jquery-sample-button">属性値設定</button>
</p>
<p id="jquery-sample">
<img alt="属性値設定ボタンを押してください。" />
</p>