jQuery - Obtener contenido y atributos

jQuery tiene poderosos métodos para manipular elementos y atributos HTML.

Operaciones DOM de jQuery

Una parte muy importante de jQuery es su capacidad para manipular el DOM.

jQuery proporciona una serie de métodos relacionados con el DOM, lo que facilita el acceso y la manipulación de elementos y atributos.

lamp DOM = Document Object Model (Modelo de Objetos del Documento)

DOM define el estándar para acceder a documentos HTML y XML:

"El Modelo de Objetos del Documento del W3C es una interfaz independiente de la plataforma y el lenguaje que permite a los programas y scripts acceder y actualizar dinámicamente el contenido, la estructura y el estilo de los documentos."

Obtener contenido - text(), html() y val()

Tres métodos de jQuery simples y prácticos para operaciones DOM:

  • text()- Establece o devuelve el contenido de texto del elemento seleccionado
  • html()- Establece o devuelve el contenido del elemento seleccionado (incluyendo las etiquetas HTML)
  • val()- Establece o devuelve el valor de los campos del formulario

El siguiente ejemplo demuestra cómo obtener contenido mediante los métodos text() y html() de jQuery:

Ejemplo

$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

Pruébalo »

El siguiente ejemplo demuestra cómo obtener el valor de un campo de entrada mediante el método val() de jQuery:

Ejemplo

$("#btn1").click(function(){ alert("Valor:" + $("#test").val()); });

Pruébalo »

Obtener atributos - attr()

El método attr() de jQuery se utiliza para obtener el valor de los atributos.

El siguiente ejemplo demuestra cómo obtener el valor del atributo href de un enlace:

Ejemplo

$("button").click(function(){ alert($("#ejemplo").attr("href")); });

Pruébalo »

El próximo capítulo explicará cómo establecer (cambiar) el contenido y los valores de los atributos.

Otras extensiones