Webエンジニア目指して#22 - misokatsu

どうもガチ噛み口内炎マンです。 markdown書きやすいですねえ！！！！！！！！！！

今回はJavaScript VIIです！最後！

コールバック特化みたいですね。なんといきなり衝撃の事実、コールバック関数の説明がありました。
定義した関数を引数に渡し呼び出す用の関数のことをコールバック関数というみたいです
~~最初からその説明が欲しかったな...~~

というわけでやっていきましょう
・・・
コールバックの説明だけでした。そのうちコールバックを使って実用的なものが作りたいですね。

さてここまでhtml,css,sass,jsとやってきているのでもうフロントはさらっと固めようと思います。さらっとは固まらないか。

というわけでProgate jQuery初級編やります。

jQueryの記法

$('セレクタ').メソッド(引数);
なんかjってついてるからjsみたいにガッツリ書くんだと思ってました。
結構cssみたいなノリでかけるんですね。
セレクタはcssと同じように

classであれば.sample
idであれば#sampleで書きます。

メソッドは色々あるみたいですね。要素を隠すhide、フェードアウトさせるfadeOut(ミリ秒)、他にもアニメーション付きで要素を隠すものなど・・・以下まとめです。

消す系

hide 非表示にする
fadeOut() フェードアウトさせる
slideUp() 下から上に非表示にする

表示する系

show display:none;の要素を表示させる
fadeIn() フェードインさせる
slideDown() 上から下に表示する

変更系

css('プロパティ','値') css変更
text('変更するテキスト') セレクタ内のテキスト変更
html('<bold>変更するテキスト</bold>') テキスト変更+タグ追加

引数について

fadeOut(1500)は1500msで要素をフェードアウトさせる。
この1500をslowやfastで記述できる。
例:fadeOut(slow)

要素のクリックイベントを処理のトリガーにする

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

  $('#hide-trigger').click(()=>{
    $('#text').slideUp();
  });

こんな感じですね〜　例はアロー関数にしてみました。（レッスン内でやると不正解ですが）
なんとなく使い方が見えてきました。前にjsやっといて良かったなあと思います。今回はクリックをトリガーにし要素の表示について触っていますが、クリック以外をトリガーにしても、実行される処理を要素の表示と関係なくしても色々できるってわけですね。はえ〜

トリガーの要素自体に処理をする

いままでの情報であれば

$('#sample').click(()=>{
  $('#sample').css('color','red');
});

ですが、こいつはネストの中の同じセレクタをthisとすることができます。
例

$('#sample').click(()=>{
  $(this).css('color','red');
});

変数

薄々感づいてはいましたがjQueryはjsの拡張で、コード自体はjsです。
つまり変数が使えます。んで、メソッドの前の$('セレクタ')のことをjQueryオブジェクトと呼ぶみたいです。
jQueryオブジェクトを変数に格納することで記述が楽になるのはもちろん、処理が早くなるらしいです。例

var $smp=$('sample');
$smp.css('color','red');

同じjQueryオブジェクトに連続処理をする(メソッドチェーン)

$('セレクタ').メソッド().メソッド(); のようにメソッドは.で繋げられます。
例
1.メソッドチェーンを使わない場合

$('#sample').click(()=>{
  $(this).css('color','red');
  $(this).css('background-color','black');
  $(this).css('font-size','32px');
});

2.メソッドチェーンを使う場合

$('#sample').click(()=>{
  $(this).css('color','red');
  .css('background-color','black');
  .css('font-size','32px');
});

例2のように改行しても大丈夫でした。

子要素の取得

下のhtmlのように親要素がwrapper、子要素aがあるとします。

<div id="wrapper">
    <a href="#">1</a>
    <div>
      <a href="#">2</a>
    </div>
  </div>

このとき、wrapperを対象に子要素を取得しそれに処理をするメソッドがあります。

1.findメソッド

紛らわしいの来ましたね...
対象の親要素以下の階層の子要素を全て取得します。例

$('#wrapper').find('a').css('color','red');

この場合、要素aで囲まれたテキスト1,2が赤くなります。

2.childrenメソッド

対象の親要素の直下にある子要素だけを取得します。

$('#wrapper').children('a').css('color','red');

この場合、テキスト2はwrapperに対して1つ下の階層となるdivタグに入っています。孫ですね。こいつは対象にならないため、
wrapperの直下にあるテキスト1だけ赤くなります。

hoverイベント

clickがあればhoverもあると。クリックしてる間のやつもありそうですね
hoverイベントは引数が2つあり、
1つ目がホバー中
2つ目がホバーをやめたとき　の処理です。
例

$('#wrapper').hover(
    function(){
      $(this).find('.text').fadeIn();
    },
    function(){
      $(this).find('.text').fadeOut();
    }
)

以上でjQuery初級編おわり！結構jQueryのコーディングでidが使われていますが、いつかしら書いてたclassよりidの方が処理が早いからなんですかね？

なんか初級編だけでも既にそのへんのwebサイトより面白いもの作れそうですね。
ではでは。