jQuery Progate 中級
jQueryの読込み
ｊQueryを読み込むには、jQueryライブラリーを読み込む必要がある。
１からプログラムを構築していては大変なので、誰かが既に作ったライブラリーからプログラムを呼び出して使うため。
htmlでまずjQueryを読み込む必要があり、body終了タグの直前に以下、
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
を差し込む。そして、javascriptファイル内では、
$(function(){
//この中にｊQuery文を書いていく
});モーダルの作成
モーダルとは、指定の場所をクリックイベントにて表示したり、非表示になったりする要素。
作成方法は下記
①htmlで表示させる
②CSSで非表示にさせる。
display: none;③jQueryで指定の動作を確認したタイミングで、htmlにクラスを与えて表示させる。
$('#login-show').click(function(){
$('#login-show').fadeIn();
});表示ボタン と 閉じる のボタンに対するそれぞれのコードの記述が必要
hoverイベント
$('lesson-hover').hover(function(){
function(){
//カーソルが乗っているときに実行したい処理
},
function(){
//カーソルに乗っていないときに実行したい処理
}
})；hover時に text-activeというクラスがあればレッスンの説明を表示するようにする。
そのためには
①cssで .text-active{display: block}を指定
②cssでマウスが乗った時に.text-activeが表示されるようにjsでコード
③cssでマウスが外れたときに.text-activeが非表示になるようにjsでコード
【addClassメソッド】
$('.text-contents').addClass('text-active');
//クラス指定時にドット「.」は不要な点に注意★【removeClassメソッド】
$('.text-contents').removeClass('text-active');
//クラス指定時にドット「.」は不要な点に注意★以下例文
$('.lesson-wrapper').hover(function(){
$(this).find('text-contents').addClass('text-active');
//①、②
$(this).find('.text-contents').removeClass('text-active');
//③、④
});$(this).find('text-contents').addClass('text-active');
①this は esson-wrapper クラスの上にカーソルが来たら
lesson-wrapper クラスの中から text-contents クラスを全て取得する
②text-contents に対して text-active クラス を加える
③this は lesson-wrapper 上からカーソルが外れたら
lesson-wrapper クラスの中からtext-contentsクラスを全て取得する
④text-contents に対して text-active クラス を除外する
という状況。
アコーディオン
htmlで
<div class="answer"></div>
<div class="answer-open"></div>として、 下のanswer-open は answer が開いたときの目印のクラス名にする。
【hasClass】
引数に指定した クラス を オブジェクト が持っているのか 判定するときに使用。
オブジェクト が指定の クラス を持っていれば true。
持っていなければ false を返す。
以下html
<div class="answer"></div>
<div class="annswer open"></div>以下、js
$('.answer').hasClass('open');
// 結果： false
$('.answer open').hasClass('open');
// 結果： true
【if文を用いた開閉操作】
faq-list-item をクリック → .answer は .open を持っているか？
持っている場合： true → .open を外す → .answer を隠す
持っていない場合： false → .openをつける → .answer を表示。
以下、応用例文。
$('.faq-list-item').click(function() {
var $answer = $(this).find('.answer');
if ($answer.hasClass('open')) {
$answer.removeClass('open');
} else {
$answer.addClass('open');
}
});①var $answer = $(this).find('.answer'); → .faq-list-item が クリック されたときに .faq-list-item 内の .answer 値が 取得される。そして $answerに代入される。
つまり htmlの answerクラス は クリックされると 以下の処理をしますということ。
②もし .answer がオブジェクト内に .open を持っている場合trueで
.answer から .open を取り除く処理を実行
③.answer がオブジェクト内に .open を持っていない場合はfalseで
.answer に .open を加える処理を実行。
現状は .open はないので .open を加える処理を実行する。
正直ここだけで終わらせると意味が分からないので、次のコードをさっさと見た方がよいかと（笑）
$('.faq-list-item').click(function() {
var $answer = $(this).find('.answer');
if($answer.hasClass('open')) {
$answer.removeClass('open');
// slideUpメソッドを用いて、$answerを隠してください
$answer.slideUp();
// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
$(this).find('span').text('+');
} else {
$answer.addClass('open');
// slideDownメソッドを用いて、$answerを表示してください
$answer.slideDown();
// 子要素のspanタグの中身をtextメソッドを用いて書き換えてください
$(this).find('span').text('-');
}
});さっきのものにいくつか追加。
①-1 if($answer.hasClass('open')) {
$answer.removeClass('open');
$answer.slideUp();
これは もし .answer がオブジェクト内に .open を持っている場合trueで
.answer から .open を取り除く処理を実行。
それに合わせて、.answer を フェードアウトで消す処理も実行。
つまり、openがある時にクリックをしても閉じる処理をするという意味。
①-2 $(this).find('span').text('+');
→span タグを取得して、このテキストを”＋”に書き換える処理も実行。
②-1 $answer.addClass('open');
// slideDownメソッドを用いて、$answerを表示してください
$answer.slideDown();
.answer が .open をもっていない場合は .open を追加して、
slideUP で .open を表示。
こちらは逆で、オープンを持っていないときにクリックするとオープンをしますよという意味。
かつ
$(this).find('span').text('-');
.answer 内の span すなわち+ を取得して text すなわち－ に変えるという処理を実行。
これをすべてのanswerに実行しているということで、とても納得。
これでProgate中級編は終了！