Nota: a la fecha de este tutorial, la versión de jQuery es la 1.4.4
Es recomendable que se lea la primera parte de esta serie de tutoriales
En este tutorial aprenderás mediante ejemplos prácticos a trabajar con eventos en jQuery.
Los eventos son un tipo de métodos en jQuery que se usan para saber cuando el usuario interactua con el navegador, en este tutorial veremos los eventos relacionados al comportamiento del cursor (click, hover, toggle).
.click()
El mas común de todos es .click() este registra el comportamiento del clic del mouse sobre el elemento seleccionado, su sintaxis:
$('elemento seleccionado').click(function () {
// Que hacer cuando se haga clic sobre elemento
});
Ejemplo
Este ejemplo es bastante sencillo, es un boton que cuando se le haga clic se escondera en 500 milisegundos.
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo1').click(function () {
$(this).hide(500); // 'this' es un selector que se usa para seleccionar el elemento ya seleccionado anteriormente, en este caso #ejemplo1
});
});
</script>
<button id="ejemplo1">Hola</button>
.hover()
.hover() es el evento que registra cuando el cursor pasa por encima del elemento seleccionado, su sintaxis es:
$('elemento seleccionado').hover(function () {
// Que hacer cuando el cursor pase sobre elemento
});
A este evento también se le puede definir que hacer cuando el cursor deje de pasar sobre el elemento seleccionado, en tal caso su sintaxis cambiaria a:
$('elemento seleccionado').hover(function () {
// Que hacer cuando el cursor pase sobre el elemento
}, function (){
// Que hacer cuando el cursor deje de pasar sobre el elemento
});
Ejemplo
Haremos un ejemplo usando la segunda sintaxis:
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
.acerca{
width:400px;
font-size:16px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo2').hover(function () {
$(this).animate( { opacity: 0.3 }, 400)
}, function () {
$(this).animate( { opacity: 1.0 }, 400)
});
});
</script>
<button id="ejemplo1">Hola</button>
El resultado es un botón que se aclara cuando el cursor pasa por encima pero regresa a su estado original cuando el cursor deja de pasar por el botón.
En este ejemplo usamos el método .animate() que realiza una animación usando propiedades CSS (las que van entre corchetes), luego de la coma, le defnimos en milisegundos el tiempo que queremos que dure la animación.
.toggle()
El evento .toggle() es parecido a .click() registra el comportamiento de un click, solo que este actúa como un interruptor con dos estados: ‘prendido’ o ‘apagado’, su sintaxis:
$('elemento seleccionado').toggle(function () {
// Que hacer cuando se haga clic sobre el elemento
},function () {
// Que hacer cuando se haga clic otra vez sobre el elemento
});
Ejemplo
Haremos un ejemplo sencillo con .toggle().
<style>
*{font-family:sans-serif;}
button{padding:10px 20px;font-size:14px;position:relative;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#ejemplo3').toggle(function () {
$(this).animate({left:'200px'}, 300)
}, function () {
$(this).animate({left:'0px'}, 300)
});
});
</script>
<button id="ejemplo1">Hola</button>
El resultado es un botón que cuando se le haga click se moverá 200px a la derecha y cuando se le haga click otra vez regresara a su estado original y asà sucesivamente.
Hay que notar que donde se declaran los estilos (linea 3) el elemento a animar tiene que estar en position:relative para que la propiedad left funcione.
estan buenos los ejemplos, pero haria falta explicar tambien lo que tienes que descargar y aunque sea una introduccion chica de como funciona, lo digo por que no se nada y es lo que creo y muy bueno esto, gracias. ..
https://tursos.com/tutoriales/javascript/tutorial-jquery-rapido-facil-lo-basico/
Hola
Tu tutorial es excelente. Donde podria seguir haciendo el tutorial ??
Lo otro. Donde encuentro información del como declaras el css ? el * reemplaza el body {} ?
Gracias !
Hola!
Gracias, estoy trabajando en la continuación del tutorial.
Por lo de CSS échale un ojo a este tutorial https://tursos.com/tutoriales/html-css/que-es-css-y-para-que-sirve/ en la parte «Selectores».
Gracias por la rapida respuesta.
Estimado. Tienes alguna fuente de como funciona hacer webs «tableless» ? Tengo un sitio hecho con tablas y me gustaria adecuarme a los nuevos estandares y aprender.
Muchas gracias
P.D: Algun tutorial jquery en Ingles para continuar ?
Lo del diseño tableless, el truco esta en saber manejar el modelo de caja y la propiedad float de CSS, hay tutoriales de ello aqui https://tursos.com/categoria/tutoriales/html-css/
Tal vez esto te sirva de jQuery:
http://www.learningjquery.com/
http://jqueryfordesigners.com/
hola amigo me he respondido la anterior incognita del segundo tuto!! por cierto muy bueno! uno de los pocos q realmente estan limpios <— comprensibles!
solo tengo una pregunta: suponiendo q durante la contruccion de la pagina uso 4 distintos .js en la etiqueta los llamos como ya sabemos… como le hago para q sepa cual .js usar para cada id!
haria cuatro veces suponiendo (figuradamente) este codigo! ??
lo llamo a al documento
$(document).ready(function () {
$(‘lo cito con su nombre id)
estoy correcto???????
No te entiendo muy bien, porque usar 4 js?, creo que con uno para las funciones bastaria y el resto es llamar a la libreria.
Échale un ojo al codigo fuente de esta pagina para que te hagas una idea.
Hola Jose Ochoa ! Gracias por tu respuesta ! me expliko mejor:
esto haces para uno:
$(document).ready(function () {
$(‘#ejemplo3′).toggle(function () {
$(this).animate({left:’200px’}, 300)
}, function () {
$(this).animate({left:’0px’}, 300)
});
});
«como haces para los otros div, que usan otro archivo .js? »
tengo un script para el menu : lo llamo; <script…..menu.js …
tengo otro script para el rss: lo llamo; <script…..rss.js …
tengp un script para un slider: lo llamo; <script…..slider.js …
dentro del html tengo los 3 div: llamemosles igual…
como le hago para hacer q el .js va para su respectivo div. como le llamo? en css para determinar sabemos q es .nombre o #nombre { ….. } luego viene el siguiente .clase o #id {…..} lo que no se es:
«como le hago para llamar los .js para sus div»
Pues, jQuery usa el mismo sistema de selectores que CSS, puedes hacer algo como:
$('#nombre .clase')Tambien puedes seleccionar diferentes elementos en un mismo js, algo asi:
$(document).ready(function () {
$(‘#menu′).click(function () {
});
$(‘#rss′).click(function () {
});
$(‘#slider′).click(function () {
});
});
gracias brother! sorry por la demora pero me perdi en mi trabajo! 😀 saludos hermano y muchas gracias!!
Amigo, buen dÃa. Necesito enviar un mail utilizando ajax, es decir, envÃar sin recargar la página. estoy utilizando el plugin validate de jquery, y mi pregunta es: ¿cómo hago para enviar o para ejecutar mi función de ajax después que se haya validado correctamente?. La validación me funciona, y el metodo ajax también, pero no sé como ejecutar ajax despues de que haya validado. Te agradezco la ayuda!
$(document).ready(function(){
$(«#frm_contactenos»).validate({
errorElement: «div»
});
});
Donde coloco el código ajax?
Tienes que hacer un if preguntando si el form es valido o no, creo que seria algo asi:
if ($(«form»).valid()) {
// aqui iria tu codigo ajax
}
Otra alternativa que tal vez te sirva es validar el formulario de manera convencional sin el plugin asi tienes todas las condiciones (if, esleif, else)
Gracias por responderme,
El código que estoy usando es este:
$(document).ready(function(){
$(«#frm_contactenos»).validate({
errorElement: «div»
});
var opciones= {success: mostrarRespuesta,};
$(‘#frm_contactenos’).ajaxForm(opciones) ;
function mostrarRespuesta (responseText){
alert(«Mensaje enviado satisfactoriamente»);
};
});
y probé el que me enviaste pero me valida pero no me ejecuta el ajax.
Gracias maestro nuevamente.
Gracias por tu respuesta,
El código que estoy usando es
$(document).ready(function(){
$(«#frm_contactenos»).validate({
errorElement: «div»
});
var opciones= {success: mostrarRespuesta,};
$(‘#frm_contactenos’).ajaxForm(opciones) ;
function mostrarRespuesta (responseText){
alert(«Mensaje enviado satisfactoriamente»);
};
});
Y acabo de probar el que me enviaste y me envÃa el mail, pero no lo hace por medio del ajax.
Gracias maestro por tu ayuda.
Gracias, lo pruebo y te cuento!
$(document).ready(function(){
$(«#frm_contactenos»).validate({
errorElement: «div»
});
var opciones= {success: mostrarRespuesta};
if ($(‘#frm_contactenos’).valid()) {
$(‘#frm_contactenos’).ajaxForm(opciones);
}
function mostrarRespuesta (responseText){alert(«Mensaje enviado satisfactoriamente!»);};
});
Te cuento que estoy usndo el código que acabo de enviarte pero no me ejecutra el ajaxFrom, y no sé donde está el problema
Gracias Brother por tu ayuda!
Fijate aqui esta la documentacion de esa funcion.
Listo hermano logré hacerlo de esta manera y funciona a la perfección.
$(«#frm_contactenos»).validate();
$(«#frm_contactenos»).submit(function() {
if ($(‘#frm_contactenos’).valid()) {
$.blockUI({ css: {
border: ‘none’,
padding: ’15px’,
backgroundColor: ‘#000’,
‘-webkit-border-radius’: ’10px’,
‘-moz-border-radius’: ’10px’,
opacity: .8,
color: ‘#f60’
}
});
setTimeout($.unblockUI, 6000);
$.ajax({
type: «POST»,
url: «paginas/contacto.php»,
success: function(){
alert(«Mensaje enviado satisfactoriamente!»);
$(‘#frm_contactenos’).reset();
}});
}
return false;
});
gracias amigo por tu tutorial, muy bien explicado, queria hacerte una consulta lo que pasa es que el boton es con xajaz el onclick–>onclick=»xajax_guardar(xajax.getFormValues(‘FrmPersona’)); xajax_ocultar_div(‘formulario’);»/>, aparecen los mensajes erros pero = el formulario guarda estoy usnado esto,
$(document).ready(function() {
$(«#FrmPersona»).validate({
event: «blur»,
rules:{
«apepat»: «required»,
«apemat»: «required»,
«nombres»:»required»,
},
messages:{
«apepat» : «introdusca Apellido»,
«apemat» : «introdusca Apellido Mterno»,
«nombres» : «introdusca Nombres»,
«telefono» : «introdusca telefono»,
},
debug: true,
errorElement: «em»,
errorContainer: $(«#errores»),
submitHandler: function(){
$(«#Grabar»).click(function(){
});
});
}
});
alguna ayuda, te agradesco de antemano
Estas intentado validar un formulario? la verdad que no conozco mucho de xajax.
Buena página! se me hizo facil entender las cosas 😉
Hola… tengo una duda… he intentado mover con el 3er ejemplo (toogle) un div… lo que haces es mover un boton… pero yo quisiera mover un conjunto de botones dentro de un div… no se si me explico :S … Gracias
Intenta ponerle la misma clase a todos los botones y luego seleccionas esa clase y la animas.
Asi solo se me mueve el primer boton que encuentra con esa clase… :/
Ya lo logre… 😀 gracias… hice esto:
$(document).ready(function () {
$(‘#id_botones’).toggle(function () { // Todos los botones deben tener el mismo id
$(‘.clase_botones’).animate({bottom:’250px’}, 600) // Todos los botones deben tener el mismo la misma clase tambien
}, function () {
$(‘.clase_botones’).animate({bottom:’0px’}, 300) // Todos los botones deben tener el mismo la misma clase tambien
});
});
Esta bueno, solo ten en cuenta que los id son únicos, ósea que solo un elemento debe llevar un id.
BuenÃsimo. Sencillo, práctico y efectivo. Esperando con muchas ganas su continuación.
Hola, me ha encantado el tutorial, muy sencillo e intuitivo…No obstante, tengo una duda que me gustarÃa resolver al respecto, y quizás puedas ayudarme…Te lo agradecerÃa mucho…
La duda consiste en saber de qué manera puedo hacer que el botón se quede apretado con un efecto fijo, es decir, para indicar que estás por ejemplo, en una sección cualquiera de un menú, no sé si me explico!…
Muchas gracias!!
A ver, si te entiendo, quieres estilizar un boton cuando este sea presionado? y que se quede con esos estilos o que se vallan cuando deje de ser presionado, con jQuery podrÃas hacer algo asi:
jQuery:
$('button').click(function() {
$(this).addClass('activo');
});
y luego le pones las propiedades CSS
CSS:
button.activo{
/* propiedades */
}
Espero haberte ayudado.
Hola Josue, simplemente agradecerte los tutoriales que tienes, son geniales y están muy muy bien detallados, de verdad que me sirven de mucho ya que no sé porque el tema de jQuery siempre me dio bastante pereza, pero con estos tutoriales me estoy animando, muchas gracias y te ánimo a que sigas, que la gente te lo agradecerá mucho, saludos desde Barcelona.
Muchas gracias por comentar, me alegra la mañana leer comentarios como el tuyo 🙂
No hay una tercera parte para que con los eventos onkeypress, y los demas excelente tutos !! espero q halla mas publicaciones sobre javascript ………!!
Hola maestro gracias por el material es estupendo , lo puse en practica en un proyecto de drupla6 y me funciono ,pero tuve problemas para aplicarlo en un proyecto de drupal7 por lo que investigue para drupal7 hay cambios en el codigo de jquery ,de antemano te agradesco cualquier ayuda saludos
hola, me ha servido de mucho ahora entiendo mejor el uso se jQuery, solo una cosita, donde puedo ver todos los eventos, metodos con los que cuenta jQuery espero puedas ayudarme saludos
Aqui http://docs.jquery.com/
Excelente! La verdad muchas gracias por tomarte el tiempo de hacer un tutorial tan bien explicado y detallado.
Es una muy buena base para los que no somos programadores. Ojalá tengas tiempo de continuarlos 🙂
Un abrazo y que estés muy bien.
Gracias, un tutorial muy simple y bien explicado para ir entiendo jQuery
¡Excelente trabajo! Andaba buscando un tutorial sencillo que me permitiera dar mis primeros pasos en jQuery y este es perfecto. Ahora entiendo más la lógica que hay en muchas webs. ¡Gracias de nuevo por tu aportación!
Amigo estoy leyendo tus apuntes y la verdad es que como decimos en Panamá, «La botaste»
Bien explicado, sin mucha vuelta y facil de entender
Un saludo
Hola Josue, ¿por qué a veces se pone ‘event’ entre los paréntesis de function?
Pongo un ejemplo de la web de jQuery. Si pongo function(), sin ‘event’ también funciona. ¿Para qué sirve ‘event’?
$( «#helloBtn» ).click(function( event ) {
alert( «Hello.» );
});
Un saludo y muchas gracias…
Es para capturar el evento en una variable y usarlo mas adelante, por ejemplo:
$(«a»).click(function(e){
e.preventDefault();
}
Asi capturo el evento y luego a este le aplico la función preventDefault para evitar el comportamiento por defecto.
OK. Haré pruebas a ver si lo he entendido…