フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

jQuery学習2

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の操作
}
[紹介元] jQueryタグが付けられた新着投稿 – Qiita jQuery学習2

コメント

記事に戻る

コメントを残す