jQuery获取/设置

Una parte molto importante di jQuery è la possibilità di manipolare il DOM.

jQuery fornisce metodi efficaci per manipolare gli elementi HTML e gli attributi.

In questa sezione, spiegheremo come jQuery recupera e imposta il contenuto degli elementi e i valori degli attributi.

HTML DOM (Document Object Model)

Document Object Model, noto anche comeDOM, è una parte importante che rende il sito web interattivo.

Document Object ModelRappresenta un documento HTML visualizzato in una finestra.

È un'interfaccia che permette a jQuery di manipolare il contenuto, la struttura e lo stile del sito web.

jQuery recupera o imposta il contenuto, la struttura e lo stile.

Con jQuery, possiamo facilmente manipolare gli elementi HTML.

Abbiamo i seguenti metodi jQuery per le operazioni DOM:

• html()

• text()

• val()

La sezione successiva ti mostrerà come utilizzare ciascun metodo.

Metodo jQuery html()

jQuery html()Il metodo recupera o imposta il contenuto dell'elemento selezionato (innerHTML).

Esempio seguente che recupera il contenuto del primo paragrafo quando si clicca sul pulsante:

$("button").click(function(){
　　alert($("p").html()));
});

Esempio seguente che cambia il contenuto di tutti i paragrafi quando si clicca sul pulsante:

$("button").click(function(){
　　$("p").html("Voglio dire: <b>Hello world</b>");
});

Metodo jQuery text()

jQuery text()Il metodo recupera o imposta il contenuto del testo dell'elemento selezionato (e dei suoi discendenti).

Esempio seguente che recupera il contenuto del testo di tutti i paragrafi quando si clicca sul pulsante:

$("button").click(function(){
　　alert($("p").text()));
});

Esempio seguente che cambia il contenuto del testo di tutti i paragrafi quando si clicca sul pulsante:

$("button").click(function(){
　　$("p").text("Voglio dire: Hello world");
});

differenze tra html() e text()

html()etext()Entrambi i metodi html() e text() possono impostare o recuperare il contenuto degli elementi HTML, ma ci sono le seguenti differenze:

html():

• impostare o recuperare il contenuto dell'elemento selezionato (testo + tag HTML)

• quando si utilizza il metodo html()recuperoquando si utilizza il metodo text(), ritornail contenuto del primo elemento selezionato

text():

• impostare o recuperare il contenuto dell'elemento selezionato (solo testo)

• quando si utilizzarecuperoquando si utilizza il metodo text(), ritornatutti gli elementi selezionaticontenuto del testo

Esempio seguente che dimostra la differenza tra i metodi html() e text():

$("#btn1").click(function(){
　　$("p").html("Voglio dire: <b>Hello world</b>");
});
$("#btn2").click(function(){
　　$("p").text("Voglio dire: <b>Hello world</b>");
});

Metodo jQuery val()

jQuery val()Il metodo di recupero o impostazione dell'attributo value dell'elemento form selezionato.

Esempio di recupero seguente<input>字段的值：

$("button").click(function(){
　　$("input:text").val();
});

Esempio di configurazione seguente<input>字段的值：

$("button").click(function(){
　　$("input").val("Hello world");
});

jQuery获取或设置属性-attr()

jQuery attr()方法获取或设置所选元素的属性和值。

以下示例获取图像的src属性的值：

$("button").click(function(){
　　$("img").attr("src");
});

以下示例设置图像的src属性的值：

$("button").click(function(){
　　$("img").attr("src", "logo_jquery.png");
});

下面的示例设置多个属性和值：

$("button").click(function(){
　　$("img").attr({
　　　　alt: "Seagull Icon",
　　　　title: "Image by Seagull",
　　　　width: "350px",
　　　　height: "300px"
　　});
});

jQuery HTML参考

有关完整的HTML方法参考，请访问我们的jQuery HTML / CSS参考。