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:
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:
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 .