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

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

:buttonボタン要素を選択

構文

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

機能

:(コロン)に続けてbuttonを設定するとボタン(button要素、typeがbuttonのinput要素)を選択します。
送信ボタンやリセットボタン等は選択されません。

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

解説

ボタン要素を選択します

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

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

結果として、ブラウザ内をクリックするとbutton要素とtype属性がbuttonに設定されたinput要素が選択されます。それ以外のボタン(送信ボタン等)は選択されていないことを確認して下さい。

推奨される書き方

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

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

結果として、ブラウザ内をクリックするとtype属性がbuttonに設定されたinput要素には赤枠が付くのですが、button要素には赤枠が付きません。もしbutton要素も選択したい場合はサンプル(button/02b.html)のように、複数のセレクタ(or)を利用してセレクタにbuttonを追加します。

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

結果として、button/01.htmlと同じようにブラウザ内をクリックするとbutton要素とtype属性がbuttonに設定されたinput要素が選択されます。