2010/08/29

jQuery:: フォームデータとAJAXの使い方

今までjQueryは使ったことがなかったんですが、使い始めるとあまりにも便利すぎでビックリしています。

使い方がよくわかっていないので、サンプルが掲載されているサイトを見て勉強。

勉強した内容をメモ。
  1. レンダリング終了後に処理開始する
    $(document).ready(function(){
    ホニャララ
    });
  2. フォームデータの取り扱い方
    むつらつれずれさんのサイトが分かりやすかったです。
    基本的には、$(ID属性).val()で取得。
    値をセットしたい場合は、$(ID属性).val(値)となります。
    ラジオボタンやセレクターも同じ感覚できます。
    ボタンは上記やり方ができなくて、$('input:botton#ID属性')で対応しました。
    やり方が間違っていたのかな・・・
  3. AJAXでの非同期通信
    jQuery日本語リファレンスさんのところで勉強。
    この記述も簡単ですね~
    なんで今までjQuery使わなかったんだろう・・・
  4. XMLの処理
    DigiTechLog Dot Comさんのところで勉強。
    $(xml).find(ROW_ID).text()みたいな感じで値を取得。
  5. inputのnama属性値が配列時のデータ取得処理
    $('input[name="hoge[]"]')
    input[@name~ではできませんでした。
  6. 該当データを一気に取得する処理
    map関数を使うといいようです。
    例えば、5のname属性値が配列時のデータを全て取得するには
    $('input[name="hoge[]"]').map(function(){
    return $(this).val();
    })
    カンマ区切りの文字列としたい場合は、上記スクリプトの最後に
    }).get().join(',');
    としてやれば、xxx,xxx,xxxみたいになります。
  7. select要素の取得
    $("#xxxx option:selected").text();
  8. クラス要素の追加・削除・有無
    $('#myelement').addClass('myclass');
    $('#myelement').removeClass('myclass');
    $(this).hasClass(class);
いや~本当に楽だな~

2011/01/09 Update!!!
jQueryの基本を勉強できるShinta's Web Siteさんのページがおすすめ。
8番の内容は、上記ページに書いてありました。
スポンサーリンク

スポンサーリンク