lunes, 11 de febrero de 2013

Manipulación del DOM con 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, lo que hace que sea fácil de acceder y manipular los elementos y atributos en cualquier página web.


Leer el contenido - text (), html () y val()

Tres simples, pero útiles, métodos jQuery para la manipulación de DOM 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 del formulario


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(inicio);
function inicio(){
    $("#pregunta").click(onPregunta);
    $("#respuesta").click(onRespuesta);
    $("#ventana").click(onVentana);
}
function onPregunta(){
    $("#texto").text("¿Quién pinto el Nacimiento de Venus?");   
}
function onRespuesta(){
    $("#texto").text("Sandro Bottichelli (1445 - 1510) en 1484");   
}
function onVentana(){
    var t = $("#texto").text();
    alert("El contenido del enunciado es: "+t);
}
</script>
</head>

<body>
<p id="texto">¿Quién pinto el Nacimiento de Venus?</p>
<input type="button" value="Pregunta" id="pregunta"/>
<input type="button" value="Respuesta" id="respuesta"/>
<input type="button" value="Ventana" id="ventana"/>
</body>
</html>

 

 Ejemplo: http://pacoarce.com/jQuery/DOM.html

Curso completo en: http://www.udemy.com/jquery-y-mobile/ 

No hay comentarios:

Publicar un comentario