CSS Javascript jQuery

Javascriptのセレクタまとめ

セレクタメモ。

Jquery、CSSにも応用可能です。


注意点

説明は基本的にJavascriptの「querySelector」で説明させていただきます。

JqueryやCSSのセレクタにも対応出来ます。

// この形式で説明
document.querySelector("#input1");

エスケープ文字があり以下の文字を指定する場合は\を付けてエスケープする必要があります。

  • .→\.
  • ,→\,
  • :→\:
  • #→\#
  • [→\]
  • ]→\[

基本

基本的なセレクタの指定方法

// すべての要素を取得
document.querySelector("*");

// 指定のタグを取得
document.querySelector("p"); // pタグ取得

// 指定のクラスを取得
document.querySelector(".sampleClass");     // class="sampleClass"

// 指定のIDを取得
document.querySelector("#sampleId");        // id="sampleId"

// 指定の属性を持つものを取得（aタグ タイトル属性持ち）
document.querySelector("a[title]");         // <a title="title">hoge</a>

// 指定の属性の値を持つものを取得（inputタグ name=hoge）
document.querySelector("input[name=hoge]"); // <input name="hoge"></input>

クラスは「.」、IDは「#」を使って指定可能です。


複合

AND条件とOR条件の2種類があります。


AND

空白を入れない所がポイントになります。

// pタグのsampleClassを取得
document.querySelector("p.sampleClass"); // <p class="sampleClass">hoge</p>
// pタグのsampleIdを取得
document.querySelector("p#sampleId");    // <p id="sampleId">hoge</p>

OR

カンマ「,」で区切ります。

// クラス sampleClass、ID sampleIdを取得
document.querySelector(".sampleClass #sampleId");
// <p class="sampleClass">hoge</p>
// <p id="sampleId">hoge</p>

関係性

親子関係

// divタグが親のpタグを取得
document.querySelector("div>p");

子孫

// divタグが先祖のpタグを取得
document.querySelector("div p");

兄弟

// divタグの後にあるpタグを取得（直後でなくても取得）
document.querySelector("div ~ p");

隣接兄弟

// divタグの直後にあるpタグを取得
document.querySelector("div + p");

条件

// タグ="input" and name属性を持つ
document.querySelector('input[name]');

// タグ="input" and name属性が"hoge"と一致
document.querySelector('input[name="hoge"]');

// タグ="input" and name属性が"hoge"と不一致
document.querySelector('input[name!="hoge"]');

// タグ="input" and name属性が"hoge"と先頭一致
document.querySelector('input[name^="hoge"]');

// タグ="input" and name属性が"hoge"と末尾一致
document.querySelector('input[name$="hoge"]');

// タグ="input" and name属性が"hoge"と部分一致
document.querySelector('input[name*="hoge"]');

疑似クラス

良く使うやつをご紹介。

こちらに記載がない疑似クラスを参考にしてください。


入力状態

// 入力可能テキストボックス
document.querySelector('input[type="text"]:enabled');

// 入力禁止テキストボックス
document.querySelector('input[type="text"]:disabled');

選択状態

// 選択済チェックボックス
$('input[type="checkbox"]:checked');

// 選択済ラジオボタン
$('input[type="radio"]:checked');

// リストボックス・コンボボックス内の選択済要素
$('select > option:selected');

可視状態

$('div:hidden');    // 不可視状態になっているdiv要素
$('div:visible');   // 可視状態になっているdiv要素

参考


まとめ

CSSの疑似要素以外が作れるらしいので、CSS セレクターを参考にしてみてください。


0 件のコメント :

コメントを投稿