基本的なことを覚えるためのチェック項目

「each」のかわりに「for」を使う
「class」のかわりに「id」を使う
「class」を使うときには「エレメント」も指定
セレクターに「context」を与える　var $targets = $('.target', '#content');
変数をなどでキャッシュする
「find()」を使う
DOM操作を避ける　「prepend()、append()、after()/何かを挿入する作業」→html() などで代用、あまり使いたくないけど空タグを入れておくとか、、、
長い文字列を扱う場合は、concat() よりも join() を使う
「return false;」をいれる
Google AJAX Libraries APIを使う

参考サイト：

▼特定の要素を指定

■疑似セレクタ
：hidden 非表示状態にある要素を取得
：visible 表示状態にある要素を取得
：enabled 利用可能な状態にある要素を取得
：disabled 利用不可の状態にある要素を取得
：checked チェック済みの要素を取得
：selected 選択状態にある要素を取得
：animated アニメーション中の要素を取得

　$(":text:disabled").css("background-color", "red");

■jQueryオブジェクトが持つDOM要素を操作するメソッド群
CSSクラス名・ID名で操作

.filter("CSS文字列") / .filter(["CSS文字列"の]配列)
DOM要素の集合に含まれる子要素から、指定したCSS指定で更に絞込み。
文字列の配列で指定した場合、いずれかにマッチするものに絞込み。

.not("CSS文字列") / .not("DOM要素")
filter() の否定版。
CSSもしくは指定されたDOM要素を取除く。

.find("CSS文字列")
DOM要素の集合に含まれる子要素から、指定したCSS指定にマッチするものを抽出。

.is()
要素セットに特定条件を含む要素が存在するかを判定するには？
対象の要素セットに複数の要素が含まれる場合には、それら要素のうちの1つでも条件に合致すれば、isメソッドはtrueを返します。
引用元：http://www.atmarkit.co.jp/fdotnet/jqueryref/03traversing/traversing_06.html

2012-03-18

【その他の追加処理】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ

ｊQuery

.end()
jQueryオブジェクトを連鎖的に呼び出していった際に、現在の選択状態を破棄して1つ前の状態に戻す。1つ前の状態が無い場合、空の選択状態を返す。

引用元URL：http://semooh.jp/jquery/api/traversing/end/_/

.length
jQueryオブジェクトのエレメント数を保持する。
保持する値はjQueryオブジェクトのsizeメソッドの戻り値と同じ。

.size()
jQueryオブジェクトのエレメント数を返す。
返される値はjQueryオブジェクトのlengthプロパティと同じ。

.trim(str)
文字列の先頭と末尾から、正規表現で空白とみなされたものを除去。
改行コードや全角のブランクであっても、空白として処理される。
＞Utilities

.scrollTo()
　送信ボタンをクリックしたときに、画面の上部へ移動　$.scrollTo("#pagetop", 300);

（この記事はマークアップ勉強用メモです）

2012-03-18

【Selectors】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ

ｊQuery

:checked
チェックの入っているボックスの数を取得。
※必須項目が選択されているか確認するときなど

function countChecked() {
var n = $("input:checked").length;
$("div").text(n + (n == 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checkbox").click(countChecked);
引用元URL：http://semooh.jp/jquery/api/selectors/%3Achecked/

-

$("#test_result :checkbox").click(function(){
$("#display").text(
"チェックされている数は"+$("#test_result :checkbox:checked").length+"個だよ"
);
});
引用元URL：http://stacktrace.jp/jquery/api/selectors/checked.html

:selected
選択状態にある全ての要素を選択。

$("#test_result select").change(function(){
var str = "";
$("#test_result option:selected").each(function() {
str += $(this).text() + " ";
});
$("#display").text(str);
});
引用元URL：http://stacktrace.jp/jquery/api/selectors/selected.html

:radio
type属性がradio要素を選択。

$("#test_result :radio").parent().append($("").text("<-- radio").css("background", "yellow"));
引用元URL：http://stacktrace.jp/jquery/api/selectors/radio.html

:text
全てのtext要素を選択。

:contains(text)
指定された文字列を含む要素を返す。
※テキストエリアから禁止キーワードを探すときなど

[attribute]
マッチした要素のうち、指定された属性名を返します。
※のname属性で探すときなど
　[属性名=文字列]
　[attribute=value]
　指定された文字列に”等しい要素”を返す。
　[attribute!=value]
　指定された文字列と”異なる要素”を返す。
　[attribute^=value]
　指定された文字列で”始まる要素”を返す。
　[attribute$=value]
　指定された文字列で”終わる要素”をす。
　[attribute*=value]
　指定された文字列を”含む要素”を返す。

（この記事はマークアップ勉強用メモです）

2012-03-18

【Forms 】jQueryを使った、Form処理APIのまとめ＆メモ｜HTMLアークアップ

ｊQuery

.blur()
要素がフォーカスを失ったタイミングで実行。
戻り値にfalseを返すことなどでキャンセル。
＞Form Events

.change()
フォーカスを失った状態のinput要素がフォーカスを得て、値の変更を完了した時に実行。

$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();
引用元URL：http://semooh.jp/jquery/api/events/change/fn/
＞Form Events

.focus()
要素がフォーカスを受け取ったタイミングで実行。
＞Form Events

jQuery.param()
Collection Manipulation, Helper Functions

.select()
テキストエリアの”文字列”を選択状態にしたり、選択範囲を変更したタイミングで実行。

$(document).select( function () {
$("div").text("Something was selected").show().fadeOut(1000);
});
＞Form Events

.serializeArray() , .serialize()
FormやElementをシリアライズ。JSON形式のデータ構造で戻り値を返す(左API)。

function showValues() {
var fields = $(":input").serializeArray();
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
引用元URL：http://semooh.jp/jquery/api/ajax/serializeArray/+/

-

var obj = $('form').serializeArray();
$.each(obj, function(index, item) {
$('body').append(item.name + ":" + item.value + "
");
});
引用元URL：フォームからの入力値をJSON形式の文字列に変換するには？
＞Helper Functions

.submit()
フォームがsubmitされた際に呼び出されます。

$("form").submit(function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
引用元URL：http://semooh.jp/jquery/api/events/submit/fn/
＞Form Events

.val()
全ての要素のvalue属性を返す。
checkboxやselects、radioなどの値を設定することも可能。

$("button").click(function () {
var text = $(this).text();
$("input").val(text);
});
引用元URL：http://semooh.jp/jquery/api/attributes/val/val/
＞Attributes, General Attributes