プログラミングの勉強日記
2020年5月30日 Progate Lv.73
jQueryの読み込み
ライブラリはインターネット経由で読み込むのが一般的。
<head>
<script src="https;//...jquery.min.js"></script>
</head>
jQueryファイルの読み込み
jQueryは.js形式のファイルコードを書く。HTMLファイルで<script srx="ファイルのURL"></script>と書くことで、jQueryのコードを記述するファイルが読み込まれる。headタグのなかでも書くことはできるが、</body>の直前に書くことで、WEBページの表示速度を速められる。
<body>
....
<script src="script.js"></script>
</body>
jQueryの型
jQueryはHTMLの中身を操作するので、HTMLの読み込みが完了してからjQueryによる操作を開始する。そのためにreadyイベントを用意して、$(document).ready()の中身にjQueryの処理を書く。この構文には省略形もあり、$(function(){ });と書く。
$(document).ready(function(){
//jQueryをかく。
});
$function(){
//jQueryをかく。
});
モーダルの表示
モーダルとはclickイベントなどに基づいて表示/非表示が行われる要素のこと。
1.モーダルをCSSで非表示にする。
.login-modal-wrapper{ display:none; }
2.ログインボタンにclickイベントを設定
$('#login-show').click(function(){ });
3.clickイベントでモーダルを表示
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
モーダルの非表示
閉じるボタンをクリックしたときにモーダルが閉じるようにする。
1.閉じるボタンにclickイベントを設定
$('.close-modal').click(function(){ });
2.fadeOutメソッドでモーダルを隠す
$('.close-modal').click(function(){
$('#login-modal').fadeOut();
});
2つのモーダルを隠す場合には2つのモーダルの閉じるボタンに共通のclass名を指定し、クリックしたときにログインと新規登録のモーダルとともに隠す。
hoverイベントの準備
1.hoverイベントを設定したい箇所にクラス名を指定
<div class="lesson lesson-hover"> </div>
2.クラスに対してhoverイベントを設定
$('.lesson-hover').hover{
function(){
//マウスを使ったときの処理
},
function(){
//マウスが外れたときの処理
}
};
hover機能
hover時にtext-activeというクラスがあればレッスンの説明を表示させる。
1.CSSでtext-activeにdisplay:block;を指定
2.マウスがのったとに説明文にtext-activeをつける
3.マウスが外れたときにtext-activeクラスを外す（非表示にする）
.text-contents{
...
display:none; /*デフォルトではdisplay:none;で隠す*/
}
.text-active{
display:block; /*.text-activeがついているときは表示する*/
}
addClassメソッド
指定した要素にクラスを追加できる。
HTML：<p class="text-contents">...</p>
jQuery：$('.text-contents').addClass('text-active');
text-contentsクラスのついた要素にtext-activeというクラスを追加する。
このときのクラス名の前にドットは不要
removeClassメソッド
指定した要素から指定したクラスを取り除ける。
HTML：<p class="text-contents text-active">...</p>
jQuery：$('.text-contents').removeClass('text-active');
このときのクラス名の前にドットは不要