jQueryでできる基本的なこと(初心者)

この記事について

progateでjQueryを学習した後にアウトプットの為に書いている記事です。Javascriptに精通している方には参考にならないと思うのでスルーしてください。

モーダルウィンドウの表示

モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。モーダルウィンドウの表示もjQueryで実装することができます。

sample.html

<!--モーダル部分のみ抜粋しています-->
 <div class="signup-modal-wrapper" id="signup-modal">
    <div class="modal">
      <div>
        <i class="fa fa-2x fa-times" id="close-modal"></i>
      </div>
      <div id="signup-form">
        <h2>Emailで新規登録</h2>
        <form action="#">
          <input class="form-control" type="text" placeholder="メールアドレス">
          <input class="form-control" type="password" placeholder="パスワード">
          <div id="submit-btn">新規登録</div>
        </form>
      </div>
    </div>
  </div>

sample.css

.signup-modal-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 100;
/*cssで非表示にしておきます*/
  display: none;
}

script.js

$(function() {
//クリックイベントを作成
  $('.signup-show').click(function() {
//モーダルを表示するようにする
    $('#signup-modal').fadeIn();
  });
//閉じるボタンが押されたら消えるようにする
  $('#close-modal').click(function() {
    $('#signup-modal').fadeOut();
  });
});

ホバーで文字を表示する

jQueryで画像や文字にマウスを乗せると文字が表示される機能を実装できます。以下の方法で実装しております。

①ホバー時に表示させたい文章はcssで非表示にする。
②「display: block;」を含むclassを作成しておく。
③hoverイベントをJavascriptのファイルに記入。
④ホバー時に「display: block;」を含むclassを追加する(addClassメソッドで)
⑤ホバーが外れる時は追加したclassを取り除く(removeメソッドで)

sample.html

<!-- レッスン一覧部分 -->
<div class="lesson-wrapper">
    <div class="container">
      <div class="heading">
        <h2>Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/html.png">
            <p>HTML & CSS</p>
          </div>
          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
            <p>jQuery</p>
          </div>
          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/ruby.png">
            <p>Ruby</p>
          </div>
          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/php.png">
            <p>PHP</p>
          </div>
          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>
    </div>
  </div>
  <!-- レッスン一覧ここまで -->

sample.css

.text-contents {
  margin: 3% auto;
  width: 80%;
  font-size: 12px;
  color: #b3aeb5;
/*非表示にしておく*/
  display: none;
}
/*表示させる時のclass*/
.text-show {
  display: block;
}

script.js

$(function() {

  // 言語一覧
  
  $('.lesson').hover(function() {
//ホバーされているオブジェクトにクラスを追加(文章は子要素なのでfindメソッドを使用)
    $(this).find('.text-contents').addClass('text-show');
  }, 
//ホバーが外された時にクラスを取り除く
  function() {
    $(this).find('.text-contents').removeClass('text-show');
  });
  }
  );

アコーディオン

Webアプリケーションにおけるアコーディオンとはクリックすると文字がスライドして表示され、もう一度クリックすると非表示になる機能のことです。この動作が楽器のアコーディオンに似ているからそう呼ばれているのだと思います。

以下の手順で実装できます。

①(アコーディオンで表示する)文章をCSSで非表示にしておく。
②クリックする部分には同一のclassを付与しておく。
③クリックして表示する時はaddClassメソッドを用いてclassを追加し、表示させる。非表示にする時はremoveClassでclassを取り除く

このような手順で実装する為に、hasClassメソッドを用います。

hasClassメソッド

hasClassメソッドは、オブジェクトが引数に使用しているclassを持っているか判定し、trueかfalseで返すメソッドです。このメソッドとif文による条件分岐を利用してアコーディオンを実装します。

アコーディオン実装のコード

sample.html

<div class="faq-wrapper">
    <div class="container">
      <div class="heading">
        <h2>FAQ</h2>
      </div>
      <div class="faq">
        <ul id="faq-list">
          <li class="faq-list-item">
            <h3 class="question">Progateの公式キャラクターはなんですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこといいます。忍者の格好をしたわんこです。ネコではありません。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこはオスですか？それともメスですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこはオスです。</p>
            </div>
          </li>
          <li class="faq-list-item">
            <h3 class="question">にんじゃわんこは何歳ですか？</h3>
            <span>+</span>
            <div class="answer">
              <p>にんじゃわんこは14歳です。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

sample.css

#faq-list {
  width: 500px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.faq-list-item {
  margin:10px;
  border-bottom:1px solid #ccc;
  position:relative;
  cursor:pointer;
  text-align: left;
}

.faq-list-item h3 {
  font-size: 14px;
}

.faq-list-item span {
  position:absolute;
  top:0;
  right:5px;
  color:#ccc;
  font-size:13px;
}

.answer {
  font-size: 12px;
  padding: 5px 0px;
  margin-bottom: 15px;
/*非表示にしておく*/
  display: none;
}

script.js

$(function() {

  // FAQ
  
  $('.faq-list-item').click(function() {
//何度も書くのが面倒臭いので、前もって変数にする。
    var $answer = $(this).find('.answer')
//もしactiveクラスがある場合(既に表示されている場合)はactiveクラスを取り除いて非表示にする。
    if ($answer.hasClass('active')) {
      $answer.removeClass('active');
      $answer.slideUp();
//非表示の時は"+"にするというコード
      $(this).find('span').text('+');
    } else {
//activeクラスがない場合(非表示の場合)はactiveクラスを追加する。
      $answer.addClass('active');
      $answer.slideDown();
//表示の時は"-"にするというコード
      $(this).find('span').text('-');
    }
  });

});

ホバーの時と同様にaddClassとremoveClassを用いていますが、クラスの追加及び除去では表示の変化は起きません（あくまでも表示か非表示かを判断するための目印）。表示や非表示はslideUpとslideDownで行なっております。

感想

Javascriptのコースではコンソール上の変化しか見ていなかったので、いまいち実力がついている気がしなかったが、Webアプリケーションで使用されている機能の実装方法を今回の学習で身に付けたので実感が湧いた。今後もjQueryの学習を進めていきたいと思う。