Como mostré en el post anterior, JQuery, parte 1: Introducción, la sintaxis básica en Jquery es:
$(elemento).metodo();
Aquí vemos en el ejemplo cómo nosotros levantamos un elemento y a través del mismo invocamos un método. A su vez estos métodos pueden ser comunes para todos los elementos como ser propios de los mismos.
En el caso de los eventos, la sintaxis es muy parecida:
$(elemento).click(function(){
//Código a ejecutar.
});
$(document).ready(function(){
//Código a ejecutar cuando se carga la página
});
Lo que estamos haciendo es levantar un objeto document que es el padre de todos los elementos de html, ya sean h1, p, ul, div, span, etc. Lo que estamos diciendo con el evento ready() es que cuando toda la página esté lista, cuando todas las etiquetas se hayan cargado, ejecute el código que tiene dentro de la función.
En el caso de que queramos levantar un elemento por su id deberíamos usar el caracter # seguido por el nombre del id de la siguiente forma:
$("#id_del_elemento")
Para probar cómo funciona tanto un método como un evento, haremos la siguiente prueba. Crearemos un formulario con un campo de entrada y un botón y al pulsar el botón nos mostrará por pantalla el valor del campo de entrada dentro de un div:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#boton").click(function(){
var nombre = $("#nombre").val();
$("#saludo").html('Hola ' + nombre);
});
});
</script>
</head>
<body>
<form action="javascript:void(0);">
<input type="text" id="nombre" />
<input type="button" id="boton" value="Mostrar nombre" />
<div id="saludo"></div>
</form>
</body>
</html>
Como vemos en primer lugar levantamos el botón por su id le aplicamos un evento click(). Vale aclarar que al hacer clic sobre el elemento se ejecutará la función que recibe como parámetro.
Luego levantamos, también por su id a la etiqueta con el id «nombre» que es un input text, y al div por su id «saludo». En el input text llamamos al método .val() que nos devolverá el value del campo de entrada. Mientras que para el div utilizamos .html() lo que nos permitirá insertar una cadena dentro del mismo.
Tanto .html() como .val() cumplen una función de métodos getters y setters.
Si usamos el método .html() sin un parámetro nos devolverá el valor de la cadena que se encuentra dentro, pero en caso de usarlo con un parámetro cambiará el valor actual por el de ese parámetro. Para ello veremos un ejemplo, copiaremos el contenido de un párrafo dentro de otro con el mismo método:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#copiar").click(function(){
var parrafo = $("#parrafo1").html();
$("#parrafo2").html(parrafo);
});
});
</script>
</head>
<body>
<p id="parrafo1"> Soy un <strong> parrafo </strong> </p>
<a id="copiar" href="#"> Copiar </a>
<p id="parrafo2"> ... </p>
</body>
</html>
Como ven usamos el método .html() tanto para recuperar la cadena que está dentro de un elemento como también para setear el valor de otro, eso obviamente dependiendo de si tiene o no un parámetro.
Sin embargo, por si no notaron el párrafo 1 dentro suyo tiene una etiqueta strong que también fue copiada, esto tiene sentido teniendo en cuenta el nombre del método: html, esto significa que este método copiará toda la cadena, incluso el código. Si nosotros quisiéramos recuperar solamente la cadena, deberíamos usar el método .text() de la siguiente forma:
var parrafo = $("#parrafo1").text();
$("#parrafo2").html(parrafo);
Vale aclarar que el método .html() como .text() se aplican a etiquetas de apertura y cierre como h1, p, ul, li, strong, div, span, etc.
En el caso del método .val() funciona muy parecido si no recibe parámetros nos devolverá el value de la etiqueta y si recibe un parámetro lo cambiará. Además este método sólo se aplica para elementos de formulario, input, textarea, select.
A continuación les mostraré un ejemplo de cómo el value de un elemento pasa a otro. Además usaré un nuevo evento, el evento keyup() que sólo puede aplicarse a campos de entrada como text input, text password y textarea, y se disparará en el momento en que el usuario teclee sobre el mismo:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#value_1").keyup(function(){
var valor = $(this).val();
$("#value_2").val(valor);
});
});
</script>
</head>
<body>
<form action="javascript:void(0);">
Escribir algo
<input type="text" id="value_1" />
<br />
<textarea id="value_2" cols="50" rows="10"></textarea>
</form>
</body>
</html>
Nótese que dentro del evento keyup() en la función debemos usar:
$(this)
Para referirnos al elemento al que se le está aplicando el evento.
Como verán los eventos tienen el mismo nombre que Javascript sin Jquery sólo que sin el «on» adelante. (onclick es click por ejemplo). Para consultar la lista de eventos pueden visitar esta página.
A su vez hay eventos inventados por jquery como el evento hover() que en este caso recibirá dos parámetros, el primero será una función que se disparará cuando el mouse se posicione arriba del elemento y el segundo cuando lo abandone:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var texto = $("#caja").html();
$("#caja").hover(
function(){
$(this).html('');//Mouse arriba del elemento
},
function(){
$(this).html(texto);//Mouse fuera del elemento
}
);
});
</script>
</head>
<body>
<div id="caja" style="width: 80px; height: 80px; padding: 10px; background-color: #ccc;"> Posicione el mouse arriba </div>
</body>
</html>
Bueno, hasta acá todo.
Saludos!
Anterior: JQuery, parte 1: Introducción
Siguiente: JQuery, parte 3: Método .attr()
Buen tutorial, gracias por el aporte y espero sigas con tu trabajo, saludos desde México, @kikekeys 😀
Gracias a vos por comentar.
Saludos!
Hola estoy aprendiendo jquery tus tutos .
¿cual seria lo correcto al declarar una variable en jquery?
var nombre_variable;
o asi:
var $nombre_variable;
o asi:
var $nombre_variable;
probe con las 3 y funcionan.
Muchas gracias 🙂
Me equivoce era asi:
var nombre_variable;
o asi:
var $nombre_variable;
o asi:
$nombre_variable;
En realidad la forma de declarar variables con Jquery no cambia, vos seguís programando en Javascript.
Repasemos:
Las variables en Javascript deben cumplir dos condiciones:
– Tenes caracteres alfanuméricos (letras con tildes o ñ no), signo peso ($ también llamado dólar) y guión bajo
– No pueden empezar con números
Con respecto a lo que vos escribiste, las primeras dos formas están bien, cuando se declara una variable debe tener el var adelante.
La tercera probablemente te funcione, pero no es correcta, incluso algunos navegadores pueden devolver un error.
ok, muy agradecido por responder.
Hola, tengo una consulta, cuando se genera algún elemento html desde ajax con php como puedo acceder a los valores del mismo?
pasa que genero una tabla(php que incluye dos select) en una llamada ajax, lo que deseo es obtener los valores de los select con change pero jquery no hace nada he testeado con alert, console.log pero es como si el elemento no existiera, esto tiene otro tipo de procedimiento a lo normal??
Después de llamar al método succcess()
O bien, podés usar el método on:
http://api.jquery.com/on/
Excelente tutorial, gracias por compartirlo.
Gracias a vos, Alejandro.
Saludos!