Manipolazione DOM con jQuery

albero DOMIl albero DOM è l'organizzazione gerarchica del contenuto del nostro documento HTMLQuesto è molto utile quando si identificano i diversi elementi che sono contenuti in detto documento, poiché con identificatori univoci possiamo assegnare nomi diversi a strutture che, pur avendo etichette simili, hanno un obiettivo diverso.
Il problema in passato era che non era possibile camminare facilmente attraverso il albero DOM in tempo reale, poiché routine e funzioni ingombranti dovevano essere create in Javascript, tuttavia tutto questo è cambiato con la comparsa di jQuery. Questo quadro ha contribuito a fornire un approccio all'uso di Javascript per i non esperti ha fatto salire di nuovo la sua popolarità.
Una delle cose più interessanti che può sembrare molto complicata da fare è selezionare il figli di un elementoPoiché parliamo di una struttura gerarchica, possiamo parlare di una famiglia, dove il padre è l'elemento più alto ei suoi figli sono elementi che sono governati sotto il suo manto o protezione.
Diciamo ad esempio di avere una lista o un elemento non ordinato , è logico pensare che i loro figli siano gli elementi che può contenere, se vogliamo selezionare un elemento Un elenco particolare può sembrare un compito molto complesso, ma con jQuery possiamo realizzarlo in un modo molto semplice e pulito.
metodiPer fare ciò, dobbiamo solo dare un identificatore univoco al nostro elemento genitore e quindi chiamare il metodo sul suo selettore figli (), con questo otterremo la posizione su cui possiamo andare con il metodo ogni () ciascuno dei suoi figli.
Vediamo nel codice seguente un piccolo esempio di cosa stiamo parlando:

 Manipolazione DOM con JQuery

figlio 1
figlio 2
figlio 3

Provalo 

Prima di tutto iniziamo includendo jQuery a partire dal CDN ufficiale, con questo non abbiamo la necessità di memorizzare il file con il codice sorgente sul nostro computer, quindi con un browser e connessione a Internet possiamo usare questo esempio.
Quindi creiamo un piccolo script in cui indichiamo che quando fai clic sull'elemento con l'id Cominciare il codice all'interno viene eseguito.
Il codice da eseguire esprime semplicemente che l'elemento con l'id deve essere cercato papà e a questo selettore applichiamo il metodo figli () per individuare i suoi figli e infine con il metodo ogni () Li esaminiamo ciascuno, nel caso del codice ce ne sono tre che ci permetteranno di fare il viaggio e questo dovrebbe mostrarci il testo che ognuno contiene. Vediamo come funziona il codice sopra nel nostro browser:

Dopo aver cliccato sul pulsante Provalo possiamo vedere il primo Mettere in guardia:

INGRANDIRE

Se continuiamo a chiudere gli avvisi vedremo tutti gli elementi figlio contenuti nella struttura gerarchica:

INGRANDIRE

Come abbiamo potuto vedere, la gestione degli elementi nella struttura della nostra pagina non è affatto complicata, questo è solo un piccolo esempio che ci lascia a bocca aperta di ciò che continueremo a vedere in questo tutorial.
Sebbene trovare elementi figlio sia abbastanza utile, esiste un metodo che ci permette di fare una ricerca più diretta attraverso il andare, onde Lezioni. Ci riferiamo al metodo Trovare (), questo metodo troverà tutte le corrispondenze degli elementi figlio del selettore che lo richiama.
Con questo possiamo avere un grande e chiama a Trovare () su di esso per individuare le classi o id in particolare, con cui arriviamo al punto successivo.
Stili di iniezioneUna volta trovato l'articolo desiderato nel SOLE, molte volte non vogliamo stampare il suo contenuto se non lo evidenziamo in qualche modo, un modo interessante è aggiungere uno stile a detto elemento, questo ci permetterà di manipolare il CSS della nostra pagina indirettamente e di essere in grado di evidenziare elementi importanti in essa e quindi possiamo vedere qualcosa di più dinamico nel nostro documento HTML.
Vediamo nel codice seguente come implementeremo l'uso del metodo Trovare () e poi il iniezione di stile sugli elementi trovati, in questo modo possiamo avvicinarci a qualcosa che possiamo dare di utile nella vita reale:

 Manipolazione DOM con JQuery

figlio 1
figlio 2
figlio 3

Provalo 

In questo codice se guardiamo abbiamo qualcosa di molto simile al trucco precedente, quello che abbiamo cambiato è che in primo luogo il contenuto dell'etichetta qui invece di attraversare i figli di un elemento, usiamo il metodo Trovare () per individuare un elemento con la classe evidenziare e a quell'elemento con il metodo css () Inietteremo degli stili al suo interno, in questo caso lo imposteremo come colore di sfondo rosso.
Vediamo come appare nel nostro browser dopo aver fatto clic sul pulsante Provalo:

Così come siamo stati in grado di localizzare un figlio di un elemento, possiamo ottenere l'effetto nel senso opposto della gerarchia, cioè da un figlio, possiamo localizzare il padre. Questo è molto utile nelle liste lunghe che vengono generate dinamicamente, poiché in questo modo possiamo evidenziare o utilizzare i genitori in base alle nostre esigenze.
Metodo dei genitori ()Per questo abbiamo il metodo genitori () che in modo simile a figli () individua il genitore del selettore richiamato. Se aggiungiamo il metodo each() a questo, porteremo tutta l'ereditarietà dell'elemento, ad esempio se è a porteremo l'elemento e se andiamo più in alto nella gerarchia fino all'elemento e così via fino a raggiungere l'elemento poiché per gerarchia sono tutti genitori dal modo in cui sono contenuti.
Vediamo nel codice seguente come possiamo creare uno script con jQuery che ci consente di raggiungere questo obiettivo di mostrare a tutti i genitori del nostro elemento prescelto:

 Manipolazione DOM con JQuery

figlio 1
figlio 2
figlio 3

Provalo 

La struttura è molto simile agli esempi precedenti, tuttavia qui facciamo una modifica, questa volta usiamo la classe evidenziare come selettore e applichiamo il metodo genitori () e poi con un each() possiamo passare attraverso la gerarchia dall'interno verso l'esterno.
Vediamo come appare il codice sopra quando lo eseguiamo nel nostro browser:

INGRANDIRE

Come l'esempio precedente finché continuiamo a chiudere il Avvisi vedremo tutti i genitori dell'elemento fino ad arrivare a HTML.
Il trucco precedente ci aiuta a stabilire l'albero genealogico di un elemento, forse ci aiuterà a fare il debug del nostro HTML, ma cosa succede se vogliamo ottenere un genitore specifico, ad esempio se abbiamo più liste ma vogliamo che venga evidenziato il genitore di uno in particolare.
Non dobbiamo preoccuparci, per questo caso abbiamo il metodo genitoriFino a (), con questo possiamo specificare un punto di arrivo e possiamo fare un Iniezione HTML Per evidenziare l'intero blocco, vediamo il seguente codice in cui abbiamo applicato questa conoscenza:

 Manipolazione DOM con JQuery

figlio 1
figlio 2
figlio 3

Provalo 

Se notiamo che questo codice è una leggera variazione del precedente, il cambiamento principale avviene nella chiamata al metodo che abbiamo appena spiegato genitoriFino a () a cui siamo passati div, che è il punto in cui si fermerà la ricerca degli elementi padre del selettore che stiamo interessando.
Per dimostrare che tutto funziona, abbiamo iniettato un po' HTML Per colorare la sezione contrassegnata in rosso, vediamo come appare nel nostro browser quando clicchiamo su Provalo:

Vediamo quindi che solo la sezione con il div è quella colorata in rosso, dimostrando così che abbiamo interrotto la ricerca del genitore nell'elemento specifico, pur avendo un genitore diretto come l'elemento che ci mostra il potere della ricerca attraverso albero DOM.
Con questo abbiamo terminato il nostro tutorial, è solo una piccola dimostrazione di tutta la potenza di jQuery manipolare il SOLE dal nostro HTML, l'importante è che dobbiamo esercitarci molto e leggere molto bene la documentazione poiché con essa potremo ottenere ulteriori conoscenze e risorse per poter aumentare il nostro livello di sviluppo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo