JQuery buona scelta per l'uso [a] | Eric @ EricBess WebHome

JQuery selettore abile nell'uso di [a]

jQuery è un potente motore di scelta, fornendo una completa selezione di grammatica, che ci permette di scegliere quasi tutti gli elementi della composizione. jQuery per la scelta della grammatica è basata principalmente su CSS3 e XPath, e la CSS3 XPath capire, più l'uso di più significativo quando jQuery a portata di mano. Dei CSS e XPath, si prega di fare riferimento ai seguenti link:

Vale la pena di notare che, CSS3 non era presente tutti i browser di sostegno, in modo da utilizzare raramente. Tuttavia, possiamo ancora usare il CSS3 jQuery elemento di scelta, perché jQuery ha il suo motore di scelte personalizzate, e realizzare il sostegno CSS3.

JQuery selettore vorrebbe sapere ulteriori informazioni, visitare il funzionario jQuery documentazione relativa al selettore. Qui di seguito, in originale a documenti ufficiali sulla base di una semplice traduzione e descrizione.

1. Selettore CSS (CSS selettori)

jQuery pieno supporto per i CSS 1-3, e può (scegliere) a partecipare alla manifestazione di auto-definizione dei CSS-simili (e XPath).

1,1 jQuery sostegno del selettore CSS sintassi

* Ogni elemento
E E per tutti i tipi di elemento (E di fatto può essere un qualsiasi elemento)
E: ennesima-bambino (n) E per un tipo di elemento, è suo padre, il primo elemento della sotto-elemento n
E: primo figlio un E tipo di elemento, è il suo elemento di padre il primo sotto-elemento (equivalente a E: ennesima-bambino (0))
E: ultimo figlio un E tipo di elemento, è suo padre, l'ultimo elemento di un sotto-elemento
E: solo figlio di un tipo di elemento E, è l'unico elemento di suo padre elemento
E: E vuoto di un tipo di interfaccia utente (UI) elemento, non sotto-elemento (tra cui elemento di testo)
E: E attivata per un tipo di interfaccia utente (UI) elemento, è impostato su divieto (disattivato)
E: E disabili, per un tipo di interfaccia utente (UI) elemento, che è stato creato per consentire (attivato)
E: controllate per un tipo di E l'interfaccia utente (UI) elemento, è selezionato (selezionato) Stato (per la radio pulsante e la casella)
E: E selezionati per un tipo di interfaccia utente (UI) elemento, è stata una scelta (selezionata) status (entro la selezione, di scegliere uno o più dei elemento). Nota: selezionate le proprietà in CSS non è nel quadro, ma di fornire sostegno interno jQuery
E.myclass E per un tipo di elemento, la sua classe di categoria è "myclass"
E # myid E per un tipo di elemento, che è l'ID di "myid"
E: non (s) di un tipo di elemento E, l'elemento e il risultato non corrisponde (non incluso) selettore s (per un filtro)
F EF uno per il tipo di elemento, è il tipo di elemento per i discendenti di E 'elemento (nota la discendenti elemento)
E> F F per un tipo di elemento, è il tipo di elemento per l'indirizzo di elemento (nota la sotto-elemento)
E F F per un tipo di elemento, è tenere il passo con l'indirizzo di tipo per l'elemento dietro il fratello elemento (Nota F E è il fratello nodi, ed è un orso di seguire più tardi)
E ~ F F per un tipo di elemento, è il tipo di elemento E dietro a un elemento fratello (Nota F E è il fratello nodi, e la posizione nella parte posteriore di E)

E, F, G E per un tipo di elemento, un tipo F per l'elemento, un tipo di elemento G (usato per selezionare più di un elemento)

1,2 jQuery sostegno, ma (con le norme CSS) hanno diverse opzioni per la grammatica

Dei diversi attributi è la necessità di aggiungere ex simbolo "@"

E [@ foo] E per un tipo di elemento, ha attributi "foo"
E [@ foo = bar] E per un tipo di elemento, ha attributi "foo = bar"
E [^ @ foo = bar] E per un tipo di elemento, ha attributi "foo", e la sua proprietà è valori "bar" l'inizio del
E [@ $ foo = bar] E per un tipo di elemento, ha attributi "foo", e la sua proprietà è valori "bar" alla fine del
E [*= @ foo bar] E per un tipo di elemento, ha attributi "foo", e la sua proprietà di valori sono "bar"
E [@ foo = bar] [@ baz = bop] E per un tipo di elemento, ha attributi "foo = bar" e gli attributi "baz = bop"

Nota: il di sopra del "bar" e "bop" sono stringhe.

1,3 jQuery non supportano il selettore sintassi (abbreviato)

Poiché nessun effetto pratico, in modo da non entrare nei dettagli qui, vorrei conoscere i dettagli possono fare riferimento al documento ufficiale di aiuto.

Ancoraggio e 1,4 Contex

Contex può essere impostato per ancorare (targeting) scelta, questa è jQuery con le norme di un CSS diverso. Gli utenti possono utilizzare la sintassi: $ (expr, contesto) per impostare il contesto di root. L'impostazione predefinita contesto di root è l'intero documento.

2. Selettore XPath (XPath selettori)

XPath jQuer è anche il supporto per la scelta di uno di grammatica. jQuery supporto di base per la sintassi XPath. Riportato di seguito alcuni degli esempi di illustrazione.

2,1 posizionamento percorso (Sede Percorsi)

Percorso assoluto, rispetto a tutto il documento HTML

  $ ( "/ Html / body / / p") $ ( "corpo / / p") $ ( "p / .. / div")

Percorso relativo, istituito in relazione al contesto nodo "presente"

  $ ( "P / *", questo) $ ( "/ p / /", questo)

2,2 sostenere l'asse selettore

"/ /": Discendenti di elementi (div di tutti i tipi per i figli e nipoti p elementi)

  $ ( "/ Div / / p") $("// div / / p ")

"/": Sub-elementi (p div per tutti i tipi di sotto-elementi)

  $("// Div / p ")

"~": Fratello elementi (div di tutti i tipi di formare i fratelli elementi)

  $("// Divisione ~ forma ")

""..": Padre di elementi (elemento di div il padre del p-tipo elementi)

  $("// Div / .. / p ")

2,3 sostegno predicato grammatica (predicati)

[@ Foo] ha attributi "foo"

  Ingresso $("// [@ foo] ")

[@ Foo = 'test'] attributi di "foo = 'test'"

  Un $("// [@ foo = 'tsxt'] ")

[NodeList] i loro figli e nipoti elementi di corrispondenza NodeList (utilizzati per il filtro)

  $("// Div [p] ") $("// div [p / a]")

2,4 jQuery sostegno, ma (con XPath norme) è diversa dalla grammatica predicato (predicati)

[ultimo ()] o [posizione () = ultimo ()] diventa: ultimo (la scelta del risultato finale di un elemento)

  $ ( "P: ultimo")

[0] o [posizione () = 0] diventa: eq (0) o: prima (scegliere un risultato del primo elemento)

  $ ( "P: in primo luogo") $ ( "p: eq (0)")

[posizione () <5] diventa: lt (5) (Indice scegliere risultato superiore a 5 elementi)

  $ ( "P: lt (5)")

[posizione ()> 2] diventa: GT (2) (scegliere risultato indice di meno di 2 elementi)

  $ ( "P: GT (2)")

Nota: "diventa" si trova di fronte al predicati XPath grammatica, è equivalente a la parte posteriore del jQuery grammatica.

3. JQuery selettore personalizzato (Custom selettori)

jQuery personalizzato con alcune opzioni per la grammatica, sintassi Anche se queste non sono in CSS e XPath entro le norme, ma sono molto conveniente, dove ha vinto jQuery verrà.

3,1 selettore personalizzato (Custom selettori)

: Anche i risultati sul proprio indice, anche per-numerati (anche pochi) elementi
: Strano risultato del suo indice per il dispari (dispari) elementi
: Eq (N) e: ennesima (N) opzione a Indice risultati per gli elementi di N
: Gt (N) scegliere risultato indice maggiore di elementi N
: Lt (N) seleziona indice di meno di N risultato degli elementi
: Prima scelta sui risultati del primo elemento (equivalente a eq (0) o l'ennesima (0))
: L'ultima scelta di un risultato finale elemento
: Madre di una selezione elementi, deve essere sotto-elementi (tra cui nodo testo) (con: svuotare il contrario)
: Contiene ( 'test') scelte risultato contiene gli elementi di testo
: Visibile selezionare tutto quello che (visibile) degli elementi (proprietà dello schermo, equivalente al valore del visibile, blocco, in linea o la visibilità del valore della proprietà è pari al visibile, non nascosta tra cui i tipi di elementi (sul tipo di nascosto, come ad esempio <input type = "nascosto"… >))
: Nascosto selezionare tutti i nascosto (visibile) degli elementi (visualizzazione valore di attributo è uguale a nessuno, o la visibilità del valore della proprietà è pari a nascosto, non compresi nascosto tipi di elementi (sul tipo di nascosto, come ad esempio <input type = "hidden" …>))

Esempi:

  $ ( "P: prima"). Css ( "fontWeight", "grassetto"); $ ( "div: nascosto"). Visualizza (); $ ( "/ div: contiene ( 'test')", questo). Nascondi ();

3.2-forma scelta (Forma selettori)

: Ingresso selezionare tutte le forma elementi (ingresso, selezionare, textarea, button)
: Testo selezionare tutto il testo di dominio (tipo = "testo").
: Password selezionare tutte le password di dominio (tipo = "password").
: Radio selezionare tutti i pulsanti di opzione (tipo = "radio").
: Selezionare tutti i checkbox casella (tipo = "casella di controllo").
: Tasto di invio per selezionare tutte (tipo = "invia").
: Immagine selezionare tutte le immagini di dominio (tipo = "immagine").
: Pulsante per reimpostare tutte le scelte (tipo = "reset").
: Pulsante per selezionare tutti i pulsante (tipo = "tasto").
: Selezionare tutti i file <input type = "file">.

: Nascosto è disponibile anche nelle sopra 3,1 vengono introdotte.

Nella forma proposta l'uso di opzioni per fornire un contesto di root, esempi:

  $ ( '# MyForm: ingresso')

  $ ( 'Ingresso: radio', MyForm)

Di sopra della dichiarazione finale e il suo partito selezionerà tutte le "MyForm" in forma di tutti i pulsanti di opzione, l'equivalente di [@ type = radio] (cioè, $ ( "[type = radio], MyForm")), ma con tavolo Single-selettore essere leggermente più veloce, specialmente su larga scala di forma.

Altre opzioni per 3,3

jQuery selettore che consente di terze parti plug-in per espandere:

Riferimenti:

http://docs.jquery.com/DOM/Traversing/Selectors