ASP.NET MVC - Selettori

La struttura su cui lavoreremo lato cliente è la albero DOM del documento HTML, questo albero è una struttura gerarchica dove ogni elemento che vediamo sul web è rappresentato dalla sua rispettiva etichetta.
L'importanza di conoscere questa struttura è che ci consentirà di individuare i diversi elementi, con questo possiamo prendere il valore che contengono o includere testo, contenuto da altre pagine, possiamo elaborare un controller della nostra applicazione e generare una vista all'interno di un pagina senza doverla ricaricare, ecc.
Fare riferimento a un elemento
Come accennato in precedenza, il HTML Ha una struttura in cui contiene i suoi elementi, per manipolare questi elementi dobbiamo imparare a creare riferimenti ad essi, con un riferimento possiamo assicurarci che prenderemo l'elemento o gli elementi desiderati e saremo in grado di modificarli.
Il modo più efficaceUno dei modi più popolari ed efficaci è con il selettore ID, come sappiamo le etichette possono avere identificatori univoci per poter differenziare gli elementi di a HTML.
Vediamo nell'immagine seguente un codice dove possiamo prendere grazie a Javascript un elemento usando la sua proprietà id:

Nel codice che abbiamo visto, abbiamo un'etichetta HTML div, questo ha un id, questa proprietà è quella che abbiamo menzionato che ci aiuterà a localizzare e selezionare l'elemento nel SOLE, all'interno di un blocco Javascript grazie all'oggetto documento, Possiamo usare uno dei suoi metodi per ottenere un elemento dall'id e in questo caso posizioniamo lo stesso del div e infine con il metodo innerText, gli assegniamo un nuovo testo.
Come vediamo questo, la pagina è stata arricchita, nonostante sia un esempio abbastanza semplice, è la cosa più elementare che dobbiamo sapere per costruire una solida base.
Migliorare con jQuery
Come sappiamo Javascript a volte puoi peccare di dover scrivere molto codice per fare poche cose, a questo punto entra jQuery confezionare dette funzionalità e codici, permettendoci di risolvere le stesse funzioni con scorciatoie e meno codice, è ancora Javascript ma scritto in modo più semplice.
Nell'esempio seguente vedremo come riscriviamo l'esempio precedente usando jQuery:

Come possiamo vedere abbiamo riassunto il numero di chiamate di metodo usando semplicemente il metodo .text() applicato ad a selettore $ (), a seconda di come chiamiamo il nostro elemento jQuery ci consente di accedere a id, classi, anche per tipo di elementi, loro figli, ecc.
Ad esempio se vogliamo fare lo stesso esempio precedente ma per questo caso l'etichettainvece di avere un ID ha una classe:

Ciao mondo!

Qui vediamo che invece di chiamare il selettore con $ ("# selettore"), lo facciamo con $ (". selector"), il problema è che se abbiamo più di un elemento con la stessa classe, lo influenzeremo.
Con questo finiamo questo tutorial in cui abbiamo approfondito un po' di più il concetto di selettori e come usarli entrambi con Javascript normale come con jQuery diminuendo così la quantità di codice che scriviamo.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo