JQuery Events | Explicado
JQuery está diseñada para tratar con eventos en la página web también, los eventos (si aún no está familiarizado) son acciones del usuario que hacen que una página web reaccione. Para explicar mejor los eventos, podemos decir que cualquier acción a la que una página web pueda responder se conoce como un evento de página web, por ejemplo, mouse-over, hacer clic, carga de documentos.
JQuery Events | Métodos de sintaxis y eventos
La sintaxis de los eventos jQuery es usar un operador de puntos Después de la función de fábrica ps que contiene los selectores.
$ ("P").hacer clic();
Con la línea anterior, se crea un oyente de eventos, el siguiente paso es definir qué hacer cuando se ejecuta ese evento específico. Para hacer eso, defina la función dentro de la paréntesis del evento, como:
$ ("P").hacer clic (function ()
// cuerpo de la función
);
JQuery Events | Ejemplos
Para demostrar el funcionamiento de los eventos de jQuery y los controladores de eventos, vamos a configurar una página web HTML con Google CDN alojado JQuery incluida en su etiqueta de script:
La página web HTML contiene estas líneas para configurar nuestra página web de prueba:
Cambio de color en la carga
Hola! Yo soy Linuxbot
Doble clic en mí!
Haga clic para esconderme!
Si ejecuta el archivo HTML, obtendrá el siguiente resultado en el navegador:
El primer evento que vamos a pasar es el documento evento. Este evento se ejecuta automáticamente cuando el DOM verifica que la página web se haya cargado por completo y no esté esperando ninguna acción o respuestas adicionales. Entonces, vamos a cambiar el fondo del Etiqueta sobre la carga del documento, con las siguientes líneas de código:
$ (documento).Ready (function ()
$ ("H1").css ("fondo", "rojo");
);
Obtendrá la siguiente salida:
Como puede ver, pudimos cambiar el color de fondo del H1 con eventos jQuery.
El SiguienteT va a ser el Botón Presione, Vamos a solicitar al usuario su nombre al botón Presione. Use el código:
$ ("botón").hacer clic (function ()
var xyz = solicit ("Ingrese su nombre completo");
);
Obtiene la siguiente salida al presionar el botón:
Como puede ver, al hacer clic en el botón que dice "Haz clic en mí!", Se mostró un cuadro de diálogo rápido que pidió el nombre completo del usuario.
Los eventos de clic del mouse son bastante comunes, pero algo que se usa ampliamente es el evento de doble clic. Para demostrar esto, vamos a mostrar un mensaje en la pantalla como una alerta cuando el usuario hace doble clic en el párrafo con la ID "dblclick"Con las siguientes líneas de código:
$ ("#dblclick").dblClick (function ()
Alerta ("Que tengas un buen día!");
)
Con las líneas anteriores, la salida es como
Al hacer doble clic en el texto, se mostró un nuevo cuadro de diálogo de alerta al usuario con un saludo.
Incluso podemos usar el "este"Referencia al trabajar con eventos jQuery, para demostrar que vamos a ocultar el texto con la identificación"esconder"Al hacer clic. Hacemos esto usando las siguientes líneas de código:
$ ("#escondite").hacer clic (function ()
$ (esto).esconder();
);
Obtiene la siguiente salida al hacer clic en el texto que dice "Haga clic para esconderme!":
El texto se ocultó al hacer clic en él una vez.
Conclusión
JQuery Library proporciona la funcionalidad para administrar y reaccionar a los eventos de la página web, por la cual JQuery se conoce como "Personalizado"Para el manejo de eventos. Los eventos jQuery se agregan a la función JQuery Selector ps Al usar un operador DOT, esto crea un oyente de eventos en ese elemento que escucha un evento en particular. Para realizar una acción basada en este evento, debe crear una función que le indique a la página web qué hacer para ese evento específico. Esta función se escribe comúnmente dentro del paréntesis del oyente del evento.