1.タグ名 or クラス名 or ID による指定ができる。
$("form"); // タグ名="form"
$(".className"); // クラス名="className"
$("#formId"); // ID="formId"
2.複合条件の指定
・AND 指定
$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1"
$("ul#listId1"); // タグ名="ul" and ID="listId1"
・OR 指定
$("div,.listClass1"); // タグ名="div" or クラス名=listClass1
$("ul,#divId1"); // タグ名="ul" or ID="divId1"
3.階層関係の指定
・親-子関係
$("#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"」の兄弟(自分を除く)
4.フィルタ
・属性
$('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タグ等にもマッチする可能性がある。
댓글 없음:
댓글 쓰기