CSS Javascript jQuery

Javascriptのセレクタまとめ

セレクタメモ。

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


目次[非表示]

注意点

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

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

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

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

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

基本

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// すべての要素を取得
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

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

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

OR

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

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

関係性

親子関係

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

子孫

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

兄弟

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

隣接兄弟

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

条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// タグ="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"]');

疑似クラス

良く使うやつをご紹介。

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


入力状態

1
2
3
4
5
// 入力可能テキストボックス
document.querySelector('input[type="text"]:enabled');
 
// 入力禁止テキストボックス
document.querySelector('input[type="text"]:disabled');

選択状態

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

可視状態

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

参考


まとめ

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


0 件のコメント :

コメントを投稿