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

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

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

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

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

jQueryのメソッドとは

jQueryの基本構文

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

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

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

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

jQueryのメソッドの役割

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

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

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

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

$(“h1”).css(“color”,”red”);

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

jQuery日本語版リファレンス

jQueryのメソッド一覧

イベント

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

メソッド機能
on第一引数に指定されたイベントが発生したら実行
clickクリックされる
mouseover要素にカーソルが乗る
mouseout要素にカーソルが外れる
dbclickダブルクリックされる
scrollスクロールされる
keydownキーが押される

要素を操作するメソッド

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

メソッド機能
textテキストを追加、変更する
htmlhtmlを追加、変更する
append要素の最後に追加する
prepend要素の先頭に追加する
remove要素を削除する
find要素を取得する
toggle表示非表示を繰り返す
hide要素を隠す
after指定した要素の後ろに追加する
before指定した要素の前に追加する
children子要素を取得する
parent親要素を取得する
not指定した要素以外を操作する
show隠していた要素を表示する

属性を操作するメソッド

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

メソッド機能
csscssを操作する
removeClassクラス名を削除する
addClassクラス名を追加する
toggleClassClassの適用と非適用を繰り返す
attr属性や属性の値を取得する
propプロパティやプロパティ名を取得する

jQueryのメソッドを複数使う

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

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

<p>クリックすると文字の色と内容が変わります</p>
$(“p”).on(“click”,function(){
  $(this).css(“color”,”red”).text(“文字色と内容が変わりました”);
});

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

まとめ

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

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

SHARE