ｊQuery学習メモ①

Progate で jQueryの勉強をしているのでその学習メモをこちらにしておく事にする。

基本構文

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

セレクタ ＝ 何を

メソッド ＝ どうするか

イベント

構文

$('セレクタ').イベント(function(){　　　

           "ここにイベント時の処理"

});

メソッドの利用時はidをつけるほうが多い

classをつける事によって処理する数が多くなる可能性があるため(idは1つしか利用出来ないがclassは複数指定が可能なので。)

 

メソッド

・hide = 隠す

使用例　$('セレクタ').hide();

・fadeOut = 要素を隠す際に、徐々に消えていくアニメーションで仮に.fadeOut(1500);のように()の中に数字を入力すると速度が操作できる。引数の使用でスピードの操作も可能

使用例　$('セレクタ').fadeOut();

反対例　$('セレクタ').fadeIn();

・slideUp = 要素を隠す際に、下から上へスライドするアニメーションこれもslideUp(1500)のように()の中に数字を入力することで速度の操作が可能。引数の使用でスピードの操作も可能

使用例　$('セレクタ').slideUp();

反対例　$('セレクタ').slideDown();

・show = 隠れた要素を表示するメソッド

使用例　$(’セレクタ’).show();

・cssメソッド = cssを変更できるメソッドで1つ目の引数にcssのプロポティを、2つ目の引数にプロパティの値を入力する。

使用例　$('セレクタ').css('プロパティ','値');

・textメソッド = HTMLの文字列を変更することができる。

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

・htmlメソッド = 要素ごとHTMLの書き換えができる

使用例　$('セレクタ').html('<span>書き換える文字列</span>');

※<span>は例

・$(this) 構文 = イベントの中で、そのイベントが起こった要素を取得することができる。

・findメソッド = 指定したセレクタの子要素から引数に指定した要素を取得する時に使う。

変数とメソッドチェーン

変数

変数の指定は箱に決まった式を入れておいて好きな時に取り出してその都度処理を入力しなくてもすむようになる。

ブロックチェーン

ブロックチェーンとは一度の指定するオブジェクトで複数のメソッドを適用させる方法である。

使用例　$('div').css('color','red').html('jQuery');

青が1つ目でオレンジが2つ目のメソッドである。

以上