Jquery per aspiranti programmatori – A overview

jQuery è una libreria JavaScript veloce, piccola e ricca di funzionalità. Rende molto più semplici le cose come il traversamento e la manipolazione dei documenti HTML, la gestione degli eventi e l’animazione. Tutta la potenza di jQuery è accessibile tramite JavaScript, quindi avere una forte conoscenza di JavaScript è essenziale per comprendere, strutturare e eseguire il debug del codice. Innanzitutto, diamo un’occhiata a un esempio di manipolazione HTML con JavaScript. Per ottenere l’elemento con id = “start” e cambiare il suo html in “Go”, dovremo fare quanto segue:

<code>
var el = document.getElementById(“start”);
el.innerHTML = “Go”;
</code>

Per fare la stessa manipolazione con jQuery, abbiamo bisogno solo di una singola riga di codice:

<code>
$(“#start”).html(“Go”);
</code>

Dove, chi, che cosa: è come un teatro, un luogo dove ci sono attori e cose che subiscono delle modificazioni, che cosa devo fare su quell’ elemento. Imparerai la nuova sintassi nelle prossime lezioni, ma come puoi vedere, il codice è molto più breve e più facile da capire. Un altro grande vantaggio di jQuery è che non devi preoccuparti del supporto del browser, il tuo codice funzionerà esattamente nello stesso modo in tutti i principali browser, incluso Internet Explorer 6! Puoi scaricare una copia della libreria jQuery da http://www.jquery.com oppure, in alternativa, puoi includerla da una rete di distribuzione di contenuti (CDN), come Google o Microsoft. Useremo il CDN dal sito web ufficiale di jQuery. Per iniziare a usare jQuery, dobbiamo prima aggiungerlo alla testa del nostro documento HTML usando il tag script:

<code>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
https://code.jquery.com/jquery-3.1.1.js
</head>
<body>
</body>
</html>
</code>

Query è una libreria JavaScript, quindi ha l’estensione del file .js. È una buona pratica aspettare che il documento HTML sia completamente caricato e pronto prima di utilizzarlo. Per questo usiamo l’evento ready dell’oggetto documento:

<code>
$(document).ready(function() {
// jQuery code goes here
});
</code>

$ È usato per accedere a jQuery. Da qui, il codice accede all’oggetto del documento e definisce una funzione da chiamare quando viene attivato l’evento pronto del documento. Ciò impedisce l’esecuzione di qualsiasi codice jQuery prima del caricamento del documento. Dato che il codice sopra è usato in quasi tutti i casi quando si usa jQuery, c’è una comoda scorciatoia per scriverlo:

<code>
$(function() {
// jQuery code goes here
});
</code>

Questo codice esegue lo stesso compito del codice più lungo sopra. Se la sintassi di jQuery sembra un po ‘confusa, non ti preoccupare, la tratteremo in dettaglio. Ora, avendo la libreria jQuery nella nostra sezione principale e avendo definito l’evento pronto per il documento, possiamo iniziare la nostra prima manipolazione di jQuery! Cambiamo il contenuto dell’elemento div

L’HTML:

<code>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
https://code.jquery.com/jquery-3.1.1.js
</head>
<body>

Start


</body>
</html>
</code>

<code>
$(function() {
$(“#start”).html(“Go!”);
});
</code>

Questo cambia il codice HTML dell’elemento con id = “start” su “Go!”

jQuery è usato per selezionare (interrogare) elementi HTML ed eseguire “azioni” su di essi.
La sintassi di base è: $ (“selettore”). Action ()

– $ accesso jQuery.
– Il (selettore) trova elementi HTML.
– L’azione () viene quindi eseguita sugli elementi.

<code>
$(“p”).hide() // hides all <p> elements
$(“.demo”).hide() // hides all elements with class=”demo”
$(“#demo”).hide() // hides the element with id=”demo”
</code>

riprendiamo il precedente esempio:

<code>
$(“#start”).html(“Go!”);
</code>

Questo seleziona l’elemento con id = “start” e chiama il metodo html () per esso. Il metodo html () viene utilizzato per modificare il contenuto HTML di un elemento. Se hai già usato CSS in precedenza, noterai che jQuery usa la sintassi CSS per selezionare gli elementi. Diamo un’occhiata a tutti i selettori jQuery. Come hai visto nella lezione precedente, i selettori jQuery iniziano con il simbolo del dollaro e le parentesi: $ (). Il selettore di base è il selettore di elementi, che seleziona tutti gli elementi in base al nome dell’elemento.

<code>
$(“div”) // selects all <div> elements
</code>

Poi ci sono i selettori id e class, che selezionano gli elementi in base al loro id e nome della classe:

<code>
$(“#test”) // select the element with the id=”test”
$(“.menu”) //selects all elements with class=”menu”

puoi usare anche la seguente sintassi per i selettori:

$(“div.menu”) // all <div> elements with class=”menu”

$(“p:first”) // the first <p> element

$(“h1, p”) // all <h1> and all <p> elements

$(“div p”) // all <p> elements that are descendants of a <div> element

$(“*”) // all elements of the DOM
</code>

I selettori rendono l’accesso agli elementi HTML DOM facili rispetto al puro JavaScript.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...