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

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

:submit送信ボタンを選択

構文

送信ボタン(type属性がsubmitの要素)を選択
$(":submit")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてsubmitを設定すると送信ボタン(type属性がsubmitの要素)を選択します。※type属性を設定していないbutton要素も、初期設定値がsubmitのため選択されます。

新しいブラウザでは[属性名='値']を利用してinput[type='submit']としたほうが高速なため、現在では非推奨のセレクタとなっています(解説の最後に推奨される書き方を紹介しています)。

解説

送信ボタンを選択します

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

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

type属性を設定していないbutton要素も選択されることに注意しましょう(button要素はデフォルトでtype属性がsubmitのため)

推奨される書き方

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

$(document).click(function(){
	$("input[type='submit']").css("border","3px solid red");
});

結果はsubmit/01.htmlとすこし異なり、button要素には赤枠が付きません。これはセレクタでinput要素しか設定していないためです。もしbutton要素も選択するのであればサンプル(submit/02b.html)のように、複数のセレクタ(or)を利用してセレクタにbuttonを追加します。

$(document).click(function(){
	$("button, input[type='submit']").css("border","3px solid red");
});

メモ

button[type="submit"]という記述について

本家ページは頻繁に更新されます。:submitのページについても、上記の記事「推奨される書き方」を書いた後に更新されたようで、buttonではなくbutton[type="submit"]という記述に変わっていました。

ということで実際にサンプルを作成したのですが、思うように機能しません(Mac.chrome/safari)。サンプル(submit/test01.html)を開いてbody内の構成がsubmit/01.htmlと同じ事を確認してください。jQueryは以下の様にセレクタを変更しています。

$("input[type='submit'], button[type='submit']").css("border","3px solid red");

しかし画面をクリックしてもinput要素のボタンは選択されるのですが、button要素のボタンは選択されません...。何か間違えているのでしょうか?