jQueryでできること

clickイベントを使っていろいろしてみよう

clickイベントの書き方

$("セレクタ").click(function(){
~クリックの後に実行させたい処理~
});

clickでクラスを付けたり消したり

ボタンをクリックすると文字列のクラスが消えます。

グレイになーれ

ボタンをクリックすると文字列のクラスが付きます。

青になーれ

ボタンをクリックすると文字列のクラスが付いたり、消えたり。

青になったり、グレイになったり

使っているメソッド

.removeClass(); => 指定した要素のCSSクラスを削除。
.addClass(); => 指定した要素のCSSクラス追加する。
.toggleClass(); => 指定した要素にCSSクラスが無ければ追加し、あれば削除する。

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <style>
        .color{
          color: blue;
          font-weight: bold;
        }
      </style>
    </head>

      <body>
        <div class="sample">
          <p>ここのクラスが変わるよ～</p>
          <button id="click">click!</button>
        </div>
      </body>
    </html>

jQuery部分

    $(function(){
      $("#click").click(function(){
        $(".sample p").toggleClass("color");
      });
    });

clickで要素を消したり出したりする

ボタンをクリックすると要素が見えなくなります。

消えます。

ボタンをクリックすると要素が出てきます

ボタンをクリックすると要素が出たり消えたりします。

出現！したり、消えたり。

使っているメソッド

hide(); => 指定した要素を消します。(style="display: none;"になります。)
show(); => 指定した要素を出現させます。(style="display: block;"になります。)
fadeToggle(); => 指定した要素を出現させたり消したりできます。(style="display: block or none;"になります。)

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
        <div class="sample">
          <p>消えます。</p>
          <button id="click">click!</button>
        </div>
        <div class="sample2">
          <p style="display: none;">出現！</p>
          <button id="click2">click!</button>
        </div>
        <div class="sample3">
          <p>出現！したり、消えたり。</p>
          <button id="click3">click!</button>
        </div>
      </body>
    </html>

jQuery部分

      $(function(){
        $("#click").click(function(){
          $(".sample p").hide();
        });

        $("#click2").click(function(){
          $(".sample2 p").show();
        });

        $("#click3").click(function(){
          $(".sample3 p").fadeToggle();
        });
      });

clickで要素をスライドさせる

ボタンをクリックすると要素がスライドアップします。

スライドアップするよ～
スライドアップするよ～
スライドアップするよ～

ボタンをクリックすると要素がスライドダウンします。

ボタンをクリックすると要素がスライドアップしたり、スライドダウンしたり。

スライドアップとかダウンするよ～
スライドアップとかダウンするよ～
スライドアップとかダウンするよ～

使っているメソッド

slideUp(); => 指定した要素をスライドアップさせます。(style="display: none;"になります。)
slideDown(); => 指定した要素をスライドダウンさせます。(style="display: block;"になります。)
slideToggle(); => 指定した要素をスライドアップとかスライドダウンさせます。(style="display: block or none;"になります。)

html部分

    <html>
    <head>
      <meta charset="UTF-8">
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

      <body>
        <div class="sample">
          <p>スライドアップするよ～<br>スライドアップするよ～<br>スライドアップするよ～<br></p>
          <button id="click">click!</button>
        </div>
        <div class="sample2">
          <p style="display:none;">スライドダウンしました～<br>スライドダウンしました～<br>スライドダウンしました～<br></p>
          <button id="click2">click!</button>
        </div>
        <div class="sample3">
          <p>スライドアップとかダウンするよ～<br>スライドアップとかダウンするよ～<br>スライドアップとかダウンするよ～<br></p>
          <button id="click3">click!</button>
        </div>
      </body>
    </html>

jQuery部分

      $("#click").click(function(){
        $(".sample p").slideUp();
      });

      $("#click2").click(function(){
        $(".sample2 p").slideDown();
      });

      $("#click3").click(function(){
        $(".sample3 p").slideToggle();
      });
      });