超基本

• 参考: jQuery日本語リファレンス

• DOMの読込を完了したときの処理を設定 jQuery( function ) または $( function )

  • 機能 htmlファイル内に記述されたDOM要素がすべて読み込まれた（操作可能になった） 時に引数のfunctionを実行します。readyメソッドの省略型です。 勘違いしやすいのは、画像などの読み込みは関係ない点です。 純粋にDOM要素の読込が完了したときにfunctionを実行します。 画像などの読み込みの完了にはloadメソッドを利用してください。

jQueryの構文: セレクタ.メソッド

• セレクタ: 処理対象となるDOM要素を指定する記法
• メソッド: それに対する処理を定義する。

セレクタ

• 要素の抽出に使う記号

  # : id
  . : クラス
  > : 直下の子要素
  空白 : それ以下の要素
  , : 複数の要素
  + : 隣接する要素
  

• セレクタ記法で使えるフィルタ

  :eq()
  :gt(), :lt()
  :even, :odd
  :contains()
  :first, :last
  

• メソッドを使ったDOM要素指定

  parent(), children()
  next(), prev()
  siblings() - 兄弟要素
  

メソッド

• cssメソッド: .css(‘color’, ‘red’)みたいな感じ。 チェーンのように続けて書いて複数適用することも可能

• addClass/removeClassメソッド: 事前に宣言したstyleのclassを適用、解除することができる。 cssメソッドのチェーンより見やすいし使いやすいはず。

• エフェクトとコールバック関数 showとかhideとかtoggle, fadeOut, fadeInがエフェクトとしてある。 エフェクト完了後に実行する関数を指定できて、それをコールバック関数と呼ぶ。 例:

  $('#box').fadeOut(800, function() {
    alert("gone!");
  });
  

• イベント click, mouseover, mouse out, mouse move時のイベントを定義できる！ mousemoveは動いている間に何かをさせる、ということ。 Event Objectというオブジェクトが存在し、マウスの座標などの情報を取得できる。

  <script>
    $(function() {
      // click
      // mouseover, mouseover, mousemove
      $('#box').click(function() {
        alert("hi!");
      });
      $('#box')
        .mouseover(function() {
          $(this).css('background', 'green');
        })
        .mouseout(function() {
          $(this).css('background', 'red');
        })
        .mousemove(function(e) {
          $(this).text(e.pageX);
        });
    });
  </script>
  

  ハンドルできるイベント詳細は→http://semooh.jp/jquery/api/events/

• フォームで使えるメソッド

  • focus: textboxなどにフォーカスがあたった時にアクションを取る
  • blur : 逆にフォーカスが外れた時
  • change: dropdownlist なんかで選んだ値が変わった時にとるアクションを設定できる

• onメソッド jQueryで動的に作られた要素に対してイベントを設定するのは、ページを読み込んだ時に存在する要素に対するイベントの設定とはやり方が少し異なります。そこで出てくるのがonメソッド。

　　　　 　　　　 .∧,,∧　この豆腐は私のｵｺﾞﾘだ
　　　　　　　　 (`･ω･´)　　ｼｭｯ
　　　　　　　　（つ 　　と彡　　./
　　　　　　　　　　　　／　　　./
　　　　　　　　　 　／　　　　./
　　　　　　　　　／　　　　　./
　　　　　　　 ／　/// 　　 ./
　　　　　　／＿＿　　 　.../
　　　　／　..|＼＿...＼　../
　　 ／　　　＼| ･ω･.|　/ ｷﾇｺﾞｼｰ
　／　　　　　　　　　　./