【jQuery】複数の要素(divタグ、pタグなど)を取得して操作する方法【初心者向け】

前回の記事で、「JavaScriptで複数の要素(divタグ、pタグなど)を取得して操作する方法」をご紹介しました。

[card url=”https://note.spiqa.design/wp/javascript-class/”]

しかし、forEach文、for文で繰り返し処理をしたコードのため、Web初心者の方には難しい内容だったかもしれません…。

jQueryで書くと、JavaScriptの素書きよりも圧倒的に楽に書けてしまいます！

jQueryとは

まずはjQueryを知らない方のために、少しご説明させていただきます。

jQueryは、JavaScriptを簡単に書けるようにしたJavaScriptライブラリです。

ライブラリとは、便利なプログラムがまとまっているファイルのこと。要するにJavaScriptを簡単に書けるように、あらかじめコードが詰まっているということです。

JavaScriptを素で書いたら何十行にもなってしまうコードを、jQueryでは数行で書けてしまいます。

jQueryで複数の要素を取得してみよう

それでは、jQueryで複数の要素(pタグ、divタグなど)を取得して操作してみましょう。

前回記事と同様に、同じクラスを指定しているpタグをクリックしたら色が赤くなるというスクリプトを実装します。

See the Pen jQueryで同一クラスの複数要素を操作 by spiqa design (@spiqa_design) on CodePen.

たったのこれだけです！

forEach文で繰り返し処理して～なんてする必要はありません。

それでは1つ1つ解説していきます。

HTMLの読み込みが終わったら動作

$(document).ready(function(){
  // ここに処理を書く
});

「HTMLの読み込みが終わったら、処理をしますよ」という命令をしています。

HTML読み込みを待たないで処理をしてしまうと上手く動かないことがあります。

上記を書かなくても動くことがありますが、予期せぬエラーを防ぐためにも書いておいた方がいいですね。

クリックしたら動作させる

  $(".text").click(function(){
   // ここに処理を書く
});

続いて、2行目です。

見てなんとなくわかりますね。

「textクラスが指定されている要素をクリックしたら…」というイベントを指定しています。

クリックされた要素の文字色を赤くする

 $(this).css( "color", "red" );

「$(this)」は、クリックされたtextクラスのことを指します。

そのため、クリックされたpタグだけが、赤くなります。

「$(this)」を「$(.text)」としてしまうと、1つpタグをクリックしただけで全てのtextクラスを指定したpタグが赤くなってしまうのでご注意ください。

「css( “color”, “red” )」は見たまま、文字色を赤くする指定をしています。

まとめ

jQueryで複数の要素を取得して操作する方法をご紹介しました。

jQueryで書けばとっても簡単でわかりやすかったですね。

ただ、JavaScriptの書き方も知っていると知識が深くなり、コーディングがもっと楽しくなると思います。

JavaScriptの書き方も、jQueryの書き方も、場面によって使い分けてみてください！