Accentsconagua

jQuery succintamente jQuery Selezione

Codice
Share

I filtri jQuery personalizzati possono selezionare elementi solo se usati

Non è necessario fornire un elemento reale in combinazione con un filtro, come $ ( 'Div: nascosto'). È possibile passare semplicemente il filtro da solo, ovunque sia prevista un'espressione selettiva.

Qualche esempio:

 // Seleziona tutti gli elementi nascosti $ (': hidden'); // Seleziona tutti gli elementi div, quindi seleziona solo gli elementi pari $ ('div'). Filter (': even');

Groking the: Hidden e: Visible Filter

I filtri selettori jQuery personalizzati :nascosto e :visibile non prendere in considerazione la proprietà di visibilità CSS come ci si potrebbe aspettare. Il modo in cui jQuery determina se un elemento è nascosto o visibile è se l'elemento consuma qualsiasi spazio nel documento. Per essere precisi, un elemento è visibile se il suo browser è segnalato offsetWidth o offsetHeight è maggiore di 0. In questo modo, un elemento che potrebbe avere un CSS display valore di bloccare contenuto in un elemento con a display valore di nessuna riporterebbe accuratamente che non è visibile.

Esamina attentamente il codice e assicurati di aver capito perché il valore restituito è vero anche se il

essere selezionato ha uno stile in linea di blocco di visualizzazione.

Utilizzo del metodo Is () per restituire un valore booleano

Spesso è necessario determinare se il set selezionato di elementi contiene, in effetti, un elemento specifico. Usando il è() metodo, possiamo controllare il set corrente con un'espressione / filtro. L'assegno tornerà vero se il set contiene almeno un elemento che viene selezionato dall'espressione / filtro specificato. Se non contiene l'elemento, a falso il valore viene restituito. Esamina il seguente codice:

    
jQuery
 
jQuery

Dovrebbe essere evidente che il secondo mettere in guardia() restituirà un valore di false perché il nostro set di wrapper non contiene un

quello aveva un id valore attributo di i2. Il è() metodo è abbastanza utile per determinare se il set di wrapper contiene un elemento specifico.

Gli appunti: A partire da jQuery 1.3, il è() il metodo supporta tutte le espressioni. Precedentemente, espressioni complesse come quelle contenenti selettori di gerarchia (come ad esempio +, ~, e >) sempre restituito vero.

Il filtro è utilizzato da altre funzioni jQuery interne. Pertanto, tutte le regole che si applicano qui, si applicano anche qui.

Alcuni sviluppatori usano è ('. Classe) per determinare se un elemento ha una classe specifica. Non dimenticare che jQuery ha già un metodo per farlo chiamato hasClass ( 'class'), che può essere utilizzato su elementi che contengono più di un valore di classe. Ma la verità è detta, hasClass () è solo un involucro conveniente per il è() metodo.

Puoi passare a jQuery più di un'espressione di selezione

Puoi fornire al primo parametro della funzione jQuery diverse espressioni separate da una virgola: $ ('espressione, espressione, espressione'). In altre parole, non sei limitato a selezionare elementi usando solo una singola espressione. Ad esempio, nell'esempio seguente, sto passando alla funzione jQuery tre espressioni separate da una virgola.

    
jQuery 
 
è il 
 
     
  • migliore!
    •

Ciascuna di queste espressioni seleziona gli elementi DOM che sono tutti aggiunti al set di wrapper. Possiamo quindi operare su questi elementi usando i metodi jQuery. Tieni presente che tutti gli elementi selezionati verranno posizionati nello stesso set di wrapper. Un modo inefficiente per farlo sarebbe chiamare la funzione jQuery tre volte, una volta per ogni espressione.

Controllo del set di wrapper. Lunghezza per determinare la selezione

È possibile determinare se l'espressione ha selezionato qualcosa controllando se il set di wrapper ha una lunghezza. È possibile farlo utilizzando la proprietà dell'array lunghezza. Se la lunghezza la proprietà non restituisce 0, quindi sai che almeno un elemento corrisponde all'espressione che hai passato alla funzione jQuery. Ad esempio, nel codice sottostante controlliamo la pagina per un elemento con un id di "notHere". Indovina un po? Non è lì!

Gli appunti: Se non è ovvio, la proprietà length può anche riportare il numero di elementi nel set wrapper - detto in un altro modo, quanti elementi sono stati selezionati dall'espressione passata alla funzione jQuery.

Creazione di filtri personalizzati per la selezione di elementi

Le funzionalità del motore di selezione jQuery possono essere estese creando i tuoi filtri personalizzati. In teoria, tutto quello che stai facendo qui sta costruendo su selettori personalizzati che fanno già parte di jQuery. Ad esempio, diciamo che vorremmo selezionare tutti gli elementi su una pagina Web che sono posizionati in modo assoluto. Dal momento che jQuery non ha già un'abitudine : positionAbsolute filtro, possiamo creare il nostro.

    
assoluto
 assoluto 
statico
 
assoluto
 
statico
 assoluto

La cosa più importante da comprendere qui è che non sei limitato ai selettori predefiniti forniti da jQuery. Puoi crearne uno tuo. Tuttavia, prima di passare il tempo a creare la tua versione di un selettore, potresti semplicemente provare il filtro() metodo con una funzione di filtraggio specificata. Ad esempio, avrei potuto evitare di scrivere il : positionAbsolute selettore semplicemente filtrando il

elementi nel mio precedente esempio con una funzione che passo al filtro() metodo.

 // Rimuovi 
 elementi dal wrapper // set che non sono posizionati in modo assoluto $ ('div'). filter (function () return $ (this) .css ('position') === 'absolute';); // o // Rimuovi tutti gli elementi dal wrapper // set che non sono posizionati in modo assoluto $ ('*'). filter (function () return $ (this) .css ('position') === 'absolute' ;);

Gli appunti: Per ulteriori informazioni sulla creazione di selettori personali, suggerisco quanto segue: http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm

Differenze tra il filtraggio per ordine numerico e relazioni DOM

jQuery fornisce filtri per filtrare un wrapper impostato dal contesto numerico di un elemento all'interno del set.

Questi filtri sono:

  • :primo
  • :scorso
  • :anche
  • :dispari
  • : Eq (index)
  • : Gt (index)
  • : Lt (index)

Gli appunti: I filtri che filtrano lo stesso wrapper lo fanno filtrando gli elementi nell'insieme a un punto di partenza di 0, o l'indice di 0. Ad esempio : Eq (0) e :primo accedi al primo elemento nel set - $ ( 'Div: eq (0)') - che è a un indice 0. Questo è in contrasto con il : Nth-child filtro con un indice. Significato, per esempio, : Nth-child (1) restituirà il primo elemento figlio, ma sta tentando di usarlo : Nth-child (0) non funzionerà. utilizzando : Nth-child (0) selezionerà sempre nulla.

utilizzando :primo selezionerà il primo elemento nel set mentre :scorso selezionerà l'ultimo elemento nel set. Ricorda che filtrano il set in base alla relazione (la gerarchia numerica a partire da 0) all'interno dell'insieme, ma non le relazioni degli elementi nel contesto del DOM. Data questa conoscenza, dovrebbe essere ovvio perché i filtri :primo, :scorso, e : Eq (index) restituirà sempre un singolo elemento.

Se non è ovvio, permettimi di spiegare ulteriormente. Il motivo :primo può solo restituire un singolo elemento perché ci può essere solo un elemento in un set che viene considerato per primo quando esiste un solo set. Questo dovrebbe essere abbastanza logico. Esamina il codice qui sotto per vedere questo concetto in azione.

    
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
 
     
  • 6
    •  
  • 7
    •  
  • 8
    •  
  • 9
    •  
  • 10
    •

Con una chiara comprensione della manipolazione del set stesso, possiamo aumentare la nostra comprensione della selezione di elementi utilizzando i filtri che selezionano elementi che hanno relazioni univoche con altri elementi all'interno del DOM effettivo. jQuery fornisce diversi selettori per fare ciò. Alcuni di questi selettori sono personalizzati, mentre alcuni sono noti espressioni CSS per la selezione di elementi DOM.

  • discendente degli antenati
  • genitore> figlio
  • prev + successivo
  • prev ~ fratelli
  • : Nth-child (selettore)
  • :Primogenito
  • :ultimo bambino
  • :figlio unico
  • :vuoto
  • : Ha (selettore)
  • :genitore

L'utilizzo di questi filtri selettori selezionerà gli elementi in base alla loro relazione all'interno del DOM come pertinente ad altri elementi nel DOM. Per dimostrare questo concetto, diamo un'occhiata ad un codice.

    
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
 
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •

Se sei sorpreso dal fatto che $ ( 'Li: nth-child (dispari)'). Text () restituisce il valore 135135, non sei ancora filtri di relazione groking. La dichiarazione, $ ( 'Li: nth-child (dispari)') detto verbalmente sarebbe "trova tutto

  • elementi nella pagina Web che sono bambini e quindi li filtrano in base a bambini strani. "Bene, succede solo che ci sono due strutture nella pagina che hanno un gruppo di fratelli costituito da
  • S. Il mio punto è questo: il wrapper set è composto da elementi basati su un filtro che tiene conto della relazione di un elemento con altri elementi nel DOM. Queste relazioni possono essere trovate in più posizioni.

    Il concetto da portare via è che non tutti i filtri sono creati allo stesso modo. Assicurati di capire quali filtri si basano sulle relazioni DOM, ad es. :figlio unico-e quali filtrano in base alla posizione degli elementi, ad es. : Eq ()-nel set avvolto.

    Selezione di elementi per ID quando il valore contiene metacaratteri

    I selettori jQuery usano una serie di meta-caratteri (ad es. # ~ [] => ) che quando usato come parte letterale di un nome (ad es. id = "# foo [bar]") dovrebbe essere sfuggito. È possibile sfuggire ai personaggi posizionando due backslash prima del personaggio. Esamina il codice qui sotto per vedere come utilizzare due barre retroverse nell'espressione di selezione ci permette di selezionare un elemento con un valore di attributo id di #foo [bar].

        
    jQuery

    Ecco l'elenco completo dei caratteri che devono essere salvati quando usati come parte letterale di un nome.

    • #
    • ;
    • &
    • ,
    • .
    • +
    • *
    • ~
    • '
    • :
    • "
    • !
    • ^
    • $
    • [
    • ]
    • (
    • )
    • =
    • >
    • |
    • /

    Filtri di selezione impilabili

    È possibile impilare i filtri del selettore, ad es. un [title = "jQuery"] [href ^ = "http: //"]. L'ovvio esempio di ciò è selezionare un elemento che ha attributi specifici con valori di attributo specifici. Ad esempio, il codice jQuery in basso selezionerà solo elementi nella pagina HTML che:

    • Contenere un href attributo con un valore iniziale di "http: //"
    • Avere un titolo attributo con un valore di "jQuery"

    Solo uno è stato selezionato.

        jQuery.com jQuery.com 1 jQuery.com

    Si noti nel codice come abbiamo impilato due filtri per realizzare questa selezione.

    Altri filtri di selezione possono essere impilati oltre ai soli filtri degli attributi. Per esempio:

     // Seleziona l'ultimo 
     contenuto nel // wrapper set che contiene il testo "jQuery" $ ('div: last: contains ("jQuery")') // Ottieni tutte le caselle di controllo che sono sia visibili che selezionate $ (': checkbox: visible: checked ')

    Il concetto da prendere è che i filtri di selezione possono essere impilati e utilizzati in combinazione.

    Gli appunti: Puoi anche nidificare e impilare i filtri, ad es. . $ ( 'P') filtrare ( ': not (: in primo luogo): not (: ultima)')

    Filtri di selezione per annidamento

    I filtri di selezione possono essere annidati. Ciò ti consente di maneggiare i filtri in modo molto conciso e potente. Di seguito, fornisco un esempio di come è possibile nidificare i filtri per eseguire il filtraggio complesso.

        
    javascript
     
    jQuery
     
    javascript
     
    jQuery
     
    javascript
     
    jQuery

    Il concetto da portare via è che i filtri di selezione possono essere annidati.

    Gli appunti: Puoi anche nidificare e impilare i filtri, ad es. . $ ( 'P') filtrare ( ': not (: in primo luogo): not (: ultima)')

    Groking the: nth-child () Filtro

    Il : Nth-child () il filtro ha molti usi. Ad esempio, supponi di voler selezionare solo un terzo

  • elemento contenuto in a
    • ×