ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

JQuery備忘録コミュの【主なセレクタの種類】

  • mixiチェック
  • このエントリーをはてなブックマークに追加
普段はバリバリJavascriptを書いてるからなんとなくJQueryもわかるんだけど、なかなか独特な作法に慣れないのが現状(´Д` )
まずは基本、「セレクタ」の種類についてまとめてみた。
さすがに、タグとかIDとかClassとかのhtml、css用語に関しては理解してるものとします。
(↑がわからない人はhttp://www.tagindex.com/index.html でお勉強しましょう><;)

【基本的なセレクタ】
$("タグ名")   タグ要素へアクセス(例: $("div")、$("span")などなど…)
$("#ID")     IDが指定された要素へアクセス(例: $("#alpha")、$("alpha-inner")などなど…)
$(".クラス名") スタイルシートのクラスが指定された要素へアクセス(例: $("asset-header")などなど…)

複数のセレクタを「,」カンマで区切ってまとめて指定することも可能
(例: $("h3, .title") この場合は「h3」タグとクラス名「title」を指定したことになる)


【入力フォームへのアクセス】
$(":button")   ボタン要素(input[type="button"])へアクセス
$(":text")    テキストボックス要素(input[type="text"])へアクセス
$(":radio")    ラジオボタン要素(input[type="radio"])へアクセス
$(":checkbox") チェックボックス要素(input[type="checkbox"])へアクセス
$(":hidden")   隠し要素(input[type="hidden"])へアクセス

上記以外に、submit、reset、image、password、fileなどのフォーム要素に対しても同様に記述が可能。


【複数の要素からの絞り込み】
$("セレクタ:checked")       チェックされている要素へアクセス
$("セレクタ:selected")       選択されている要素へアクセス
$("セレクタ:hidden")        非表示の要素へアクセス
$("セレクタ:disabled")       操作が無効な要素へアクセス
$("セレクタ:first")         先頭の要素へアクセス
$("セレクタ:last")          末尾の要素へアクセス
$("セレクタ:eq(インデックス)")  指定されたインデックスの要素へアクセス
$("セレクタ:not(セレクタ)")    指定されたセレクタ以外の要素へアクセス
$("セレクタ[属性名=値]")    属性の値が一致する要素へアクセス

上記以外に、lt(インデックス)、gt(インデックス)、even、oddを指定して、インデックスの大小、偶数、奇数の要素へのアクセス、emptyやhas(セレクタ)を指定して、空の要素や指定された子要素を持つ要素へアクセスすることも可能。


【親子関係、兄弟関係にある要素へのアクセス】
$("親要素>子要素")    子要素へのアクセス
$("前の要素+次の要素") 次の要素へのアクセス

上記以外に、階層関係の指定、子要素の中での先頭要素や末尾要素の指定が可能。

コメント(0)

mixiユーザー
ログインしてコメントしよう!

JQuery備忘録 更新情報

JQuery備忘録のメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。