jQuery => セレクタ

前書き

jQueryセレクタは、HTMLドキュメント内のDOM（ドキュメントオブジェクトモデル）要素を選択または検索します。 ID、名前、タイプ、属性、クラスなどに基づいてHTML要素を選択するために使用されます。既存のCSSセレクタに基づいています。

構文

タグ：マーカーなし、直接タグを使用
Id： #id
クラス： .className
属性： [attributeName]
値を持つ属性： [attributeName ='value']
属性は値^=始まります： [attributeName ^= 'value']
属性は値$=終わります： [attributeName $='value']
属性に値*=が含まれています： [attributeName *= 'value']
擬似セレクタ：： :pseudo-selector
任意の子孫：セレクタ間のスペース
直接の子： >セレクタの間
最初の次の兄弟： +
最初に続く隣接しない兄弟： ~
または：セレクタの間に, （カンマ）

備考

classやid selectorsや、特殊文字を含むattributeを書くときなど

! " # $ % & ' ( ) * + , . / : ; < = > ? @ [ \ ] ^ { | } ~

2つのバックスラッシュ\\を使用して文字をエスケープする必要があります。

例えば。

<span id="temp.foobar"><span>

セレクタはフレームのように、

$('#temp\\.foobar')

セレクタの種類

jQueryでは、要素の多くのさまざまなプロパティを使用してページ内の要素を選択できます。

タイプ
クラス
ID
属性の所有
属性値
インデックス付きセレクタ
擬似状態

あなたがCSSセレクタを知っているなら、jQueryのセレクタが同じであることに気付くでしょう（小さな例外を除いて）。

次のようなHTMLを例にとります：

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

タイプによる選択：

次のjQueryセレクタは、1、2、3、4を含むすべての<a>要素を選択します。

$("a")

クラスで選択する

次のjQueryセレクタは、クラスのexampleすべての要素（non-a要素を含む）を3,4,5に選択します。

$(".example")

IDで選択する

次のjQueryセレクタは、指定されたID（2）を持つ要素を選択します。

$("#second-link")

属性の所有による選択

次のjQueryセレクタは、定義されたhref属性を持つすべての要素（1と4を含む）を選択します。

$("[href]")

属性値による選択

次のjQueryセレクタは、 href属性が存在するすべての要素をindex.htmlという値で選択します。値は1だけです。

$("[href='index.html']")

インデックス付きの位置による選択（ インデックス付きセレクタ ）

次のjQueryセレクタは1つだけを選択し、2つ目の<a>は選択します。 second-linkされたインデックスがあるため、 1のようなeq(1)インデックスはから始まることに注意してください0ここで選択されてしまったので、第二！）。

$("a:eq(1)")

インデックス付き除外で選択する

インデックスを使用して要素を除外するには:not(:eq())

次のexampleでは、 <a>要素を選択していますが、クラスのexampleでは1

$("a").not(":eq(0)")

除外を選択する

要素を選択から除外するには、次のようにし:not()

次のexampleでは、 <a>要素を選択していますが、クラスのexampleでは1と2です。

$("a:not(.example)")

擬似状態による選択

:first-child 、 :last-child 、 :first-of-type 、 :last-of-typeなど、擬似状態を使用してjQueryを選択することもできます。

次のjQueryセレクタは最初の<a>要素：number 1のみを選択します。

$("a:first-of-type")

jQueryセレクタの組み合わせ

また、複数のjQueryセレクタを組み合わせて特異性を高めることもできます。任意の数を組み合わせたり、それらのすべてを組み合わせることができます。複数のクラス、属性、および状態を同時に選択することもできます。

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

これは<a>要素を選択します：

class1, class2, and class3クラスがあります。
次のIDを持っている： someID
以下の属性をattr1ます： attr1
次の属性と値を持ちます： attr2に値something 、 attr3に値something
first-childとfirst-of-type

異なるセレクタをカンマで区切ることもできます。

$("a, .class1, #someID")

これにより、

すべての<a>要素
クラスclass1を持つすべての要素
id #someIDの要素

子供と兄弟の選択

jQueryセレクタは、CSSと同じ規則に準拠しているため、同じ方法で子と兄弟を選択することができます。

非直接的な子供を選択するには、スペースを使用します
直接の子を選択するには、a >
最初の兄弟に続く隣接する兄弟を選択するには、 +
最初に続く隣り合わせの兄弟を選択するには、 ~

ワイルドカード選択

すべての要素を選択したいが、選択する共通のプロパティ（クラス、属性など）がない場合があります。その場合、 * selectorはすべての要素を選択するだけです：

$('#wrapper *')    // Select all elements inside #wrapper element

セレクタの組み合わせ

DOM構造に従うことを検討する

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

子孫セレクタ

親<ul> - parentUlがその子孫（ <li> ）を見つけると、

シンプルな$('parent child')
>> $('ul.parentUl li')
これにより、指定された祖先のすべてのレベルが一致する子孫がすべて下になります。
> - $('parent > child')
>> $('ul.parentUl > li')
これにより、すべての一致する子が検索されます（ 最初のレベルのみ ）。
コンテキストベースセレクタ - $('child','parent')
>> $('li','ul.parentUl')
これは上記1.と同じです。
find() - $('parent').find('child')
>> $('ul.parentUl').find('li')
これは上記1.と同じです。
children() - $('parent').find('child')
>> $('ul.parentUl').children('li')
これは上記2.と同じです。

他のコンビネータ

グループセレクタ： "、"

すべての<ul>要素とすべての<li>要素とすべての<span>要素を選択します。

$('ul, li, span')

複数のセレクタ： ""（文字なし）

parentUlクラスのすべての<ul>要素を選択します。

$('ul.parentUl')

隣接する兄弟セレクタ： "+"

別の<li>要素の直後に配置されているすべての<li>要素を選択します。

$('li + li')

一般的な兄弟セレクタ： "〜"

他の<li>要素の兄弟であるすべての<li>要素を選択します。

$('li ~ li')

概要

要素は、 jQueryセレクタを使用してjQueryによって選択できます。この関数は、要素または要素のリストのいずれかを返します。

基本セレクタ

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

関係演算子

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

キャッシングセレクタ

jQueryでセレクタを使用するたびに、DOMでクエリに一致する要素が検索されます。これを頻繁にまたは繰り返し行うと、パフォーマンスが低下します。特定のセレクタを複数回参照する場合、そのセレクタを変数に割り当てることによってキャッシュに追加する必要があります。

var nav = $('#navigation');
nav.show();

これは以下を置き換えます：

$('#navigation').show();

ウェブサイトでこの要素を頻繁に表示/非表示にする必要がある場合は、このセレクタをキャッシュすると役立ちます。同じセレクタを持つ複数の要素がある場合、変数は次の要素の配列になります。

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

注：要素は、変数への割り当て時にDOM内に存在する必要があります。 childというクラスを持つDOM内に要素がない場合は、その変数に空の配列を格納します。

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

セレクタでDOMの要素を追加/削除した後、セレクタを変数に再割り当てすることを忘れないでください。

注意：セレクタをキャッシュするとき、多くの開発者が$を使って変数名を開始し、変数がjQueryオブジェクトであることを示します。

var $nav = $('#navigation');
$nav.show();

セレクタとしてのDOM要素

jQueryはさまざまなパラメータを受け取り、そのうちの1つは実際のDOM要素です。 DOM要素をjQueryに渡すと、 jQueryオブジェクトの基本的な配列のような構造がその要素を保持します。

jQueryは、nodeTypeを調べることによって、引数がDOM要素であることを検出します。

DOM要素の最も一般的な使用方法は、jQuery APIへのアクセスを得るために、現在の要素がjQueryコンストラクターに渡されるコールバックです。

eachコールバックのように（注：それぞれは反復関数です）。

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

セレクタとしてのHTML文字列

jQueryは、さまざまなパラメータを「セレクタ」として受け入れ、そのうちの1つはHTML文字列です。 HTML文字列をjQueryに渡すと、 jQueryオブジェクトの基本的な配列のような構造が、結果として生成されたHTMLを保持します。

jQueryのは、文字列は、コンストラクタに渡される場合HTMLstringであり、またそれがで始めなければならないことを決定するために正規表現を使用しています< 。その正規表現は、 rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ /（regex101.com ）。

HTML文字列をセレクタとして使用する最も一般的な方法は、DOM要素のセットをコードでのみ作成する必要がある場合です。これは、Modal popoutなどのライブラリで使用されることがよくあります。

たとえば、divにラップされたアンカータグをテンプレートとして返した関数

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

jQueryオブジェクトを返します。

<div>
    <a href="google.com">Google</a>
</div>

template("google.com","Google")と呼ばれる場合

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

jQuery
セレクタ

サーチ…

前書き

構文

備考