Nwlapcug.com


Come sostituire HTML in Div utilizzando jQuery

Una libera libreria JavaScript open source, jQuery viene utilizzata da un gran numero di siti Web per aggiungere interattività dell'utente e migliorare l'esperienza del visitatore. jQuery rende più semplice per creare script di complesse interazioni AJAX, animazioni e componenti con una quantità minima di codice. È possibile fare riferimento agli elementi nella pagina tramite il loro id HTML, consentendo di fare riferimento all'elemento e modificare l'origine HTML o proprietà. Utilizzare gli eventi per rispondere alle azioni dell'utente, ad esempio un pulsante ed eseguire il codice predefinito per fornire una risposta all'azione, ad esempio sostituendo il codice HTML in un div.

Istruzioni

1

Aprire un'applicazione di sviluppo Web o un editor di testo e creare una nuova pagina HTML.

2

Aggiungere la libreria jQuery alla pagina aggiungendo il codice rilevante tra il codice HTML "< head >" tag "< / head >". Per esempio:

< script type = "text/javascript" attributo per abbinare la posizione e la versione della libreria jQuery scaricata dal sito Web di jQuery.

3

Digitare il codice seguente per aggiungere un div HTML alla pagina con un testo di esempio. Questo dovrebbe essere aggiunto tra il codice HTML "< body >" tag "< / body >".

< div id = "test" >

&lt;p>This is an example&lt;/p>

< / div >

4

Aggiungere un pulsante HTML alla pagina utilizzando il codice riportato di seguito, che deve essere aggiunto sotto l'esempio div. Il pulsante non ha alcuna azione definito attualmente, come si aggiungerà il gestore click tramite jQuery.

< input type = nome "pulsante" = "myButton" id = "myButton" valore = "Click Me" / >

5

Aggiungere il seguente codice tra il codice HTML "< head >" tag "< / head >" sotto il tag "< script >" utilizzato per includere la libreria jQuery.

< script type = "text/javascript" >

Web {

$("#myButton").click(function() {

$('#test').html("&lt;p>This is new content from JQuery&lt;/p>");

});

});

< / script >

Questo codice crea una funzione che verrà eseguita automaticamente una volta caricata la pagina. È quindi possibile definire un gestore click per il pulsante con l'id HTML "myButton", che esegue una funzione quando viene fatto clic. La funzione sostituisce l'HTML contenuti in div con id "prova".

6

Caricare la pagina al server Web e quindi aprire la pagina in un browser. Fare clic sul pulsante e vedrete il contenuto del div cambiamento istantaneamente durante l'esecuzione del gestore di fare clic su.