jQueryの書き方｜基本構文・セレクター・メソッド・イベントを初心者向けに解説

$('#card').addClass('is-online');

$('#card');
jQuery('#card');

$('.message').text('更新しました');
$('.card').addClass('is-active');
$('.button').prop('disabled', true);

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

jQuery(function ($) {
  // HTMLの読み込み完了後に実行するコード
});

const currentText = $('.message').text();
$('.message').text('新しい文字');

const currentHref = $('.link').attr('href');
$('.link').attr('href', '/about/');

$('#status-button')
  .attr('aria-pressed', 'true')
  .text('オフラインにする');

$('#status-button').on('click', function () {
  $('.status-label').text('オンライン');
});

$('.status-button').on('click', function () {
  $(this).text('押されました');
});

<main class="demo" aria-labelledby="demo-title">
  <p class="eyebrow">JQUERY SYNTAX</p>
  <h1 id="demo-title">コードの役割を画面で確認</h1>
  <p class="lead">
    ボタン操作をきっかけに、カードのクラス・文字・状態を変更します。
  </p>

  <section id="profile-card" class="profile-card" aria-labelledby="profile-name">
    <div class="avatar" aria-hidden="true">W</div>
    <div class="profile-card__body">
      <span class="status-dot" aria-hidden="true"></span>
      <p class="status-label" role="status" aria-live="polite">
        オフライン
      </p>
      <h2 id="profile-name">Web制作を学習中</h2>
      <p>jQueryのセレクターとメソッドを練習しています。</p>
    </div>
  </section>

  <button id="status-button" type="button" aria-pressed="false">
    オンラインにする
  </button>
</main>

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

:root {
  color: #18324b;
  background: #edf4fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 32px 20px;
  display: grid;
  place-items: center;
}

.demo {
  width: min(760px, 100%);
  padding: 38px;
  border: 1px solid #d9e3ed;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgb(24 50 75 / 12%);
}

.eyebrow {
  margin: 0 0 8px;
  color: #1676d2;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

h1 {
  margin: 0;
  font-size: clamp(27px, 4vw, 39px);
  line-height: 1.35;
}

.lead {
  margin: 10px 0 26px;
  color: #5c7084;
}

.profile-card {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 2px solid #d9e3ed;
  border-radius: 18px;
  background: #f8fafc;
}

.avatar {
  display: grid;
  width: 78px;
  height: 78px;
  flex: none;
  place-items: center;
  border-radius: 22px;
  background: #dbe5ef;
  color: #536b83;
  font-size: 30px;
  font-weight: 800;
}

.profile-card__body {
  min-width: 0;
}

.status-dot,
.status-label {
  display: inline-block;
  vertical-align: middle;
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background: #8797a8;
}

.status-label {
  margin: 0;
  color: #65788b;
  font-size: 14px;
  font-weight: 700;
}

.profile-card h2 {
  margin: 6px 0 4px;
  font-size: 23px;
}

.profile-card__body > p:last-child {
  margin: 0;
  color: #61758a;
}

.profile-card.is-online {
  border-color: #45a47d;
  background: #f0faf5;
}

.profile-card.is-online .avatar {
  background: #16855e;
  color: #fff;
}

.profile-card.is-online .status-dot {
  background: #16a269;
  box-shadow: 0 0 0 4px rgb(22 162 105 / 14%);
}

.profile-card.is-online .status-label {
  color: #13714f;
}

button {
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #1676d2;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

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

button[aria-pressed="true"] {
  background: #536b83;
}

@media (max-width: 600px) {
  body {
    padding: 18px 14px;
  }

  .demo {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .profile-card {
    padding: 18px;
    align-items: flex-start;
  }

  .avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 23px;
  }
}

jQuery(function ($) {
  const $card = $('#profile-card');

  $('#status-button').on('click', function () {
    const isOnline = $card.hasClass('is-online');
    const nextOnline = !isOnline;

    $card.toggleClass('is-online', nextOnline);
    $card.find('.status-label').text(
      nextOnline ? 'オンライン' : 'オフライン'
    );

    $(this)
      .attr('aria-pressed', String(nextOnline))
      .text(nextOnline ? 'オフラインにする' : 'オンラインにする');
  });
});