jQueryのセレクタメモ

はじめに

最近 jQuery はじめたけど、セレクタ自由に使えないと捗らないのでまとめておく。

注意点

• 以下に出てくるセレクタ特殊文字（'.', ',', ':', '#', '[', ']'）はエスケープが必要

基本セレクタ

タグ名 or クラス名 or ID による指定ができる。

$("form");       // タグ名="form"
$(".className"); // クラス名="className"
$("#formId");    // ID="formId"

複合条件の指定

区切りなしでAND、カンマ区切りでOR。

AND 指定

$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1" 
$("ul#listId1");    // タグ名="ul" and ID="listId1"

OR 指定

$("div,.listClass1"); // タグ名="div" or クラス名=listClass1 
$("ul,#divId1");      // タグ名="ul"  or ID="divId1"

階層関係の指定

親-子関係

$("#root > .node");         // 「ID="root"」を親に持つ「クラス名="node"」 
$(".node").parent("#root"); // 「クラス名="node"」の親のうち「ID="root"」の要素

先祖-子孫関係

$("#root .node");            // 「ID="root"」を先祖に持つ「クラス名="node"」 
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素

兄-弟関係

$(".node").siblings(); // 「クラス名="node"」の兄弟（自分を除く）

フィルタ

属性

$('input[name]');          // タグ名="input" and name属性を持つ
$('input[name="quiz1"]');  // タグ名="input" and name属性が"quiz1"と一致
$('input[name!="quiz1"]'); // タグ名="input" and name属性が"quiz1"と不一致
$('input[name^="quiz1"]'); // タグ名="input" and name属性が"quiz1"と先頭一致
$('input[name$="quiz1"]'); // タグ名="input" and name属性が"quiz1"と末尾一致
$('input[name*="quiz1"]'); // タグ名="input" and name属性が"quiz1"と部分一致

使用可否

$('input[type="text"]:enabled');   // 入力可能テキストボックス
$('input[type="text"]:disabled');  // 入力禁止テキストボックス

選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked');    // 選択済ラジオボタン
$('select > option:selected');       // リストボックス・コンボボックス内の選択済要素

可視性

$('div:hidden');    // 不可視状態になっているdiv要素（display:noneも含む）
$('input:hidden');  // 不可視状態になっているinput要素≒$('input[type="hidden"]');
$('div:visible');   // 可視状態になっているdiv要素

なお、単純な":hidden"だとhead,title,scriptタグ等にもマッチする可能性がある。

おことわり

• ここで挙げたのは、個人的によく使いそうなもののみである。
• 動作未確認のため、表記ミス・勘違いがあるかもしれない。
• 指摘があれば多分修正する。