jQuery初歩の初歩2
jQueryファイルの読み込み
# bodyタグの終了直前で読みこむ
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js</script>
</head>
<script src="script.js"></script>
</body>
jQueryの型(基本形)
$(document).ready(function(){
//jQueryコード//
});
短縮系
$(function(){
//jQueryコード//
});
モーダルの表示(イベントが)
.login-modal-wrapper {
display: none;
}
$('#login-show').click(function(){
$('#login-modal').fadeIn();
});
複数の要素に対して同じjQuery動作を設定したい場合はIDでなくclassを用いる。
モーダルを隠すには、閉じるボタンにfadeOutメソッド等を用いる
hoverイベントの準備
$('.lesson-hover').hover(
function(){
マウスを乗せた時の操作
},
function(){
マウスが外れた時の操作
}
);
addClassメソッド(イベント時にclassを追加する)
removeClassメソッド(イベント時にclassを外す)
$('.text-contents').addClass('text-active');#クラス名の前にドットは不要
hasClassメソッド(オブジェクトが引数に指定したクラスを持っていればtrue、そうでなければfalseを返す)
$('.answer').hasClass('open');#true
$('.answer').hasClass('close');#false
if文を用いた操作
if($('.answer').hasClass('open')) {
trueの操作
} else {
elseの操作
}