「クリックしたら実行する」を書いてみましょう。
クリックしたら実行するスクリプトを書く!
<!doctype html> <html lang="jp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script> $(function () { $("#btn").click(function () { $(".text").css("color", "red"); }); }); </script> </head> <body> <button id="btn">jQuery</button> <p class="text">jQuery</p> <p class="text">はじめまして</p> <p class="text">よろしくおねがいします</p> </body> </html>

このように書きます。
clickのほかにも「きっかけ」にできるものがあります。
$("#btn").click(function () { //クリックしたら実行 }); $("#btn").hover(function () { //ホバーしたら実行 }); $("#btn").touchstart(function () { //タッチを開始したら実行(スマホ向け) });
その他の「トリガー」については他の記事で紹介しますね!
this を使ってみる
クリックイベント内でclassを利用すると全部が反応してしまって困ることがあります。
そんなときは$(this)を利用してみましょう。クリックした要素を起点に指定ができるので便利です。
ダメな例↓
<!doctype html> <html lang="jp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script> $(function () { $(".list-item").click(function () { $(".list-item").children("p").slideToggle(); }); }); </script> <style> .list-item p { display: none; } </style> </head> <body> <ul class="list"> <li class="list-item"> クリック! <p>テキスト</p> </li> <li class="list-item"> クリック! <p>テキスト</p> </li> <li class="list-item"> クリック! <p>テキスト</p> </li> </ul> </body> </html>
thisを利用した場合
<!doctype html> <html lang="jp"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>jQuery</title> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> <script> $(function () { $(".list-item").click(function () { $(this).children("p").slideToggle(); //clickしたものを指す }); }); </script> <style> .list-item p { display: none; } </style> </head> <body> <ul class="list"> <li class="list-item"> クリック! <p>テキスト</p> </li> <li class="list-item"> クリック! <p>テキスト</p> </li> <li class="list-item"> クリック! <p>テキスト</p> </li> </ul> </body> </html>