セレクタの使い方 [jQuery]

セレクタ

参考：

Selectors | jQuery API Documentation [Official]

使い方

参考：

jQuery のセレクタメモ – Qiita

CSS セレクタを使おう – Qiita

jQuery 関数／セレクタの使い方 | Web Design Leaves

jQuery のセレクタ解説 | SMART

jQuery のセレクタ一覧 | iPentec

jQuery で要素を選択するためのセレクタの指定方法まとめ | SONICMOOV LAB

セレクタ目次 | jQuery リファレンス (jquerystudy.info)

Selectors | jQuery 日本語リファレンス (semooh.jp)

Selectors | W3Schools

子孫セレクタ

ul 要素内の li 要素を抽出する。

var $items = $('ul li');

参考：

ancestor descendant | jQuery 日本語リファレンス (semooh.jp)

論理積／論理和 (and / or)

参考：

セレクタの and 条件と or 条件 – Qiita

jQuery で複数セレクタを and 条件と or 条件で指定するときの指定方法の違いをメモする | 雑想空間

属性セレクタ

参考：

属性セレクター [attribute=’value’] | Webkaru

属性セレクター [attribute] | Webkaru

属性セレクター [attribute*=’value’] | Webkaru

属性値で目的の要素を絞り込むには？ (属性フィルター) | Build Insider

[ 属性名 = ‘値’ ] | jQuery リファレンス (jquerystudy.info)

[ 属性名 ] | jQuery リファレンス (jquerystudy.info)

属性セレクタ | jQuery リファレンス メモ (cercopes-z.com)

Attribute Equals Selector [name=”value”] | jQuery API Documentation [Official]

Attribute | jQuery API Documentation [Official]

[attribute=value] Selector | W3Schools

複数の属性

複数の属性について論理積条件 (and) で要素を選択する。

var $elem = $('[attr1="val1"][attr2="val2"]');

複数の属性について論理和条件 (or) で要素を選択する。

var $elem = $('[attr1="val1"],[attr2="val2"]');

参考：

複数の属性 | jQuery リファレンス (jquerystudy.info)

複数のセレクタ (or) | jQuery リファレンス (jquerystudy.info)

前方一致／後方一致

属性の前方一致には ^= を使う。

var $elem = $('[attr^="val"]');

属性の後方一致には $= を使う。

var $elem = $('[attr$="val"]');

参考：

jQuery の属性セレクタで前方・後方・部分一致を使って要素を取得する | EC のウェブ担当者のメモ

jQuery で文字列の前方一致や後方一致を判別する方法 | ONE NOTES

[ 属性名 ^= ‘値’ ] | jQuery リファレンス (jquerystudy.info)

jQuery の class 前方一致で詰まった – Qiita

data 属性

参考：

data 属性に特定の値を持つ要素を指定する方法。| うぇぶろぐらまーな日誌

:data

参考：

:data() Selector | jQuery UI 日本語リファレンス (js STUDIO)

要素の存在を判定する

最初の要素が空かどうか判定する。最初の要素が undefined であれば要素は存在しない。

var $content = $('.content');
if ($content[0]) {
  // 要素が存在する場合の処理
}

参考：

jQuery による要素の存在チェックまとめ | 小粋空間

要素の存在を確認する6通りのコードと実行速度 | きほんのき

jQuery オブジェクトが空かどうかを調べる確実な方法 | PisukeCode

jQuery の要素の存在確認について – teratail

大文字小文字を区別しない

参考：

CSS selector case insensitive for attributes – Stack Overflow

正規表現を使う

• jQuery の each 内で判定する
• jQuery の filter 内で判定する

参考：

jQuery のセレクタに正規表現・属性フィルタを使う方法！| 侍エンジニア塾ブログ

jQuery に正規表現セレクタを追加する

次の関数を追加することで、:regex が使えるようになる。

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

(出典：James Padolsey)

クラス名に -hoge- を含む要素を抽出する。

var $hogehoge = $(":regex(class, .*-hoge-.*)");

参考：

Regex Selector for jQuery | James Padolsey (archive)

jQuery selector regular expressions – Stack Overflow