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('-');
}
});