jQueryとこの記事について

『jQuery』とは、効果やアニメーションを簡単に実装できるJavaScriptライブラリ。
　jQueryを使うとWEBページにアニメーションや効果を簡単につけることができる。
　jQueryを勉強中（ど素人）なのですが、復習も兼ねて学んだメソッドを
　下記にメモとして記述していこうと思います。随時更新していきます。

hide

セレクタ（HTMLのタグ名やclass名,idなどを指定する）で指定した要素を隠すことができる。

　例：　$('h1').hide();

show

セレクタで指定した隠れている要素を表示することができる。

　例：　$('h1').show(slow);

fadeOut

セレクタで指定した要素を徐々に隠すことができる。
アニメーションの速度は（）内に引数として指定することができる。（1.0秒 → １０００、slowなど）

　例：　$('.class').fadeOut(1000);

fadeIn

セレクタで指定した要素を徐々に表示ことができる。

　例：　$('.class').fadeIn(slow);

slideUp

セレクタで指定した要素を下から上にスライドしながら隠すことができる。

　例：　$('#id').slideUp(1000);

slideDown

セレクタで指定した要素を上から下にスライドしながら表示することができる。

　例：　$('#id').slideUp(slow);

css

セレクタで指定したCSSを変更することができる。引数①にプロパティ、引数②にプロパティの値を設定する。

　例：　$('p').css('color','blue');

　※ちなみに、
　　　 $('img').css('display','none'); ⇦　hideメソッドと同じ
　　　 $('img').css('display','block'); ⇦　showメソッドと同じ

text

セレクタで指定した要素のHTMLの中身を引数で指定した内容に書き換えることができる。

　例：　$('p').text('アイウエオ');

html

セレクタで指定した要素の中身のHTMLを引数で指定したものに書き換えることができる。

　例：　$('p').html('アイウエオ');

find

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

　例：　$('.class').find('p');

　　この場合、'.class'というクラス内の'p'要素を取得することができる。

children

セレクタで指定した要素の子要素（１階層分）から、引数で指定した要素を取得することができる。

　例：　$('.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'));

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

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

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

　例：　$('#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; →　ページ最上部からの距離

jQueryのメソッド