読者です 読者をやめる 読者になる 読者になる

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();
});

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