jQueryのメソッド

jQueryを勉強中（ど素人）なのですが、復習も兼ねて学んだメソッドを下記にメモとして記述していこうと思います。
随時更新していきます。

jQueryとは

• [ jQuery ]とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ
• jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる

css

CSSプロパティを変化させる

on

イベント発生時に実行する関数を割り当てる

fadeOut

要素を徐々に薄くして消していく (=フェードアウトさせる)

fadeIn

要素を徐々に表示していく　(=フェードインさせる)

text

指定した要素の文字列を取得したり、書き換えたりする

slideToggle

要素をアコーディオンさせる

hide

セレクタで指定した要素の子孫要素から、引数で指定した要素を全て取得することができる

例

$('.class').children('p');

addClass

セレクタで指定した要素に引数で指定したクラスを追加することができる

例

$('.class1').addClass('.class2');

removeClass

セレクタで指定した要素から引数で指定したクラスを取り除くことができる。

例

$('.class1').removeClass('class2');

hasClass

セレクタで指定した要素が引数で指定したクラスを持っているか判定することができる

例

$('.class1').hasClass('class2');

if文の条件式として設定することができる

例

if($('.class1').hasClass('class2'))
{
    // 処理内容
}

eq

セレクタで指定したオブジェクトから引数で指定した数値と同じインデックス番号をもつ要素を取得することができる

例

$('li').eq(2).css('color','red');

index

セレクタで指定したオブジェクトにおいて、引数で指定した要素が存在するインデックス番号を取得することができる

例

$('li').index($('active'));

prev

セレクタで指定したオブジェクトの同じ階層の１つ前の要素を取得することができる

例

$('#id').prev().css('color','red');

next

セレクタで指定したオブジェクトの同じ階層の１つ次の要素を取得することができる

例

$('#id').next().css('color','blue');

attr

セレクタで指定した要素に引数で指定した属性名・属性値を設定することができる
また、第２引数を指定しなかった場合、第１引数で指定した属性名の値を取得することができる

例

$('h1').attr('id','title');
var url = $('a').attr('href');

val

セレクタで指定した要素のvalue値を取得することができる

例

var text = $('#input').val();

animate

セレクタで指定した要素に対して、引数１で指定したプロパティの値を設定することができる
また、引数２でアニメーションの速度を指定することができる

例

$('h1').animate({'font-size':'20px'},1000)

scrollTop

リンク先への移動にアニメーションを付けることができる

例

$('html,body').scrollTop(0);  // ⇦　ページのTopに移動

例

$('html,body').animate({'scrollTop':0},500);  
// animateメソッドでプロパティにscrollTopを設定する方法でも可能

offset

セレクタで指定した要素の表示位置を取得することができる

例

$('h1').offset().top; // ページ最上部からの距離