jQueryはとても便利なプラグインです。
JavaScriptの普及を助けたといっても過言ではありません。
jQueryのおかげで煩雑なコードをかかずに綺麗なコードで色々なものが作れるようになりました。
今回は少し忘れやすい、jQueryでフォームから値を取得する方法をまとめていきます。

テキスト

よく使われる1行のテキストボックスです。
これはとても簡単でform要素に .val() で値を取得することが出来ます。

HTML

<form id="test-form">
    <input type="text" name="test-form" value="56">
</form>

JavaScript

var formValue = $('#test-form [name=test-form]').val();
var val = Number(formValue) || 0; // NaNのときは0
alert(val); // => 56

ラジオボタン

値を取る、という意味では .val() で取得出来るのですが、実際に取得したいのは選択されている値を取りたいのですよね。
なので :checked で絞り込むということをやります。

HTML

<form id="test-form">
    <input type="radio" name="test-radio" value="1">
    <input type="radio" name="test-radio" value="2" checked>
    <input type="radio" name="test-radio" value="3">
</form>

JavaScript

var val = $('#test-form [name=test-radio]:checked').val();
alert(val); // => 2

チェックボックス

これが面倒。要素の取得方法はラジオボタンと変わらないのですが、複数選択している場合がある。jQueryで .val() でとれるのは複数ある場合は一番最初に出てくる要素の値だけ。
全部取るためには .map() でループ処理します。

HTML

<form id="test-form">
    <input type="checkbox" name="test-checkbox" value="1">
    <input type="checkbox" name="test-checkbox" value="2" checked>
    <input type="checkbox" name="test-checkbox" value="3" checked>
</form>

JavaScript

var $checked = $('#test-checkbox [name=test-checkbox]:checked');
var valList = $checked.map(function(index, el) { return $(this).val(); });
alert(valList); // => ["2", "3"]

複数あると思われるので配列に値を入れます。
.map() の使い方は以下のドキュメントを参考にしてみてください。

• .map – jQuery API
• .map – Qrefy 日本語jQueryリファレンス

セレクトボックス（単一）

option要素に目もくれず、select要素の値を取れば終わりです。

HTML

<form id="test-form">
  <select name="test-select">
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C">This is C</option>
  </select>
</form>

JavaScript

var val = $('#test-form [name=test-select]').val();
alert(val); // => "B"

もし This is B の部分を取ってきたい場合は以下のJavaScriptでいけます。

var text = $('#test-form [name=test-select] option:selected').text();
alert(text); // => "This is B"

セレクトボックス（複数）

複数だからまたループするのかぁと思ってたら、今回は全てjQueryがやってくれます。なんて便利なんだjQuery。さすがだよ本当。
普通に .val() しましょう。

HTML

<form id="test-form">
  <select name="test-multi-select" size="3" multiple>
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C" selected>This is C</option>
  </select>
</form>

JavaScript

var val = $('#test-form [name=test-multi-select]').val();
alert(val); // => ["B", "C"]

ちなみに何も選択されていないときは空の配列で返ってきます。注意しましょう。

フォーム要素全部

フォームの値を全て取ってくることも可能です。
form要素に対して、 .serialize() で送信すると、URLのGETみたいに URLの?以降の部分が取得出来ます。 .serializeArray() で取得すると配列に分解したものが取得出来ます。

HTML

<form id="test-form">
  <input type="text" name="test-text" value="This is text." />
  <select name="test-multi-select" size="3" multiple>
    <option value="A">This is A</option>
    <option value="B" selected>This is B</option>
    <option value="C" selected>This is C</option>
  </select>
</form>

JavaScript

var $form = $('#test-form');
var query = $form.serialize();
var arrVal = $form.serializeArray();
alert(query); // => "test-text=This+is+text.&test-multi-select=B&test-multi-select=C"
alert(arrVal); // => [{name:"test-text", value:"This is text."}, 〜〜〜]

一気にformの値を全て取りたいときはこっちのほうが絶対便利。
やっぱりjQueryって便利ですね。

この記事を読んでいるあなたにおすすめ！

少し古いですがjQueryの使い方の基本はこれを読んでおけば完璧です。

この記事は 18 Free jQuery Plugins for Responsive Web Designing の内容を日本語訳したものです。 最近日本でもレスポンシブウェブデザインが流行ってきていますが、まだまだTipsがたまっていないと思ったため訳しました。 参考にしてみてください。

最近、ウェブデザインでもっとも需要のあるものの1つがレスポンシブレイアウトです。
レスポンシブレイアウトは、デザイナーが何か大きな成果を達成し、かつユニークですばらしいウェブサイトを作る、いくつかの素晴らしいエレメントを提供します。
これらのレスポンシブレイアウトはアイキャッチが強烈なため、簡単にユーザーの目を引くことが出来ます。

これらのレスポンシブレイアウトの更に素晴らしい特徴の1つが、PC、携帯電話、タブレットなど様々な電子機器に最適化された画面サイズに対応する力をデザイナーに与えることです。
テクノロジーの急速な発達により、誰もがレスポンシブウェブサイトを求め、レスポンシブウェブサイトのおかげでどんな電子機器からでも簡単にウェブサイトを見ることが出来るようになります。
レスポンシブレイアウトの人気は、多くの驚くべき特徴や柔軟性を提供出来ることに所以しています。
ウェブサイトが携帯電話やタブレットのような電子機器から見られるとき、全てのウェブサイトは、ナビゲーションや写真、スライダー、フォーム、カルーセルなどを全て最適化する必要があります。

レスポンシブウェブデザイン用のjQueryプラグインはいくらでも利用出来ますが、全てのプラグインが素晴らしく、効率的で、ウェブサイトの完全な最適化をすることが出来るかといえばそうではないでしょう。
そこで、たくさんあるプラグインの中から、素晴らしいプラグインを見つける手助けをするために、レスポンシブウェブデザインをする驚くべきjQueryプラグインを18個リスト化しました。
これらのプラグインは特に、ウェブサイトをよりレスポンシブにすることを助け、操作を簡単にし、ユーザー体験は素晴らしいものになるでしょう。
このリストのプラグインは手作業で選ばれており、プロのデザイナーもアマチュアのデザイナーもこれらのプラグインが有益であると感じることでしょう。なので、これらをチェックし、最も好きなものをピックアップしてください。

Isotope — An exquisite jQuery plugin for magical layouts (商用は有料)

Hoverizr – Responsive jQuery Photo manipulation plugin

Response JS

Responsive Image Gallery with a Thumbnail Carousel

jQuery Masonry — A layout plugin for jQuery

scrolldeck

PhotoSwipe

Supersized – Fullscreen Background Slideshow

The Heads-Up Grid

Elastislide – A Responsive jQuery Carousel Plugin

Transform a Menu to a Dropdown for Small Screens

ResponsiveSlides.js

Automatic Image Montage with jQuery

Doubletake

Blueberry – A responsive jQuery image slider

Adaptive Images in HTML

FitText — jQuery plugin for inflating web type

FitVids.JS

レスポンシブデザインを作成するにあたり、有益なjQueryプラグインがたくさんまとめてありますね。 個人的には、まだレスポンシブなサイトを作ったことはないのですが、作ることがあれば参考にしたいと思います。 何か間違いや質問等ございましたら、以下コメント欄、またはリプライ(@DAI199)までお願いします。