2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
前回の記事で、「JavaScriptで複数の要素(divタグ、pタグなど)を取得して操作する方法」をご紹介しました。
しかし、forEach文、for文で繰り返し処理をしたコードのため、Web初心者の方には難しい内容だったかもしれません…。
jQueryで書くと、JavaScriptの素書きよりも圧倒的に楽に書けてしまいます！
目次
まずはjQueryを知らない方のために、少しご説明させていただきます。
jQueryは、JavaScriptを簡単に書けるようにしたJavaScriptライブラリです。
ライブラリとは、便利なプログラムがまとまっているファイルのこと。要するにJavaScriptを簡単に書けるように、あらかじめコードが詰まっているということです。
JavaScriptを素で書いたら何十行にもなってしまうコードを、jQueryでは数行で書けてしまいます。
それでは、jQueryで複数の要素(pタグ、divタグなど)を取得して操作してみましょう。
前回記事と同様に、同じクラスを指定しているpタグをクリックしたら色が赤くなるというスクリプトを実装します。
See the Pen jQueryで同一クラスの複数要素を操作 by spiqa design (@spiqa_design) on CodePen.
たったのこれだけです！
forEach文で繰り返し処理して～なんてする必要はありません。
それでは1つ1つ解説していきます。
$(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の書き方も、場面によって使い分けてみてください！
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/