jQuery addClass example

Change class name on click in jQuery

HTML

<h2>セレクタ</h2>

<div id="sample">
  IDが付与されています。
</div>

<table border="1">
  <tr>
    <th>姓</th>
    <th>名</th>
  </tr>
  <tr>
    <td class="lastName">山田</td>
    <td class="firstName">太郎</td>
  </tr>
  <tr>
    <td class="lastName">鈴木</td>
    <td class="firstName">次郎</td>
  </tr>
  <tr>
    <td class="lastName">佐藤</td>
    <td class="firstName">三郎</td>
  </tr>
</table>

JavaScript

$(function() {
  // idで要素を選択
  $("#sample").css("background-color", "yellow");
  
  // classで要素を選択
  $(".lastName").css("background-color", "red");
  
  $(".firstName").css("background-color", "green");
  
  // タグ名で要素を選択
  $("th").css("background-color", "pink");
});