progate:JQuery中級コース

jQueryは.js形式
HTMLファイルで、と書くことで、jQueryのコードを記述するファイルが読み込まれる
scriptはbodyの直前に書くことで、WEBページの表示速度をより早めることが出来ます。

script.js

// JQuery基本の方
$(document).ready(function(){

});

// 略
$(function(){ });

index.html


<!-- headタグでjqueryの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8">
  </script>


<!-- bodyタグでjsファイルの読み込み -->
  <script  src="script.js" type="text/javascript" charset="utf-8">
  </script>

モーダルの表示/非表示

モーダルを表示させる手順
①htmlにモーダルを作る
②cssを整えて、display: none;で非表示にする
③script.jsでclickイベントを作る(fadeIn)

script.js

$(‘#login-show’).click(function(){
    $(‘login-modal’).fadeIn();
  });

モーダルを隠す手順
①htmlにモーダルを閉じるボタンを作る
③script.jsでclickイベントを作る(fadeOut)

※共通で使う場合はclassを使う

hover機能

　hover機能を使う手順
①htmlでclassを追加
②script.jsでhoverイベントを作成

script.js

  $('.lesson-hover').hover(
    function(){
      
    },
    function(){
      
    }
    
    );
// hoverの引数はカーソルを乗せた時と外した時で２つ作る

addClassとremoveClass

※addClassとremoveClassの引数にドットは不要

script.js

$('.lesson-hover').hover(
    function() {
      $(this).find('.text-contents').addClass('text-active');
    },
    function() {
		$(this).find('.text-contents').removeClass('text-active');
      
    }
  );

アコーディオン

①答えの部分はCSSで非表示。
②3つの質問部分には同一のclass名を付与
③それらのclickイベントを作成。質問をクリックした時に、対応する答えを隠すのか表示するのかを判断するため、openというclassを用います。
答えの表示中はopenをつけ、非表示中は外す。

hasClassメソッド

hasClassメソッドは、引数に指定したクラスを、オブジェクトが持っているか判定するときに使用します。オブジェクトがそのクラスを持っていればtrue、持っていなければfalseを返します。-progate-

script.js

$('.faq-list-item').click(function(){ // clickイベント
    var $answer=$(this).find('.answer'); // 変数の定義
    
    if($answer.hasClass('open')){
      $answer.removeClass('open') // $answerにopenがあった場合の処理
    }else{
      $answer.addClass('open'); //openがなかった場合の処理
    }
    
  });

アコーディオン完成形

script.js


  // FAQのアコーディオン
  $('.faq-list-item').click(function() {
    var $answer = $(this).find('.answer');
    if($answer.hasClass('open')) { 
      $answer.removeClass('open'); 

      $answer.slideUp(); 
      $(this).find('span').text('+');  
    } else {
      $answer.addClass('open'); 
      $answer.slideDown();
      $(this).find('span').text('-');
      
    }
  });