jQuery API の attr( attributeName ) は、「attributeName」に指定した属性の値を取得するメソッド。属性を設定していない要素については、「undefined」を返す。
記述方法
jQuery( セレクター ) . attr( 属性名 )
「セレクター」に指定した要素のうち、最初にマッチした要素の「属性名」に指定した属性の値を取得。
実装例（サンプル）
最初のli要素のクラス属性値：
- 項目１
- 項目２
- 項目３
- 項目４
- 項目５
実装例（サンプル）の動作について
「属性値取得」ボタンをクリックすると、「最初のli要素のクラス属性値：」の右横に、「jquery-sample-li-red」と表示する。
「属性値取得」ボタンを再度クリックすると、「最初のli要素のクラス属性値：」の右横の「jquery-sample-li-red」を非表示にする。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
var jquerySampleValue = jQuery( '#jquery-sample-ul li' ) . attr( 'class' );
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-message' ) . text( jquerySampleValue );
},
function() {
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
var jquerySampleValue = jQuery( '#jquery-sample-ul li' ) . attr( 'class' );
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery( '#jquery-sample-message' ) . text( jquerySampleValue );
},
function() {
jQuery( '#jquery-sample-message' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<style>
<!--
.jquery-sample-li-red {
color: red;
}
.jquery-sample-li-blue {
color: blue;
}
-->
</style>
<!--
.jquery-sample-li-red {
color: red;
}
.jquery-sample-li-blue {
color: blue;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">属性値取得</button>
最初のli要素のクラス属性値：<span id="jquery-sample-message"></span>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li-red">項目１</li>
<li class="jquery-sample-li-blue">項目２</li>
<li class="jquery-sample-li-red">項目３</li>
<li class="jquery-sample-li-blue">項目４</li>
<li class="jquery-sample-li-red">項目５</li>
</ul>
<button id="jquery-sample-button">属性値取得</button>
最初のli要素のクラス属性値：<span id="jquery-sample-message"></span>
</p>
<ul id="jquery-sample-ul">
<li class="jquery-sample-li-red">項目１</li>
<li class="jquery-sample-li-blue">項目２</li>
<li class="jquery-sample-li-red">項目３</li>
<li class="jquery-sample-li-blue">項目４</li>
<li class="jquery-sample-li-red">項目５</li>
</ul>