jQuery 初級編

Progate jQuery

初級編クリア

ProgateでjQuery 初級編をクリアしたので簡単にまとめ

jQueryとは

  • javascriptのライブラリの1つ
  • HTMLやCSSでは表現できなかったアニメーションや様々な動きをつけられる

オブジェクトとメソッド

基本的な構造は以下のようにする

$('セレクタ').メソッド(引数);

$(‘セレクタ’)でオブジェクト作成ができ、その後に.メソッドで呼び出す事ができる。

初級編に出てきたメソッド

  • hide ⇢　要素を隠す（showメソッドは要素を表示する)
  • fadeOut ⇢ 徐々に消えていくアニメーション（fadeInメソッドは逆の効果）
  • slideUp ⇢ 下から上に徐々に消えていくアニメーション(slideDownメソッドは逆の効果）

例としてfadeOutメソッドの使用例

$('セレクタ').fadeOut(slow);
//引数をslowとすると、ゆっくり消えていく

イベントの構文

基本的なイベントの構文は以下のようにする

$('セレクタ').イベント名(function() {
   //イベント発生時に実行したい処理
});

セレクタをクリックした際に、セレクタの入れ子のid = “text"に対し イベント(hideメソッド）を発生させたい場合は

$('セレクタ').click(function(){
   $('# text').hide();
});

以上、忘れる前に備忘録として記録。