気になるスライドだけ貼り付けていきます(^^)

メソッドをＲｕｂｙで勉強してきたので、直感的にイメージがしやすくなっていることと、引数であったり、JavaScriputのライブラリだから、最後に;をつけるとか納得だらけ

プログラミング学習は、分からなくても、どんどん次にいくことの大切さを実感♪

練習でのミス⇒fadeInの引数をslowにしようと思ったが、
正しくは、'slow'と入れなければいけなかった(´;ω;｀)

イベントとは？

イベントを用いると、ある処理を行うタイミングを設定できます。WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行します。
イベントの構文は、$('セレクタ').イベント名(function(){ });のように書きます。

clickイベント

clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができます。
例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できます。下図の例では、ボタンをクリックすると文章を隠すというイベントを作成しています。

cssメソッド

CSSメソッドは、CSSを変更できるメソッドです。1つ目の引数にCSSのプロパティを、2つ目の引数にプロパティの値をいれます。

cssメソッドで要素の文字の色を変更したいときは、
$('セレクタ').css('color', 'red');のように記述します。
widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができます。

cssメソッドでdisplayプロパティの値を変更することもできます。$('セレクタ').css('display', 'none');はhideメソッドと全く同じです。このようにhideメソッドやshowメソッドは、実はdisplayプロパティの値を変更しているだけだということを覚えておきましょう。


$(function() {
  // 「#change-css」要素に対するclickイベントを作成してください
  $('#change-css').click(function() {
    $('#text').css('color', 'red');
    $('#text').css('font-size', '50px');
  });

});

jQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来ます。textメソッドは、$('セレクタ').text('書き換える文字列');のように記述します。

htmlメソッドは、要素の中身のHTMLを書き換えることが出来ます。textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなくHTMLだということです。例えば下図の例をtextメソッドで行うと、タグもそのまま文字列としてブラウザに表示されますが、htmlメソッドならタグがHTMLタグと認識され、ブラウザには「こんばんは」とだけ表示されます。

thisの構文

$(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクォーテーションで囲まないことに注意してください。

$(this)は非常に重要な概念なので覚えておきましょう。

thisはイメージしにくいので、具体例を見てみましょう。例えば下図のように、複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。

変数を使おう

同じjQueryオブジェクトを複数回使用する時は変数にしましょう。コードが見やすくなる上、jQueryの処理が高速化されます。 JavaScriptと同じく、jQueryで変数宣言にはvarを用います。変数には文字列や数値、jQueryオブジェクトなどを格納することができますが、jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっています。

同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できます。メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文です。$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用されます。