Los últimos tutoriales de desarrollo web
 

jQuery - Obtener contenido y atributos


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


La manipulación DOM de jQuery

Una parte muy importante de jQuery es la posibilidad de manipular el DOM.

jQuery viene con un montón de métodos DOM relacionados que hacen que sea fácil de acceder y manipular los elementos y atributos.

DOM = Document Object Model

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

"El modelo de objetos de documento del W3C (DOM) es una interfaz de plataforma y lenguaje neutro que permite a los programas y scripts acceder y actualizar el contenido, la estructura y el estilo de un documento de forma dinámica."


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

Tres, métodos sencillos, pero útiles para la manipulación DOM de jQuery son:

  • text() - Establece o devuelve el contenido de texto de los elementos seleccionados
  • html() - Establece o devuelve el contenido de los elementos seleccionados (incluyendo el formato HTML)
  • val() - Establece o devuelve el valor de los campos de formulario

El siguiente ejemplo muestra cómo obtener el contenido con el jQuery text() y html() métodos:

Ejemplo

$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});
Inténtalo tú mismo "

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

Ejemplo

$("#btn1").click(function(){
    alert("Value: " + $("#test").val());
});
Inténtalo tú mismo "

Obtener Atributos - attr()

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

El siguiente ejemplo muestra cómo obtener el valor de la href atributo en un enlace:

Ejemplo

$("button").click(function(){
    alert($("#w3s").attr("href"));
});
Inténtalo tú mismo "

El siguiente capítulo se explica cómo configurar los valores (cambiar) de atributos y contenido.


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»


jQuery Referencia HTML

Para una visión completa de todos los métodos de jQuery HTML, por favor vaya a nuestro / CSS de referencia jQuery HTML .