jQuery
I selettori

introduzione

Sintassi

• Tag: nessun marcatore, usa direttamente il tag
• Id: #id
• Classe: .className
• Attributo: [attributeName]
• Attributo con valore: [attributeName ='value']
• L'attributo inizia con valore ^= : [attributeName ^= 'value']
• L'attributo termina con valore $= : [attributeName $='value']
• L'attributo contiene valore *= : [attributeName *= 'value']
• Pseudo-selettore :pseudo-selector
• Qualsiasi discendente: spazio tra i selettori
• Bambini diretti: > tra i selezionatori
• Fratello adiacente che segue il primo: +
• Fratello non adiacente che segue il primo: ~
• Oppure: , (virgola) tra il selettore

Osservazioni

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

$('#temp\\.foobar')

Tipi di selettori

In jQuery puoi selezionare gli elementi in una pagina usando molte diverse proprietà dell'elemento, tra cui:

• genere
• Classe
• ID
• Possesso di attributo
• Valore attributo
• Selettore indicizzato
• Pseudo-Stato

Se conosci i selettori CSS , noterai che i selettori in jQuery sono gli stessi (con piccole eccezioni).

Prendi il seguente codice HTML per esempio:

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

Selezione per tipo:

Il seguente selettore jQuery selezionerà tutti gli elementi <a> , inclusi 1, 2, 3 e 4.

$("a")

Selezione per classe

Il seguente selettore jQuery selezionerà tutti gli elementi della classe example (anche non a elementi), che sono 3, 4 e 5.

$(".example")

Selezione per ID

Il seguente selettore jQuery selezionerà l'elemento con l'ID specificato, che è 2.

$("#second-link")

Selezione per possesso di attributo

Il seguente selettore jQuery selezionerà tutti gli elementi con un attributo href definito, compresi 1 e 4.

$("[href]")

Selezione per valore attributo

Il seguente selettore jQuery selezionerà tutti gli elementi in cui l'attributo href esiste con un valore di index.html , che è solo 1.

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

Selezione per posizione indicizzata ( selettore indicizzato )

Il seguente selettore jQuery selezionerà solo 1, il secondo <a> es. il second-link perché l'indice fornito è 1 come eq(1) (si noti che l'indice inizia da 0 quindi il secondo è stato selezionato qui!).

$("a:eq(1)")

Selezione con esclusione indicizzata

Per escludere un elemento usando il suo indice :not(:eq())

Il seguente seleziona <a> elementi, tranne che con l' example classe, che è 1

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

Selezione con esclusione

Per escludere un elemento da una selezione, utilizzare :not()

Di seguito vengono selezionati gli elementi <a> , ad eccezione di quelli con l' example classe, che sono 1 e 2.

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

Selezione per Pseudo-stato

Puoi anche selezionare in jQuery usando pseudo stati, tra cui :first-child :last-child :first-of-type :last-of-type , ecc.

Il seguente selettore jQuery selezionerà solo il primo elemento <a> : numero 1.

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

Combinazione di selettori jQuery

Puoi anche aumentare la tua specificità combinando più selettori jQuery; puoi combinarne un numero qualsiasi o combinarli tutti. Puoi anche selezionare più classi, attributi e stati allo stesso tempo.

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

Questo selezionerebbe un elemento <a> che:

• Ha le seguenti classi: class1, class2, and class3
• Ha il seguente ID: someID
• Ha il seguente attributo: attr1
• Ha i seguenti attributi e valori: attr2 con valore something , attr3 con valore something
• Ha i seguenti stati: first-child e first-of-type

Puoi anche separare diversi selettori con una virgola:

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

Questo selezionerebbe:

• Tutti gli elementi <a>
• Tutti gli elementi che hanno la classe class1
• Un elemento con ID #someID

Selezione di bambini e fratelli

I selettori jQuery sono generalmente conformi alle stesse convenzioni del CSS, che consente di selezionare bambini e fratelli allo stesso modo.

• Per selezionare un bambino non diretto, utilizzare uno spazio
• Per selezionare un bambino diretto, usa un >
• Per selezionare un fratello adiacente che segue il primo, usa un +
• Per selezionare un fratello non adiacente dopo il primo, usa un ~

Selezione jolly

Ci possono essere casi in cui vogliamo selezionare tutti gli elementi ma non c'è una proprietà comune su cui selezionare (classe, attributo, ecc.). In tal caso possiamo usare il selettore * che seleziona semplicemente tutti gli elementi:

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

Combinare i selettori

Considera la seguente struttura 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>

Selettori discendenti e figli

Dato un genitore <ul> - parentUl trova i suoi discendenti ( <li> ),

1. Semplice $('parent child')

   >> $('ul.parentUl li')

   Questo ottiene tutti i discendenti corrispondenti dell'antenato specificato di tutti i livelli .

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

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

   Trova tutti i bambini corrispondenti ( solo 1 ° livello in basso ).

3. Selettore basato sul contesto - $('child','parent')

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

   Funziona come sopra 1.

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

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

   Funziona come sopra 1.

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

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

   Funziona come 2. sopra.

Altri combinatori

Selettore gruppo: ","

Seleziona tutti gli elementi <ul> E tutti gli elementi <li> E tutti gli elementi <span> :

$('ul, li, span')

Selettore Multipli: "" (nessun carattere)

Seleziona tutti gli elementi <ul> con classe parentUl :

$('ul.parentUl')

Selettore della Sibling adiacente: "+"

Seleziona tutti gli elementi <li> posizionati immediatamente dopo un altro elemento <li> :

$('li + li')

Selettore generale del fratello germano: "~"

Seleziona tutti gli elementi <li> che sono fratelli di altri elementi <li> :

$('li ~ li')

Panoramica

Gli elementi possono essere selezionati da jQuery usando jQuery Selectors . La funzione restituisce un elemento o un elenco di elementi.

Selettori di base

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

Operatori relazionali

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

Selettori di memorizzazione nella cache

Ogni volta che si utilizza un selettore in jQuery, il DOM viene cercato per gli elementi che corrispondono alla query. Fare ciò troppo spesso o ripetutamente ridurrà le prestazioni. Se si fa riferimento a un selettore specifico più di una volta, è necessario aggiungerlo alla cache assegnandolo a una variabile:

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

Questo sostituirà:

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

La memorizzazione nella cache di questo selettore potrebbe rivelarsi utile se il tuo sito web deve mostrare / nascondere spesso questo elemento. Se ci sono più elementi con lo stesso selettore, la variabile diventerà un array di questi elementi:

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

NOTA: l'elemento deve esistere nel DOM al momento dell'assegnazione a una variabile. Se non ci sono elementi nel DOM con una classe chiamata child , verrà memorizzata una matrice vuota in quella variabile.

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

Ricordarsi di riassegnare il selettore alla variabile dopo aver aggiunto / rimosso elementi nel DOM con quel selettore.

Nota : quando si selezionano i selettori nella cache, molti sviluppatori inizieranno il nome della variabile con un $ per indicare che la variabile è un oggetto jQuery in questo modo:

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

Elementi DOM come selettori

jQuery accetta un'ampia varietà di parametri e uno di questi è un vero elemento DOM. Il passaggio di un elemento DOM a jQuery causerà la struttura dell'array sottostante all'oggetto jQuery per contenere quell'elemento.

jQuery rileverà che l'argomento è un elemento DOM controllando il suo nodeType.

L'uso più comune di un elemento DOM è nei callback, in cui l'elemento corrente viene passato al costruttore jQuery per ottenere l'accesso all'API jQuery.

Ad esempio in each callback (nota: ognuno è una funzione iteratore).

$(".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
});

Stringhe HTML come selettori

jQuery accetta un'ampia varietà di parametri come "selettori" e uno di questi è una stringa HTML. Passare una stringa HTML a jQuery causerà la sottostante struttura ad array dell'oggetto jQuery per contenere l'HTML costruito risultante.

jQuery usa regex per determinare se la stringa passata al costruttore è una stringa HTML e anche che deve iniziare con < . Quella regex è definita come rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( spiegazione a regex101.com ).

L'uso più comune di una stringa HTML come selettore è quando set di elementi DOM devono essere creati solo in codice, spesso questo è usato dalle librerie per cose come i popout modali.

Ad esempio, una funzione che ha restituito un tag di ancoraggio avvolto in un div come modello

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

Restituirebbe un oggetto jQuery

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

se chiamato come template("google.com","Google") .