自由自在にWebページを操作するjQueryのメソッドを解説

Web制作で機能の高いページを作ろうと思うとJavaScriptが必須のスキルです。HTML/CSSではクリックやスクロールなどのユーザーの行動に対してテキストを加える、削除することはほとんどできません。
そのためJavaScriptを使用する必要がありますが、JavaScriptはコードを読むことが初心者には難しいです。

そこでJavaScriptのライブラリの1つであるjQueryを使えば、初心者でも簡単にWebページに機能を持たせることができます。jQueryは感覚的にも分かりやすく、コードも短いため、初心者でも簡単に理解できます。

本記事ではjQueryを用いて初心者でも簡単に自由自在にWebページを操作するためのメソッドを紹介します。

jQueryのメソッドとは

jQueryの基本構文

jQueryを理解する上でまず、jQueryの基本構文を解説します。基本構文は「セレクタ」「メソッド」「パラメータ」の３つの要素で書きます。構文は以下の通りです。

$('セレクタ').メソッド(パラメータ);

セレクタはメソッドをどの要素に働かせるかを決めるためのものです。上記のコードが基本にはなりますが、このままでは常にjQueryのコードが働いている状態になります。そのため、クリックやスクロールなどのイベント毎に発生するように設定する場合がほとんどです。イベントを指定するメソッドもあり、基本構文は以下の通りです。

$('セレクタ').イベントメソッド(function () {
  $('セレクタ').メソッド(パラメータ);
});

jQueryのメソッドの役割

メソッドの役割は指定された設定に対して「どうする？」を設定します。つまり、基本構文の中で「何を？」がセレクタ、「どうする？」がメソッド、「どのように」がパラメータになります。

例えば、h1タグのCSSの文字色を赤に変えるというコードを考えます。セレクタ、メソッド、パラメータをそれぞれを当てはめると以下の通りです。

• セレクタ：h1タグ
• メソッド：CSSを変える
• パラメータ：colorをredにする。

そして、コードは以下の通りです。

$('h1').css('color', 'red');

メソッドの役割はセレクタで指定した要素に何をしたいかです。そして、パラメータでどうしたいかを設定します。メソッドによってパラメータの書き方は変わります。書き方はjQuery日本語リファレンスを参考にしてください。

jQuery日本語版リファレンス

jQueryのメソッド一覧

イベント

イベントを発生させるためのメソッドをまとめています。イベントは基本的にはonメソッドを使いますが、他の方法も覚えるのがおすすめです。イベントの引数にはfunction()が入り、{}の間にイベントが発生した時の処理を書きます。

要素を操作するメソッド

要素を操作するメソッドとはセレクタに囲まれた内容を変えることです。

属性を操作するメソッド

属性を操作するメソッドはHTMLのタグ内に書かれたclass名やvalueなどの属性を変更するために使われます。

jQueryのメソッドを複数使う

jQueryのメソッドは同じの要素（タグ）に対して、複数の処理を実施したいときは一行でコードを書くことができます。これをメソッドチェーンといいます。使えるとコードを短くできるので、覚えておくことをおすすめします。

例として、文字をクリックすると文字色を赤色に変えてテキストを変える方法を挙げます。コードは以下の通りです。

<p>クリックすると文字の色と内容が変わります</p>

$('p').on('click', function () {
  $(this).css('color', 'red').text('文字色と内容が変わりました');
});

1つの要素に対してメソッド1つだと二行になります。メソッドチェーンを使えば、一行でコードが書けるので、見やすいコードが書けます。ただし、あまりメソッドを繋げすぎると見にくくなるので、注意してください。

まとめ

jQueryはメソッドを使いこなすことで様々な機能をWebページに持たせることができます。しかし、本記事で挙げたメソッドを全て覚える必要はありません。jQueryでWebページに持たせたい機能を言語化できればOKです。

メソッドの使い方はGoogleを使えば簡単に分かります。しかし、何かできるかが分かっていなければ検索することもできません。暗記するよりも自分のしたいことをまとめて、できる方法を検索することをおすすめします。