jQueryの書き方 〜初級〜

jQueryの超初歩を備忘録としてメモしておきます。
言語を複数使っていると、書き方がこんがらがってしまったりするので、
『どう書くんだったかな』となった時用です〜(^o^)

基本的な書き方

$('セレクタ'・ 'id' ・ 'class').メソッド;
htmlで使用しているセレクタ等を指定して、そのセレクタ等にメソッドを実行する。
以下のコードは、h1を徐々に隠せ！というコード。

$(function() {
  $('h1').fadeOut();
});

ちなみに書き出しのfunctionですが、HTMLの読み込みが完了してからjQueryの操作を開始するようにという指定です。

$(function() {
  //
});

下のような書き方もできますが、長いのでどちらかというと前者の方が使われますね。

$(document).ready(function(){
  //
});

イベントのタイミングを指定する

$('セレクタ'・'id'・'class').イベント(function(){ hogehoge });
htmlで使用しているセレクタ等を指定して、そのセレクタ等に実行するメソッドを、
発火タイミングを指定して設定する。
以下のコードは、id=hide-text要素がクリックされたら、id=textを下から上にアニメーションで表示させて！というコード。

$(function(){
  $('#hide-text').click(function(){
    $('#text').slideUp();
  });
});

自身を指定する

$(this)
発火イベントの時に自身を指定すると、イベントが起こった要素を取得することができる。
以下のコードは、クリックされたリストのcssを変更して！というコード。

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

変数を宣言する

同じjQueryオブジェクト（これまでで$()で宣言したもの）を複数回使う時は、変数にしましょう！
処理が高速化されます。
いちいち$()と宣言していると、そのオブジェクトを都度読みにいきますが、変数にしていればそのオブジェクトを読みにいかず、変数に格納されているデータを使うからです。
変数宣言にはvarを使います。
以下のコードは $('div') を$divに格納しています。
jQueryオブジェクトを格納する時は、わかりやすいように先頭に$をつける慣習があります。

var $div = $('div');

メソッドチェーン

同じfunction内でメソッドを何回も使いたい場合、メソッドチェーンを使えばスマートに書くことができます。
例えば以下のようなコードは、cssとfadeOutを同じthisに対して使っている場合です。

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

これは以下のようにメソッドチェーンを使って書くことができます。

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

冗長ではなく綺麗になっていますね！

下階層の要素を取得

find()とchildren()がある。
find()は、要素の下階層にある指定した要素を取得する。
children()は、要素の"1階層下"の指定した要素を取得する。

<div is="wrapper">
  <a href="#">リンク1</a>
  <p>
    <a href="#">リンク2</a>
  </p>
</div>

$(function(){
  $('#wrapper').find('a')
});
//リンク1とリンク2が取得できる

$(function(){
  $('#wrapper').children('a')
});
//リンク1だけ取得できる

初級編は以上です！
中級編もまとめています(^^)/