2016년 5월 5일 목요일

jqueryセレクタ

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タグ等にもマッチする可能性がある。







댓글 없음:

댓글 쓰기