jQuery - Manipolazione DOM
JQuery fornisce metodi per manipolare DOM in modo efficiente. Non è necessario scrivere un codice grande per modificare il valore dell'attributo di qualsiasi elemento o per estrarre il codice HTML da un paragrafo o una divisione.
JQuery fornisce metodi come .attr (), .html () e .val () che agiscono come getter, recuperando le informazioni dagli elementi DOM per un uso successivo.
Manipolazione dei contenuti
Il html( ) metodo ottiene il contenuto html (innerHTML) del primo elemento corrispondente.
Ecco la sintassi per il metodo:
selector.html( )Esempio
Di seguito è riportato un esempio che utilizza i metodi .html () e .text (val). Qui .html () recupera il contenuto HTML dall'oggetto e quindi il metodo .text (val) imposta il valore dell'oggetto utilizzando il parametro passato -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
var content = $(this).html();
$("#result").text( content );
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Questo produrrà il seguente risultato:
Sostituzione dell'elemento DOM
Puoi sostituire un elemento DOM completo con gli elementi HTML o DOM specificati. IlreplaceWith( content ) il metodo serve molto bene a questo scopo.
Ecco la sintassi per il metodo:
selector.replaceWith( content )Qui il contenuto è ciò che vuoi avere al posto dell'elemento originale. Potrebbe essere HTML o testo semplice.
Esempio
Di seguito è riportato un esempio che sostituirebbe l'elemento di divisione con "<h1> JQuery is Great </h1>" -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).replaceWith("<h1>JQuery is Great</h1>");
});
});
</script>
<style>
#division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on the square below:</p>
<span id = "result"> </span>
<div id = "division" style = "background-color:blue;">
This is Blue Square!!
</div>
</body>
</html>Questo produrrà il seguente risultato:
Rimozione di elementi DOM
Potrebbe verificarsi una situazione in cui desideri rimuovere uno o più elementi DOM dal documento. JQuery fornisce due metodi per gestire la situazione.
Il empty( ) metodo rimuove tutti i nodi figlio dall'insieme di elementi corrispondenti dove come metodo remove( expr ) rimuove tutti gli elementi corrispondenti dal DOM.
Ecco la sintassi per il metodo:
selector.remove( [ expr ])
or
selector.empty( )È possibile passare il parametro facoltativo expr per filtrare l'insieme di elementi da rimuovere.
Esempio
Di seguito è riportato un esempio in cui gli elementi vengono rimossi non appena vengono selezionati:
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).remove( );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Questo produrrà il seguente risultato:
Inserimento di elementi DOM
Potrebbe esserci una situazione in cui desideri inserire uno o più elementi DOM nel tuo documento esistente. JQuery fornisce vari metodi per inserire elementi in varie posizioni.
Il after( content ) metodo inserisce il contenuto dopo ciascuno degli elementi corrispondenti dove come metodo before( content ) il metodo inserisce il contenuto prima di ciascuno degli elementi corrispondenti.
Ecco la sintassi per il metodo:
selector.after( content )
or
selector.before( content )Qui il contenuto è quello che vuoi inserire. Potrebbe essere HTML o semplice testo.
Esempio
Di seguito è riportato un esempio in cui gli elementi <div> vengono inseriti appena prima dell'elemento cliccato -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("div").click(function () {
$(this).before('<div class="div"></div>' );
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below:</p>
<span id = "result"> </span>
<div class = "div" style = "background-color:blue;"></div>
<div class = "div" style = "background-color:green;"></div>
<div class = "div" style = "background-color:red;"></div>
</body>
</html>Questo produrrà il seguente risultato:
Metodi di manipolazione DOM
La seguente tabella elenca tutti i metodi che puoi usare per manipolare gli elementi DOM -
| Sr.No. | Metodo e descrizione |
|---|---|
| 1 | dopo (contenuto) Inserisci il contenuto dopo ciascuno degli elementi corrispondenti. |
| 2 | append (contenuto) Aggiungi contenuto all'interno di ogni elemento corrispondente. |
| 3 | appendTo (selettore) Aggiungi tutti gli elementi corrispondenti a un altro insieme di elementi specificato. |
| 4 | prima (contenuto) Inserisci il contenuto prima di ciascuno degli elementi corrispondenti. |
| 5 | clone (bool) Clona elementi DOM abbinati e tutti i loro gestori di eventi e seleziona i cloni. |
| 6 | clone () Clona elementi DOM abbinati e seleziona i cloni. |
| 7 | vuoto( ) Rimuovi tutti i nodi figlio dal set di elementi corrispondenti. |
| 8 | html (val) Imposta il contenuto html di ogni elemento corrispondente. |
| 9 | html () Ottieni i contenuti html (innerHTML) del primo elemento corrispondente. |
| 10 | insertAfter (selettore) Inserisce tutti gli elementi corrispondenti dopo un altro insieme di elementi specificato. |
| 11 | insertBefore (selettore) Inserire tutti gli elementi corrispondenti prima di un altro insieme di elementi specificato. |
| 12 | anteponi (contenuto) Anteponi il contenuto all'interno di ogni elemento corrispondente. |
| 13 | prependTo (selettore) Antepone tutti gli elementi corrispondenti a un altro insieme di elementi specificato. |
| 14 | rimuovere (expr) Rimuove tutti gli elementi corrispondenti dal DOM. |
| 15 | replaceAll (selettore) Sostituisce gli elementi corrispondenti dal selettore specificato con gli elementi corrispondenti. |
| 16 | replaceWith (contenuto) Sostituisce tutti gli elementi corrispondenti con gli elementi HTML o DOM specificati. |
| 17 | testo (val) Imposta il contenuto del testo di tutti gli elementi corrispondenti. |
| 18 | testo( ) Ottieni il contenuto di testo combinato di tutti gli elementi corrispondenti. |
| 19 | avvolgere (elem) Avvolgi ogni elemento corrispondente con l'elemento specificato. |
| 20 | avvolgere (html) Racchiudi ogni elemento corrispondente con il contenuto HTML specificato. |
| 21 | wrapAll (elem) Avvolgi tutti gli elementi nel set abbinato in un unico elemento wrapper. |
| 22 | wrapAll (html) Avvolgi tutti gli elementi nel set abbinato in un unico elemento wrapper. |
| 23 | wrapInner (elem) Racchiudi il contenuto figlio interno di ogni elemento corrispondente (inclusi i nodi di testo) con un elemento DOM. |
| 24 | wrapInner (html) Racchiudi il contenuto figlio interno di ogni elemento corrispondente (inclusi i nodi di testo) con una struttura HTML. |