プログラミング学習日記-40日目

progateでのjQueryの学習2周目です。

□jQueryの書き方
①オブジェクトを呼び出し
②メソッドを呼び出す

jQueryはjsなので、セミコロンが文末に必要

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

□hideメソッド

要素を隠す

$('h1') .hide() ;

□fadeOutメソッド

要素が徐々に消えていくアニメーションを追加。

$('セレクタ') .fadeOut() ;  

$('セレクタ') .fadeOut(1500) ;  
引数にアニメーション速度を指定。(ミリ秒)

□slideUpメソッド

要素を隠す際に、下から上へスライドするアニメーションを追加。

□id

HTMLで使用する。
classと同じように表記。
1ページ内で同じidは一度しか使えない。

□classとid セレクタ

idはセレクタに#を用いる→ #〇〇

classは以前の通り.ドットを用いる→ . 〇〇

□showメソッド

隠れている要素を表示するメソッド

□fadeInメソッド

要素を表示する際に徐々に表示するアニメーション

$('セレクタ') .fadeIn() ;  

$('セレクタ') .fadeIn(slow) ;  
引数でアニメーション速度を「ゆっくり」に指定。

□slideDown

slideUpの反対。
要素を表示する際に、上から下へスライドするアニメーションを追加。

□イベント

イベントを用いて、処理を行うタイミングを設定できる。
クリックなどの操作が行われた時、予めイベント内に指定した処理を行う。

クリックイベントの場合↓

$('セレクタ'). click(function(){処理});

□cssメソッド

CSSを変更できるメソッド。

$('セレクタ').css('プロパティ名' , '値')

□textメソッド 

textメソッドでHTMLそのものを変更できる。

$('セレクタ').text('書き換える文字列');

□htmlメソッド

textメソッドはHTMLの文字列を書き換える。
htmlメソッドは単なる文字列ではなく、HTML。

$('セレクタ').html('書き換えるHTML');

タグが認識される。

□thisの構文

$(this)はイベントの中で、そのイベントが起こった要素を取得する事ができる。

●<li>タグが複数ある場合、実際にクリックされた<li>の文字を赤く変えたい時。

$('li'). click(function(){
   $(this).css('color' , 'red');
});

------------------

$(this)の意味がいまいち分かってなかったので、改めてやってみるとよく理解できた^_^

１周目になんとなく、内容を追っておくやり方も悪くない。

２周目にどこがよく分からなかったを認識しつつ、学習に取り組める^_^