デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:inputinput要素を選択

構文

input要素を選択
$(":input")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてinputを設定するとinput要素を選択します。 新しいブラウザではelement(html要素)を利用して"input,button,select,textarea"(要素名を列挙)としたほうが高速なため、現在では非推奨のセレクタとなっています(解説の最後に推奨される書き方を紹介しています)。

解説

input要素を選択します

サンプル(input/01.html)を開いてbody内の構成を確認してください。フォーム関連の要素が一通り記述されています。jQueryは以下の様に記述され、ブラウザ内(document)をクリックするとinput要素を選択します。選択した要素はcssメソッドを利用して赤枠を付けます。

$(document).click(function(){
	$(":input").css("border","3px solid red");
});

チェックボックスとラジオボタンにはボーダーが設定できないため赤枠が付いていませんが、実際には選択されています。詳しくは:checkbox:radioを確認して下さい。

推奨される書き方

新しいブラウザではelement(html要素)を利用して要素名を書いたほうが高速です。
サンプル(input/02.html)を開いてbody内の構成がinput/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、セレクタが以下の様に変更されているだけです。

$(document).click(function(){
	$("input").css("border","3px solid red");
});

結果として、ブラウザ内をクリックするとフォーム要素に赤枠が付きますが、button要素とselect要素とtextarea要素には赤枠が付きません。

これらの要素はinput要素とは別のため、選択するには別途要素を指定します。サンプル(input/02b.html)を開いてセレクタが以下の様に変更されていることを確認してください。

$(document).click(function(){
	$("input,button,select,textarea").css("border","3px solid red");
});

これで:inputと同じようにフォーム要素が選択されます。