jQuery
selectors

Invoering

Syntaxis

• Tag: Geen marker, gebruik de tag direct
• Id: #id
• Klasse: .className
• Attribuut: [attributeName]
• Attribuut met waarde: [attributeName ='value']
• Attribuut begint met waarde ^= : [attributeName ^= 'value']
• Attribuut eindigt met waarde $= : [attributeName $='value']
• Attribuut bevat waarde *= : [attributeName *= 'value']
• Pseudo-selector :pseudo-selector
• Elke afstammeling: spatie tussen selectors
• Directe kinderen: > tussen selectors
• Aangrenzende broer of zus na de eerste: +
• Niet-aangrenzende broer of zus na de eerste: ~
• Of: , (komma) tussen selector

Opmerkingen

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

$('#temp\\.foobar')

Soorten selectors

In jQuery kunt u elementen op een pagina selecteren met behulp van veel verschillende eigenschappen van het element, waaronder:

• Type
• Klasse
• ID kaart
• Bezit van kenmerk
• Attribuutwaarde
• Geïndexeerde selector
• Pseudo-state

Als u CSS-selectors kent , zult u merken dat selectors in jQuery hetzelfde zijn (met kleine uitzonderingen).

Neem bijvoorbeeld de volgende 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 -->

Selecteren op type:

De volgende jQuery-selector selecteert alle <a> elementen, inclusief 1, 2, 3 en 4.

$("a")

Selecteren op klasse

De volgende jQuery selector alle elementen van klasse selecteren example (met inbegrip van niet-a-elementen), die 3, 4 en 5.

$(".example")

Selecteren op ID

De volgende jQuery-selector selecteert het element met de opgegeven ID, namelijk 2.

$("#second-link")

Selecteren op bezit van kenmerk

De volgende jQuery-selector selecteert alle elementen met een gedefinieerd href kenmerk, inclusief 1 en 4.

$("[href]")

Selecteren op kenmerkwaarde

De volgende jQuery-selector selecteert alle elementen waar het href kenmerk bestaat met een waarde van index.html , die slechts 1 is.

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

Selecteren op geïndexeerde positie ( geïndexeerde selector )

De volgende jQuery-selector selecteert slechts 1, de tweede <a> ie. de second-link omdat de geleverde index 1 zoals eq(1) (Merk op dat de index begint bij 0 daarom wordt de tweede hier geselecteerd!).

$("a:eq(1)")

Selecteren met geïndexeerde uitsluiting

Een element uitsluiten met behulp van de index :not(:eq())

De volgende selecteert <a> elementen, behalve dat de klasse example , dat 1

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

Selecteren met uitsluiting

Gebruik :not() om een element uit te sluiten van een selectie.

De volgende selecteert <a> elementen, behalve die met de klasse example , waarvan 1 en 2 zijn.

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

Selecteren op Pseudo-staat

U kunt ook in jQuery selecteren met behulp van pseudo-toestanden, waaronder :first-child :last-child :first-of-type :last-of-type , etc.

De volgende jQuery-selector selecteert alleen het eerste <a> -element: nummer 1.

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

JQuery-selectors combineren

U kunt uw specificiteit ook vergroten door meerdere jQuery-selectors te combineren; je kunt een willekeurig aantal combineren of allemaal combineren. U kunt ook meerdere klassen, attributen en statussen tegelijkertijd selecteren.

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

Dit zou een <a> -element selecteren dat:

• Heeft de volgende klassen: class1, class2, and class3
• Heeft de volgende ID: someID
• Heeft het volgende attr1 : attr1
• Heeft de volgende attributen en waarden: attr2 met waarde something , attr3 met waarde something
• Heeft de volgende statussen: first-child en first-of-type

U kunt ook verschillende selectors scheiden met een komma:

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

Dit zou selecteren:

• Alle <a> elementen
• Alle elementen die de klasse class1
• Een element met de id #someID

Selectie kind en broer of zus

jQuery-selectors voldoen doorgaans aan dezelfde conventies als CSS, waarmee u kinderen en broers en zussen op dezelfde manier kunt selecteren.

• Gebruik een spatie om een niet-direct kind te selecteren
• Gebruik een > om een direct kind te selecteren
• Gebruik een + om een aangrenzende broer of zus te selecteren na de eerste
• Gebruik een ~ om een niet-aangrenzende broer of zus te selecteren na de eerste

Selectie van jokertekens

Er kunnen gevallen zijn waarin we alle elementen willen selecteren, maar er is geen gemeenschappelijke eigenschap om op te selecteren (klasse, kenmerk, enz.). In dat geval kunnen we de * selector gebruiken die eenvoudig alle elementen selecteert:

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

Selectors combineren

Overweeg DOM-structuur te volgen

<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>

Nakomelingen en kind selectors

Gegeven een ouder <ul> - parentUl vindt zijn nakomelingen ( <li> ),

1. Simple $('parent child')

   >> $('ul.parentUl li')

   Hiermee worden alle overeenkomende afstammelingen van de opgegeven voorouder alle niveaus lager .

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   Hiermee worden alle overeenkomende kinderen gevonden ( alleen 1e niveau lager ).

3. Op context gebaseerde selector - $('child','parent')

   >> $('li','ul.parentUl')

   Dit werkt hetzelfde als 1. hierboven.

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   Dit werkt hetzelfde als 1. hierboven.

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   Dit werkt hetzelfde als 2. hierboven.

Andere combinators

Groepselector: ","

Selecteer alle <ul> elementen EN alle <li> elementen EN alle <span> elementen:

$('ul, li, span')

Veelvouden selector: "" (geen teken)

Selecteer alle <ul> elementen met class parentUl :

$('ul.parentUl')

Aangrenzende broer / zus-selector: "+"

Selecteer alle <li> -elementen die direct na een ander <li> -element worden geplaatst:

$('li + li')

Algemene broer / zus-selector: "~"

Selecteer alle <li> -elementen die broers of zussen zijn van andere <li> -elementen:

$('li ~ li')

Overzicht

Elementen kunnen worden geselecteerd door jQuery met behulp van jQuery Selectors . De functie retourneert een element of een lijst met elementen.

Basic selectors

$("*")                       // 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

Relationele operatoren

$("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>

Caching-selectors

Telkens wanneer u een selector in jQuery gebruikt, wordt de DOM gezocht naar elementen die overeenkomen met uw zoekopdracht. Als u dit te vaak of herhaaldelijk doet, neemt de prestatie af. Als u meer dan eens naar een specifieke selector verwijst, moet u deze aan de cache toevoegen door deze aan een variabele toe te wijzen:

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

Dit zou vervangen:

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

Caching van deze selector kan nuttig zijn als uw website dit element vaak moet tonen / verbergen. Als er meerdere elementen met dezelfde selector zijn, wordt de variabele een array van deze elementen:

<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>

OPMERKING: Het element moet bestaan in de DOM op het moment van toewijzing aan een variabele. Als er geen element in de DOM is met een klasse met de naam child , slaat u een lege array op in die variabele.

<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>

Vergeet niet om de selector opnieuw toe te wijzen aan de variabele na het toevoegen / verwijderen van elementen in de DOM met die selector.

Opmerking : Bij het cachen van selectors beginnen veel ontwikkelaars de variabelenaam met een $ om aan te geven dat de variabele een jQuery-object is zoals:

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

DOM-elementen als selectors

jQuery accepteert een breed scala aan parameters, en een daarvan is een echt DOM-element. Als u een DOM-element doorgeeft aan jQuery, zal de onderliggende matrixachtige structuur van het jQuery-object dat element bevatten.

jQuery detecteert dat het argument een DOM-element is door het nodeType ervan te inspecteren.

Het meest voorkomende gebruik van een DOM-element is in callbacks, waarbij het huidige element wordt doorgegeven aan de jQuery-constructor om toegang te krijgen tot de jQuery API.

Zoals in each callback (opmerking: elke functie is een iterator).

$(".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-strings als selectors

jQuery accepteert een breed scala aan parameters als "selectors", en een daarvan is een HTML-string. Als u een HTML-tekenreeks doorgeeft aan jQuery, zal de onderliggende matrixachtige structuur van het jQuery-object de resulterende geconstrueerde HTML bevatten.

jQuery gebruikt regex om te bepalen of de string die aan de constructor wordt doorgegeven een HTMLstring is, en ook dat deze moet beginnen met < . Die regex is gedefinieerd als rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( uitleg op regex101.com ).

Het meest gebruikelijke gebruik van een HTML-string als selector is wanneer sets van DOM-elementen alleen in code hoeven te worden gemaakt, vaak wordt dit door bibliotheken gebruikt voor zaken als Modal popouts.

Een functie die bijvoorbeeld een ankertag retourneert die in een div als een sjabloon is verpakt

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

Zou een jQuery-object vasthouden

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

indien aangeroepen als template("google.com","Google") .