【入門】jQueryの書き方〜 click( )イベントの使い方〜

2020.02.11
2022.05.04
jQuery

jQueryでよく使う、click( )イベントの使い方について、わかりやすく解説してほしい！

こういった疑問に答えていきます。
本日の内容は以下です。

clickイベント( )とは？
clickイベント( )の基本的な書き方
clickイベント( )の使い方

jQueryのclick( )イベントを使えば、「メニューボタンをクリックしたときに、メニューを表示させる」といったことができるようになります。

本記事を読めば、この「click( )イベントの使い方」について理解できるようになります！

では早速やっていきましょう！

1. jQueryのclick( )イベントの使い方
2. まとめ

jQueryのclick( )イベントの使い方

click( )イベントとは？

そもそもclick( )イベントとは何かと言うと、ある要素（セレクタ）をクリックすると、イベントを発生させることができるメソッドです。

一般的に、「ボタン」要素に対してclick( )イベントがよく使われます。
例えば、フォームの送信ボタンや、レスポンシブメニューなどをクリックすると、イベントを発生させるなどです。

では実際に、click( )イベントの基本的な書き方について見ていきましょう！

click( )イベントの基本的な書き方

click( )イベントの基本的な書き方は、下のように書いていきます。

$(function(){
　　$("セレクタ").click(function(){
　　　click時に発生させるイベント
　　　　});
　});

セレクタの部分に、クリックさせるセレクタを指定します。
そして、{ }のなかにクリック時に発生させるイベントを書いていきます。

では実際の書き方について見ていきましょう。

click( )イベントの使い方

今回は、「ボタンをクリックすると、メニューを開く」といったclick( )イベントを書いていきます。
まずはHTMLで、ボタン要素とメニューを書いていきます。

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="UTF-8">
   <title>Hello World</title>

  <style>

  </style>
  </head>
  <body>　
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 

   <button id="btn">ボタン</button>
    <nav id="menu">
     <ul>
       <li>menu</li>
       <li>menu</li>
       <li>menu</li>
     </ul>
    </nav>

  <script>

  </script>
  </body>
  </html>

ボタンには「id = btn」、メニューには「id = menu」とそれぞれid名をつけます。
一度ブラウザで確認して見ましょう。

うまく反映できたら、jQueryを書いていきます。
「ボタンをクリックしたら、メニューを表示」させるので、メニューは非表示にしておく必要があります。
CSSの「display: none ; 」でメニューを非表示にします。

そしてjQueryのclick( )イベントを使って、非表示になったメニューを表示させます。
書き方は下のように書いていきます。

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="UTF-8">
   <title>Hello World</title>

  <style>
   #menu{
     display: none;
    }
  </style>
  </head>
  <body>　
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> 

   <button id="btn">ボタン</button>
    <nav id="menu">
     <ul>
       <li>menu</li>
       <li>menu</li>
       <li>menu</li>
     </ul>
    </nav>

  <script>
    $(function(){
      $("#btn").click(function(){
        $("#menu").show();
      });
    });

  </script>
  </body>
  </html>

「ボタンをクリックしたら」なので、セレクタは「#btn」、そして{ }の中に、「メニューを表示させる」と言うメソッドを書いていきます。
セレクタは「#menu」、そしてメソッドは「show( )」で表示させます。

これでボタンをクリックしたら、メニューが表示されるはずです。
ブラウザで確認して見ましょう。

メニューが非表示になっているので、ボタンのみが表示されていると思います。
この状態で、ボタンをクリックして見ます。

そうすると、非表示にしたメニューが表示されるようになります。

このように、jQueryのclick( )イベントを使うことで、ボタンをクリックしたときに、メニューを表示させたりできます。

まとめ

jQueryのclick( )イベントは、よく使うメソッドでもあるので、覚えておくといいでしょう。
またclickイベント以外にも、様々なイベントがあるので、興味がある方は公式サイトを確認してみるといいでしょう。

では本日は以上になります。

オススメの教材

前の記事
【入門】jQueryの書き方　〜よく使うメソッド〜 2020.02.09
次の記事
【入門】jQueryの変数の使い方 2020.02.15