jQueryとはJavaScriptのライブラリで簡単に動きをつけることができる。
【ジェイクエリの書き方】
$('セレクタ名') . メソッド名(引数);
何を どうするのか
【idとclassの使い分け】
idは１ページに一回しか使えない。classよりidが優先されるという特徴がある。
jQueryを使うときはidに指定する方が高速で処理される。
また、idを使う時は先頭に#をつける。
【メソッド一覧】
※言葉を繋げるときは２文字目の頭文字は大文字にすること
.hide();
→指定した要素を隠す
fadeOut();
→徐々に消えていく。()の中に数字を入れることで何秒かけて消えるかを指定できる。fadeOut(1500); 1.5秒かけて消える。
slideup();
→下から上に消えていく。()の中に数字を入れることで何秒かけて消えるかを指定できる。slideUp(1500); 1.5秒かけて消える。
.slideToggle();
→スライドが閉じていたら表示させるし、表示させていたらスライドを閉じるようにする。slideupとslidDownを足して両方使えるようなメソッド
show();
→非表示にしていた要素を見えるようにする。
※非表示にするためにはCSSで要素にdisplay:none;をつけておくこと
fadeIn();・fadeIn('show')
→要素を表示させる際に、徐々に表示させるアニメーション。fadeIn('show')で表示させる速度をゆっくりに指定できる。
※非表示にするためにはCSSで要素にdisplay:none;をつけておくこと
slideDown();・slideDown('show')
→要素を表示させる際に上から下に表示させる。slideDown('show')で表示させる速度をゆっくりに指定できる。
※非表示にするためにはCSSで要素にdisplay:none;をつけておくこと
【イベント一覧】
イベントとはある処理をした際に発生するアニメーションを指定できるもの
$('セレクタA').イベント名(function(){
$('セレクタB').hide;
} );
例セレクタAに対してイベントを行った際にセレクタBを消す。
click
→特定のセレクタをクリック（ボタンを押す）した際に以下の処理を実行するというもの
【CSSメソッド】
CSSのプロパティ（文字の大きさや色など）を変更することができる。これはクリックしたら色を変えるなど上記のclickイベントなどと一緒に使うことが多い。
コードの記述は以下の通り
$('要素').css('プロパティ名' , '値');
例）#change-cssをクリックした際に、テキストの色が赤に文字の大きさが50pxに変わる。
【textメソッド】
textのテキストを変更する。クリックイベントなどと一緒に使う。
$('#test').html('テストに変更');
【htmlメソッド】
要素の中身のhtmlを書き換えることができる。クリックイベントなどと併用する。
【textメソッド・htmlメソッドを一緒に使ったコード例】
【thisメソッド】
全ての該当要素に反映させるのではなく、クリックした要素だけにアクションを起こすことができるメソッド。
【変数に入れる】
同じjQueryオブジェクトを複数回使う場合は、変数を使用する。
可読性が上がるのと処理が高速化される。
変数を使う際には var $div = S('div');のようにvarを使う
また、メソッドチェーンを使うと同じ変数のメソッドを繋げる事ができる。
【findメソッド】
全ての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタ（'a'とか'p'など）を持つ要素を取得したいときに用います。
【childrenメソッド】
childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素のみアクションが行える
【hoverイベント】
hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。乗った時と外れた時の両方の処理を記述する必要があります。
