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'));
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; → ページ最上部からの距離