備忘録として、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(){
// 処理
});