JavaScript

2021.02.05

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

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

しかし、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の書き方も、場面によって使い分けてみてください!

0

関連記事

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2021.03.30

    【jQuery】text()メソッドでHTML要素内のテキストを操作する

    HTML5

    JavaScript

おすすめ記事

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!