jQuery API の hasClass( className ) は、マッチした要素のクラス属性の値の中に、classNameに指定したクラス名が存在すれば、trueを返すメソッド。
記述方法
jQuery( セレクター ) . hasClass( クラス名 );
「セレクター」に指定した要素のクラス属性の値の中に、「クラス名」が存在すれば、trueを返す。
実装例（サンプル）
| セル | セル | セル |
| セル | セル | セル |
| セル | セル | セル |
実装例（サンプル）の動作について
背景色が赤色のセルをクリックすると、背景色が黄色に変わる。
背景色が黄色のセルをクリックすると、背景色が赤色に変わる。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-sample-table td' ) . click( function() {
if ( jQuery( this ) . hasClass( 'jquery-sample-td-red' ) ) {
jQuery( this ) . removeClass( 'jquery-sample-td-red' ) . addClass( 'jquery-sample-td-yellow' );
} else if ( jQuery( this ) . hasClass( 'jquery-sample-td-yellow' ) ) {
jQuery( this ) . removeClass( 'jquery-sample-td-yellow' ) . addClass( 'jquery-sample-td-red' );
}
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-table td' ) . click( function() {
if ( jQuery( this ) . hasClass( 'jquery-sample-td-red' ) ) {
jQuery( this ) . removeClass( 'jquery-sample-td-red' ) . addClass( 'jquery-sample-td-yellow' );
} else if ( jQuery( this ) . hasClass( 'jquery-sample-td-yellow' ) ) {
jQuery( this ) . removeClass( 'jquery-sample-td-yellow' ) . addClass( 'jquery-sample-td-red' );
}
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-sample-table td {
cursor: pointer;
}
.jquery-sample-td-red {
background-color: red;
}
.jquery-sample-td-yellow {
background-color: yellow;
}
-->
</style>
<!--
#jquery-sample-table td {
cursor: pointer;
}
.jquery-sample-td-red {
background-color: red;
}
.jquery-sample-td-yellow {
background-color: yellow;
}
-->
</style>
HTML
<table id="jquery-sample-table">
<tr>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<tr>
<tr>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<tr>
<tr>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<tr>
</table>
<tr>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<tr>
<tr>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<tr>
<tr>
<td class="jquery-sample-td-red">セル</td>
<td class="jquery-sample-td-yellow">セル</td>
<td class="jquery-sample-td-red">セル</td>
<tr>
</table>