備忘録として、Progate「jQuery 初級編」、「jQuery 中級編」、「jQuery 上級編」に登場するメソッド、イベントをまとめてみました。

メソッド

showメソッド

隠れた要素を表示する

$('セレクタ').show();

hideメソッド

要素を隠す

$('セレクタ').hide();

fadeInメソッド

要素を徐々に表示するアニメーション

$('セレクタ').fadeIn();

引数でアニメーションの速度を「ゆっくり」に指定

$('セレクタ').fadeOut('slow');

fadeOutメソッド

要素を徐々に隠すアニメーション

$('セレクタ').fadeOut();

引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

$('セレクタ').fadeOut(1500);

sliedInメソッド

要素を上から下へ徐々に表示するアニメーション

$('セレクタ').slideIn();

引数でアニメーションの速度を「ゆっくり」に指定

$('セレクタ').slideIn('slow');

sliedUpメソッド

要素を下から上へ徐々に隠すアニメーション

$('セレクタ').slideUp();

引数でアニメーションの速度を1500ミリ秒（1.5秒）に指定

$('セレクタ').slideUp(1500);

scrollTopメソッド

リンク先への移動にアニメーションをつけることができる
※通常$('html, body')に対して用いる

$('html, body').scrollTop(値);

animateメソッド

アニメーションを設定できる

$('セレクタ').animate({'プロパティ':'値'}, 時間);

CSSの値だけでなく、scrollTopなどの値も変更できる

$('セレクタ').animate({'scrollTop': 0}, 'slow');

offsetメソッド

要素の表示位置（top, left）を取得できる

$('セレクタ').offset();

offset().topとすると、ページの上端からの距離が取得できる

$('セレクタ').offset().top;

textメソッド

ゲット

要素の文字列を取得する

$('セレクタ').text();

セット

要素の文字列を変更する

$('セレクタ').text('文字列');

htmlメソッド

ゲット

要素のHTMLを取得する

$('セレクタ').html();

セット

要素のHTMLを変更する

$('セレクタ').html('HTML');

cssメソッド

ゲット

CSSを取得できる

$('セレクタ').css('プロパティ名');

セット

CSSを変更できる

$('セレクタ').css('プロパティ名', '値');

attrメソッド

ゲット

HTMLの属性を取得できる

$('セレクタ').attr('属性名');

セット

HTMLの属性を変更できる

$('セレクタ').attr('属性名', '値');

valメソッド

ゲット

要素のvalue属性を取得できる

$('セレクタ').val();

セット

要素のvalue属性を変更できる

$('セレクタ').val('value属性', '値');

findメソッド

すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得

$('セレクタ').find('取得したいセレクタ');

childrenメソッド

指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得

$('セレクタ').children('取得したいセレクタ');

eqメソッド

指定したセレクタの中から、eqの引数の数字と同じインデックス番号の要素を取得する

※インデックス番号は0から始まる

$('セレクタ').eq(インデックス番号);

indexメソッド

指定したセレクタの中から、検索する要素のインデックス番号を取得する

$('セレクタ').index('検索する要素');

prevメソッド

指定したセレクタの兄弟要素（同じ階層の要素）の中から一つ前の要素を取得する

$('セレクタ').prev();

nextメソッド

指定したセレクタの兄弟要素（同じ階層の要素）の中から一つ次の要素を取得する

$('セレクタ').next();

lengthメソッド

指定したセレクタの要素の個数を取得する

$('セレクタ').length;

addClassメソッド

指定した要素にclassを追加する

$('セレクタ').addClass('追加するクラス名');

removeClassメソッド

指定した要素にclassを削除する

$('セレクタ').removeClass('削除するクラス名');

hasClassメソッド

引数に指定したクラスを、オブジェクトが持っているか判定する

$('セレクタ').hasClass('判定するクラス名'); // true or false を返す

メソッドチェーン

1つのjQueryオブジェクトに連続してメソッドが利用できる構文

$('セレクタ').css('color', 'red').html('jQuery');

イベント

イベントを用いると、ある処理を行うタイミングを設定できる

$('セレクタ').イベント名(function(){
  // イベント発生時に実行したい処理
});

clickイベント

セレクタがclickされた時に処理をする

$('クリックされるセレクタ').click(function(){
    // クリックされた時に #text を隠す
    $('#text').hide();
});

hoverイベント

要素にマウスが乗った時、外れた時に指定した処理を行う

$('セレクタ').hover(
    function(){
        // マウスをのせた時の処理
    },
    function(){
        // マウスをはずした時の処理
    }
);

submitイベント

送信ボタンがクリックされた時や「Enter」キーでフォームが送信された時に指定した処理を行う

$('セレクタ').submit(funtion(){
    // 処理
});