jQueryのclickメソッドを使ってクリック時の処理を設定する方法
プログラミング初心者向けに、jQueryのclickメソッドを使ってクリック時のイベント処理を設定する方法を解説しています。clickメソッドはjQueryを使う上で必須の知識なので、ぜひ自分でも使えるようになっておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptのライブラリであるjQueryのclickメソッドを使った処理の書き方を解説しています。
ボタンを押した時などclickメソッドはjQueryの中でもよく使うものなので、今のうちに習得しておきましょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
clickメソッドとは
jqueryのメソッドは通常以下のようなfunction内に記述されていきます。
$(function(){
//処理の内容
});
しかしこのプログラムだと、ページがリロードした瞬間にコードが実行（発火とも言います）されてしまうため、jQueryの本来の目的である、ページを動的に変更するという目的が達成できません。
そのためjQueryには発火するタイミングを指定するメソッドが用意されています。clickメソッドは、指定したボタンが押された時に呼び出される処理を作ることができます。
田島メンター！jQueryで要素を取得できるようになったので、取得した要素にイベントを設定したいのですが、jQueryで出来ますか？
もちろん！とりあえずclickイベントを設定してみよう！
ボタンクリックなど、クリックイベントは基本ですよね。
clickメソッドを使って書くんだよ。さっそく見てみよう！
clickメソッドの書き方
clickメソッドの書き方は以下の通りです。
$(function(){
$(“セレクタ”).click(function(){
//処理の内容
});
});
セレクタでボタンを指定した後に、clickメソッドを呼びだします。
clickメソッドの引数でfunctionを呼び出し、functionの中身が実行されます。
実際に書いてみよう
それではclickメソッドを使用して簡単な処理を書いていきましょう。
ボタンをクリックすると文字が大きくなる
今回はボタンをクリックすると、文字が大きくなるというプログラムを書いていきます。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$("button").click(function() {
$(".big").css("font-size", "50px");
});
});
</script>
</head>
<body>
<button>button</button>
<p class="big">big</p>
</body>
</html>
セレクタでbuttonを指定し、cssメソッドでフォントサイズを大きくしています。
表示結果
以下のようにクリック時に文字が大きくなっていれば成功です。
jQueryを利用したclickメソッドで文字を消すプログラム
それではclickメソッドを使用して簡単な処理を書いていきましょう。
今回は文字をクリックすると、文字が消えるというプログラムを書いていきます。
処理としては次の3行の部分で処理しています。
$("p").click(function () {
$(this).slideUp();
});
1行目でp要素に対してclickした場合の処理を関数化しています。
今回は、無名関数のfunction()です。
処理の内容は、sliceUpで該当文字を上に移動させることで消えたように表示しています。
実際は消えているわけではなく、jQueryで消えたように見せている点が重要です。
つまり、コンピューターから見ると、文字が存在しているということです。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$("p").click(function () {
$(this).slideUp();
});
</script>
</head>
<body>
1番目の段落
2番目の段落
3番目の段落
4番目の段落
5番目の段落
6番目の段落
</body> </html>
表示結果
jQueryを利用したclickメソッドで文字が現れるプログラム
それではjQueryを利用したclickメソッドで文字が現れるプログラムを書いていきましょう。
今回はボタンをクリックすると、文字が現れます。
処理としては次の3行の部分で処理しています。
$('button').click(function() {
$(this).next().text('クリックありがとうございます！');
});
1行目でボタンをクリックした時の処理を宣言しています。
今回は、ボタンの下に文字が表示されます。
$(this).next()で、ボタンの次の要素である
タグに対して、.text(‘クリックありがとうございます！’)を表示させています。
ここでは、クリックすることで表示させているので、html上はクリックありがとうございます！は存在しません。
つまり、コンピューターからみた時に、クリックされた時初めて、html上にクリックありがとうございます！が存在するということです。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('button').click(function() {
$(this).next().text('クリックありがとうございます！');
});
</script>
</head>
<body>
<button>クリックしてください。</button<>
</body> </html>
表示結果
jQueryを利用したclickメソッドで処理を中止させる
それではjQueryを利用したclickメソッドで処理を中止させるプログラムを書いていきましょう。
今回はリンク文字をクリックすると、リンクは無効になりました！と表示されます。
処理としては次の4行の部分で処理しています。
$('a').click(function() {
alert('リンクは無効になりました！');
return false;
});
1行目でリンクをクリックした時の処理を宣言しています。
alert(‘リンクは無効になりました！’);でリンクは無効になりました！というダイアログが発生します。
3行目のreturn false;で、リンク遷移処理を中断します。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$('a').click(function() {
alert('リンクは無効になりました！');
return false;
});
</script>
</head>
<body>
<a href="http://techacademy.jp">テックアカデミーへのリンクです！</a>
</body>
</html>
表示結果
動的に追加した要素に対するclickメソッドの書き方
基本的なclickメソッドの書き方は上記で説明したとおりですが、動的に追加した要素に対してclickイベントを設定したい場合、この方法では上手くいきません。
以下、clickイベントが上手く動かないコードの例です。
$(function() {
$("p").click(function () {
$(this).slideUp();
});
$('button').click(function() {
$(this).after('<br><p>次にこちらをクリックして下さい（何も起きません）</p>');
});
});
2行目で、<p>要素に対してclickイベントを設定しています。そして、6行目の$(this).after で、ボタンの次に<p>要素を追加します。しかし、<p>要素をクリックしても、何も起きません。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$("p").click(function () {
$(this).slideUp();
});
$('button').click(function() {
$(this).after('<br><p>次にこちらをクリックして下さい（何も起きません）</p>');
});
});
</script>
</head>
<body>
<button>クリックしてください。</button>
</body>
</html>
表示結果
理由は、clickイベントを設定した時は<p>要素が存在しないためです。
動的に追加した要素に対してclickイベントを設定したい場合は、親要素に対してonメソッドで、イベントと子要素を紐付けます。具体的には以下のように記述します。子要素に、clickイベントを設定したい要素を記述します。
$(親要素).on("click", "子要素", function(){
// click時の処理を記述
});
先程のコードを修正すると以下のようになります。
$(function() {
$(document).on("click", "p", function () {
$(this).slideUp();
});
$('button').click(function() {
$(this).after('<br><p>次にこちらをクリックして下さい</p>');
});
});
2行目で、親要素 document に対してonメソッドで、clickイベントと子要素pを紐付けしています。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
$(document).on("click", "p", function () {
$(this).slideUp();
});
$('button').click(function() {
$(this).after('<br><p>次にこちらをクリックして下さい（何も起きません）</p>');
});
});
</script>
</head>
<body>
<button>クリックしてください。</button>
</body>
</html>
表示結果
動的に追加した要素に対して、うまくclickイベントを設定することができました。
まとめ
今回はclickメソッドを使用して簡単なコードを書いていきました。jQueryメソッドは実際の現場でも1,2を争うほどよく使われるメソッドです。ぜひ理解を深めておくようにしましょう。
clickメソッドの中に関数を書いて、クリック時の処理を書く感じですか。
その通り！
他のマウスイベントやキーボードイベントや、hoverイベントなどもclickメソッドと同じようにメソッドがあるんですか？
あるけど、今はonメソッドを使ってイベント名と処理を書くほうが多くなってたりもするんだよ。
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
