jQueryメソッドの使い方｜種類・引数・メソッドチェーンを初心者向けに解説

jQueryのtext()やaddClass()を見ても、「メソッドとは何？」「どれを覚えればよいの？」と迷うことがありますよね。

jQueryメソッドは、選択した要素へ文字変更、class操作、表示切り替えなどの処理を行う命令です。基本は$('セレクター').メソッド(引数)という形で読みます。

この記事では、よく使うメソッドを目的別に整理し、引数、取得と変更、メソッドチェーン、特定要素の選択を実際のコードと表示結果で解説します。

jQueryメソッドとは

メソッドは、jQueryオブジェクトに対して実行できる関数です。次のコードでは、$('#message')が操作する要素、text()が文字を変更するメソッドです。

$('#message').text('変更後の文字');

丸括弧内の'変更後の文字'は引数です。引数とは、メソッドへ渡す値のことです。メソッドによって、必要な引数の数や種類が異なります。

よく使うjQueryメソッド一覧

すべてを暗記する必要はありません。「文字を変えたい」「classを外したい」のように目的から公式のjQuery API Documentationで調べる習慣を付けましょう。

text()で文字を取得・変更する

text()は、引数なしなら文字を取得し、引数ありなら文字を変更します。ボタンを押して変更した結果は次のとおりです。

index.htmlへボタンと変更対象を用意します。

<button type="button" id="textButton">変更する</button>
<p id="message">変更前の文字</p>

script.jsでクリック時に文字を変更します。

jQuery(function ($) {
  $('#textButton').on('click', function () {
    $('#message').text('text()で変更しました');
  });
});

現在の文字を取得する場合は、引数を付けません。

const message = $('#message').text();
console.log(message);

html()も同様に取得・変更できますが、引数の文字をHTMLとして扱います。利用者の入力値をそのままhtml()へ渡すと危険なため、通常の文字表示にはtext()を使います。

attr()とprop()の違い

attr()はHTML属性、prop()は現在のプロパティ状態を扱います。リンク先やaria-expandedにはattr()、チェックボックスの現在の選択状態にはprop('checked')が適しています。

const linkUrl = $('#detailLink').attr('href');
const isChecked = $('#agreement').prop('checked');

console.log(linkUrl, isChecked);

どちらも、2つ目の引数を渡すと値を変更できます。用途に合わない方を使うと、画面の現在状態と取得値がずれる場合があります。

メソッドチェーンで複数の操作をつなぐ

多くのjQueryメソッドは操作後のjQueryオブジェクトを返すため、同じ要素への処理を続けて書けます。これをメソッドチェーンと呼びます。

class、文字、属性をまとめて変更した結果は次のとおりです。

jQuery(function ($) {
  $('#chainButton').on('click', function () {
    $('#card')
      .addClass('is-active')
      .text('classと文字を変更しました')
      .attr('aria-label', '変更済み');
  });
});

同じ$('#card')を繰り返さずに済みます。ただし、対象が途中で変わるfind()などをつなぐ場合は、今どの要素を操作しているか確認してください。

eq()で複数要素から1つを選ぶ

eq()は、jQueryで選択した複数要素から指定位置の要素を選びます。2番目の項目を選んだ表示は次のとおりです。

index.htmlへ3つのリスト項目を用意します。

<button type="button" id="filterButton">2番目を選ぶ</button>
<ul id="itemList">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
</ul>

script.jsではeq(1)を指定します。

jQuery(function ($) {
  $('#filterButton').on('click', function () {
    $('#itemList li')
      .eq(1)
      .addClass('is-target');
  });
});

位置は0から数えるため、1番目はeq(0)、2番目はeq(1)です。ここは初心者が間違えやすい点です。

要素を追加・削除するメソッド

append()とprepend()は選択要素の内側、before()とafter()は選択要素の外側へ追加します。

$('#list').append('<li>末尾へ追加</li>');
$('#list').prepend('<li>先頭へ追加</li>');
$('#list').before('<p>リストの前</p>');
$('#list').after('<p>リストの後</p>');

remove()は選択要素自体、empty()は選択要素を残して中身だけを削除します。どこへ追加・どこまで削除するかをHTML構造で確認してください。

メソッドが動かないときの確認方法

• jQuery本体をscript.jsより先に読み込んでいるか
• セレクターが実在する要素を選んでいるか
• メソッド名の大文字・小文字とスペルが正しいか
• 必要な引数の数と型が合っているか
• 取得用と変更用の使い方を逆にしていないか

$(...).メソッド名 is not a functionと出る場合は、メソッド名、jQueryの版、必要なプラグインの読み込みを確認します。

メソッドの前に書くセレクターを詳しく確認したい場合は、次の記事を参考にしてください。

まとめ

• メソッドは、選択した要素へ処理を行う命令
• 基本構文は$('セレクター').メソッド(引数)
• 引数なしで取得、引数ありで変更するメソッドがある
• メソッドチェーンで同じ要素への操作をつなげられる
• eq()の位置は0から数える

まずはtext()、addClass()、on()の3つを動かし、取得する場合と変更する場合の違いを確かめてみてください。