jQueryセレクタの書き方｜基本・絞り込み・thisの使い方を初心者向けに解説

const $items = $('.item');

$items.addClass('is-active');

<h2 id="section-title">おすすめ教材</h2>

<ul class="item-list">
  <li class="item">HTML入門</li>
  <li class="item">CSS入門</li>
  <li class="item">jQuery入門</li>
</ul>

$('li');             // liタグをすべて選ぶ
$('.item');          // itemクラスを持つ要素をすべて選ぶ
$('#section-title'); // section-titleというidの要素を選ぶ
$('h2, .item');      // h2とitemクラスの両方を選ぶ

<nav class="global-nav">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">このサイトについて</a></li>
  </ul>
</nav>

$('.global-nav a');      // global-nav内にあるすべてのa
$('.global-nav > ul');   // global-navの直下にあるulだけ
$('.global-nav > li');   // 該当なし。liはulの子要素だから

$('input[name="email"]');                 // nameがemailの入力欄
$('input[type="checkbox"]:checked');      // 選択済みのチェックボックス
$('.product[data-status="recommended"]'); // おすすめの商品
$('a[href^="https://"]');                // https://で始まるリンク

const $items = $('.item');

$items.first(); // 最初の1件
$items.last();  // 最後の1件
$items.eq(1);   // 2番目の1件。番号は0から始まる

<div class="actions">
  <button type="button" id="select-recommended">おすすめを選ぶ</button>
  <button type="button" id="reset">リセット</button>
</div>

<ul class="product-list">
  <li>
    <button type="button" class="product-card" data-status="recommended">
      <span class="tag">おすすめ</span>
      <strong>はじめてのHTML</strong>
      <span>基礎から学べる入門書</span>
    </button>
  </li>
  <li>
    <button type="button" class="product-card" data-status="standard">
      <span class="tag">定番</span>
      <strong>CSSレイアウト練習帳</strong>
      <span>手を動かして身につける</span>
    </button>
  </li>
  <li>
    <button type="button" class="product-card" data-status="recommended">
      <span class="tag">おすすめ</span>
      <strong>jQueryサンプル集</strong>
      <span>よく使う動きを試せる</span>
    </button>
  </li>
</ul>

<p id="result" aria-live="polite">まだ選択されていません</p>

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>

* {
  box-sizing: border-box;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.actions button {
  min-height: 46px;
  padding: 10px 20px;
  border: 2px solid #1676d2;
  border-radius: 999px;
  background: #1676d2;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card {
  display: block;
  width: 100%;
  height: 100%;
  padding: 22px;
  border: 2px solid #d9e3ef;
  border-radius: 18px;
  background: #f8fbff;
  color: #18304a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.product-card strong,
.product-card > span:last-child {
  display: block;
}

.product-card.is-selected {
  border-color: #1676d2;
  background: #eaf5ff;
  transform: translateY(-4px);
}

button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}

const $cards = $('.product-card');

$('#select-recommended').on('click', function () {
  $cards.removeClass('is-selected');

  const $recommended = $('.product-card[data-status="recommended"]');
  $recommended.addClass('is-selected');

  $('#result').text(`${$recommended.length}件のおすすめを選択しました`);
});

$('#reset').on('click', function () {
  $cards.removeClass('is-selected');
  $('#result').text('選択をリセットしました');
});

$cards.on('click', function () {
  $(this).toggleClass('is-selected');

  const itemName = $(this).find('strong').text();
  $('#result').text(itemName + 'を切り替えました');
});

$('.product-list').on('click', '.product-card', function () {
  $(this).toggleClass('is-selected');
});

const $targets = $('.product-card');

console.log($targets.length);

const $productList = $('.js-product-list');
const $cards = $productList.find('[data-role="product-card"]');

$cards.addClass('is-ready');