1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQuery学習2

Posted at

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の操作
}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?