762 Shares 7154 views

Perché abbiamo bisogno e come registrare JQuery selettore?

Moderna web designer dovrebbe non solo padroneggiare le basi del codice HTML, CSS e JavaScript, ma anche essere in grado di lavorare nella libreria JQuery, che si concentra sulla interazione di JavaScript con HTML-documenti. Questo permette un rapido accesso a qualsiasi elemento DOM (application programming interface che permette di accedere a contenuti HTML-files) e manipolarle. Le principali unità strutturali della biblioteca sono la squadra. Al fine di applicare una o l'altra squadra, è necessario un JQuery-selettore.

selettori formula nella libreria jQuery

I selettori in jQuery basati sull'uso di CSS. Essi sono tenuti a selezionare gli elementi file HTML, di usarle per causare questi o altri metodi di essi (la squadra) manipolazione. La ricerca viene effettuata tramite la funzione di selezione $ (). Ad esempio, $ ( 'div').

I selettori possono essere classificati a seconda di come la selezione di elementi:

  • di base;
  • per attributo;
  • la gerarchia;
  • il contenuto;
  • sulla situazione;
  • scelta dei campi del modulo;
  • altri.

selettori a chiave

Nel 90% dei casi quando si utilizza questa libreria è utilizzata JQuery selettore appartenente al gruppo principale. Tutti loro sono abbastanza semplici e chiare. Consideriamo ciascuno di essi:

  • * – seleziona tutti gli elementi della pagina, tra cui la testa, il corpo, ecc;.
  • p / div / barra laterale / … – seleziona tutti gli elementi relativi al tag prestabilito (cioè p.div, barra laterale, ecc …);
  • .myClass / p.myClass – seleziona gli elementi con il nome della classe specificato;
  • # MyID / p # myID -. Consente di selezionare qualsiasi oggetto con il dato ID.

Ecco un esempio. Diciamo che abbiamo bisogno di selezionare tutti gli elementi della pagina con l'ingresso di classe par saranno i seguenti: (. Par) $. Se necessario solo elementi p di questa classe, quindi scrivere: $ (p.par).

selettori di attributo

È possibile utilizzare il selettore principale JQuery, se abbiamo bisogno di selezionare un elemento appartenente a qualsiasi classe avere ID o selezionare tutti gli elementi della pagina. Tuttavia, ci sono casi in cui un elemento non ha classe o ID. E 'per questo e ci sono selezioni di attributo. Essi consentono di effettuare una selezione su alcuni attributi degli elementi HTML, come ad esempio href o di src. Questo attributo è scritto in parentesi quadre [].

L'esempio più semplice: $ ([fonte]) – seleziona tutti gli elementi che hanno l'attributo src. E 'possibile restringere il campione specificando certo valore di attributo: $ ([src = 'http: // sito / article / 132222 / valore']).

È possibile utilizzare alcuni selettori JQuery se si vuole restringere il campo di scelta. Ad esempio, $ (p [color = blue] [size = 12]) – sono selezionati solo gli elementi p, che hanno un colore blu e taglia 12.

I selettori contenuti

In tal caso, se non è possibile selezionare gli elementi in base agli attributi o selettori di base, è necessario fare riferimento al loro contenuto. In totale ci sono 4 selettore di questo tipo:

  • : Contiene – seleziona le voci che contengono il testo specificato;
  • : Ha – seleziona gli elementi che contengono altri elementi caratteristici della linea;
  • : Parent – seleziona gli elementi che contengono tutte le altre;
  • : Empty – seleziona gli elementi che non contengono alcun altro.

Ecco un esempio. Per selezionare tutti gli elementi div, che contiene il testo del Ciao, è necessario scrivere $ (div: contiene ( 'Ciao')).

gerarchia selettori

C'è un altro modo per selezionare gli elementi in jQuery, vale a dire – secondo la loro gerarchia (cioè il rapporto tra l'altro sulla pagina HTML). Molti di loro, in modo da presentare due dei più popolari, "bambino" e "discendente".

Nel primo caso sono selezionati gli elementi, che sono diretti discendenti (figli) di un dato elemento (antenato). Ad esempio, per selezionare gli elementi della lista in classe luce che è un elenco bambino nav, allora avete bisogno di scrivere: $ (ul # nav> li.light).

Il secondo caso – un più generale. Ci possono essere selezionati e discendenti indiretti dell'elemento. Ad esempio, per selezionare i collegamenti all'interno della lista nav prescrivono: $ (ul # nav a).

Così, in JQuery elementi possono essere selezionati in vari modi utilizzando i parametri ad esempio una classe, ID, gli attributi, il contenuto o la gerarchia di elementi HTML-documento.