jQuery
väljare

Introduktion

Syntax

• Tagg: Ingen markör, använd taggen direkt
• Id: #id
• Klass: .className
• Attribut: [attributeName]
• Attribut med värde: [attributeName ='value']
• Attribut börjar med värde ^= : [attributeName ^= 'value']
• Attributet slutar med värdet $= : [attributeName $='value']
• Attribut innehåller värde *= : [attributeName *= 'value']
• Pseudo-selector:: :pseudo-selector
• Varje ättling: Utrymme mellan väljare
• Direkt barn: > mellan väljare
• Intilliggande syskon efter det första: +
• Icke-angränsande syskon efter det första: ~
• Eller: , (komma) mellan väljare

Anmärkningar

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

$('#temp\\.foobar')

Typer av väljare

I jQuery kan du välja element på en sida med många olika egenskaper hos elementet, inklusive:

• Typ
• Klass
• ID
• Attribut
• Attributvärde
• Indexerad väljare
• Pseudo-state

Om du känner till CSS-väljare kommer du att märka att väljare i jQuery är desamma (med mindre undantag).

Ta följande HTML till exempel:

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

Välj efter typ:

Följande jQuery-väljare väljer alla <a> -element, inklusive 1, 2, 3 och 4.

$("a")

Välj efter klass

Följande jQuery väljaren kommer att välja alla element i klass example (inklusive icke-a element), vilka är 3, 4 och 5.

$(".example")

Välj efter ID

Följande jQuery-väljare väljer elementet med det givna ID, som är 2.

$("#second-link")

Välja efter attribut

Följande jQuery-väljare kommer att välja alla element med ett definierat href attribut, inklusive 1 och 4.

$("[href]")

Välja efter attributvärde

Följande jQuery-väljare väljer alla element där href attributet finns med ett värde på index.html , vilket är bara 1.

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

Välja efter indexerad position ( indexerad väljare )

Följande jQuery-väljare väljer endast 1, den andra <a> dvs. den second-link eftersom index som levereras är 1 som eq(1) (Observera att indexet börjar på 0 varför den andra valts här!).

$("a:eq(1)")

Välja med indexerad uteslutning

För att utesluta ett element med dess index :not(:eq())

Följande väljer ut <a> element, med undantag av att med den klass example , vilket är en

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

Välja med uteslutning

För att utesluta ett element från ett urval, använd :not()

Följande väljer <a> element, utom de med den klass example , vilka är en och två.

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

Val av Pseudo-stat

Du kan också välja i jQuery med hjälp av pseudo-tillstånd, inklusive :first-child :last-child :first-of-type :last-of-type , etc.

Följande jQuery-väljare kommer bara att välja det första <a> elementet: nummer 1.

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

Kombinera jQuery-väljare

Du kan också öka din specificitet genom att kombinera flera jQuery-väljare; du kan kombinera valfritt antal av dem eller kombinera dem alla. Du kan också välja flera klasser, attribut och tillstånd samtidigt.

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

Detta skulle välja ett <a> element som:

• Har följande klasser: class1, class2, and class3
• Har följande ID: någon someID
• Har följande attribut: attr1
• Har följande attribut och värden: attr2 med värde something , attr3 med värde something
• Har följande tillstånd: first-child och first-of-type

Du kan också skilja olika väljare med komma:

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

Detta skulle välja:

• Alla <a> element
• Alla element som har klassen class1
• Ett element med id #someID

Barn- och syskonval

jQuery-väljare överensstämmer generellt med samma konventioner som CSS, vilket gör att du kan välja barn och syskon på samma sätt.

• Använd ett mellanslag för att välja ett icke-direkt barn
• För att välja ett direkt barn, använd a >
• För att välja ett angränsande syskon efter det första använder du +
• För att välja ett icke-angränsande syskon efter det första, använd a ~

Wildcard-val

Det kan förekomma fall när vi vill välja alla element men det finns ingen gemensam egenskap att välja på (klass, attribut etc). I så fall kan vi använda * -väljaren som helt enkelt väljer alla element:

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

Kombinera väljare

Överväg att följa DOM-strukturen

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

Efterkommande och barnväljare

Med tanke på en förälder <ul> - parentUl hittar dess ättlingar ( <li> ),

1. Enkelt $('parent child')

   >> $('ul.parentUl li')

   Detta får alla matchande ättlingar till den angivna förfäder alla nivåer ner .

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

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

   Detta hittar alla matchande barn ( endast 1: a nivå ner ).

3. Kontextbaserad väljare - $('child','parent')

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

   Detta fungerar på samma sätt som 1. ovan.

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

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

   Detta fungerar på samma sätt som 1. ovan.

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

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

   Detta fungerar på samma sätt som 2. ovan.

Andra kombinationer

Gruppväljare: ","

Välj alla <ul> element OCH alla <li> element OCH alla <span> element:

$('ul, li, span')

Multipelväljare: "" (inget tecken)

Välj alla <ul> element med klass parentUl :

$('ul.parentUl')

Angränsande syskonväljare: "+"

Välj alla <li> element som placeras omedelbart efter ett annat <li> element:

$('li + li')

Allmän syskonväljare: "~"

Välj alla <li> element som är syskon till andra <li> element:

$('li ~ li')

Översikt

Element kan väljas av jQuery med jQuery Selectors . Funktionen returnerar antingen ett element eller en lista över element.

Grundläggande väljare

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

Relationsoperatörer

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

Cache-väljare

Varje gång du använder en väljare i jQuery söker DOM efter element som matchar din fråga. Att göra detta för ofta eller upprepade gånger minskar prestandan. Om du refererar till en specifik väljare mer än en gång bör du lägga till den i cachen genom att tilldela den till en variabel:

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

Detta skulle ersätta:

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

Cachning av denna väljare kan vara till hjälp om din webbplats måste visa / dölja detta element ofta. Om det finns flera element med samma väljare blir variabeln en grupp av dessa element:

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

OBS: Elementet måste existera i DOM vid tidpunkten för tilldelningen till en variabel. Om det inte finns något element i DOM med en klass som heter child kommer du att lagra en tom matris i den variabeln.

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

Kom ihåg att tilldela väljaren till variabeln efter att du har lagt till / tagit bort element i DOM med den väljaren.

Obs : Vid cache-väljare startar många utvecklare variabelns namn med en $ att beteckna att variabeln är ett jQuery-objekt som så:

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

DOM-element som väljare

jQuery accepterar en mängd olika parametrar, och en av dem är ett faktiskt DOM-element. Att skicka ett DOM-element till jQuery får den underliggande array-liknande strukturen för jQuery-objektet att hålla det elementet.

jQuery kommer att upptäcka att argumentet är ett DOM-element genom att inspektera dess node-typ.

Den vanligaste användningen av ett DOM-element är i återuppringningar, där det aktuella elementet skickas till jQuery-konstruktören för att få åtkomst till jQuery API.

Såsom i each återuppringning (Obs! Var och en är en iteratorfunktion).

$(".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-strängar som väljare

jQuery accepterar en mängd olika parametrar som "väljare", och en av dem är en HTML-sträng. Att skicka en HTML-sträng till jQuery får den underliggande arrayliknande strukturen för jQuery-objektet att hålla den resulterande konstruerade HTML-filen.

jQuery använder regex för att avgöra om strängen som skickas till konstruktören är en HTML-sträng, och också att den måste börja med < . Denna regex definieras som rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( förklaring på regex101.com ).

Den vanligaste användningen av en HTML-sträng som en väljare är när uppsättningar av DOM-element bara behöver skapas i kod, ofta används detta av bibliotek för saker som Modal popouts.

Till exempel en funktion som returnerade en ankare taggad in i en div som en mall

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

Skulle returnera ett jQuery-objekt som håller

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

om den kallas som template("google.com","Google") .