AJAX CON JQUERY
h2
texto del articulo
APUNTES de HTLM5, CSS, JavaScript, ES5, php, VBA, JAVA Cuando empecé mi camino en la programación, me dí cuenta que en ocasiones no era tan fácil como creía encontrar apuntes y deseo compartir lo que voy aprendiendo por si a alguien le resulta de utilidad. Ahora tengo una meta vivir de la programación, poco a poco intento sumar conocimientos y compartirlos con todos vosotros. Por el camino cometeré errores pero tengo las metas muy claras.
Un evento es un objeto para java script y como tal tiene sus propiedades y métodos:
$(document).click(function(){
alert("Body");
});
$("img").click(function(){
alert("Imagen");
});
$(document).click(function(){
alert("Body");
});
$("img").click(function(e){
e.stopPropagation();
alert("Imagen");
});
Podemos traducir evento algo que hace un objeto(página, ratón, teclado,formulario) y acción como la qué es lo que pasa cuando luego.
Ejm Cuando hagamos click en una etiqueta a nos llevará a otro pagina. En este caso el evento es hacer click y el evento desencadenado es ir a la pagina xxx.
Los eventos pueden ser de varios tipos:
Podemos utilizar los evento en jquery de dos formas:
$("div").click(myfuncion);
fuction myfuncion(){...code...}
$("div").click(function(){....code....});
Utilizaremos estas funciones para realizar acciones con los eventos hover y click.
La función hover() desencadenará una acción cuando entre el cursor en el elemento y otra cuando salga de él.
Lo utilizaremos para trabajar con el evento click, con el aparecerá y desaparecerá nuestro elemento cada vez que hagamos click. Se puede utilizar si queremos hacer una etiqueta <details> personalizada.
La función next("objeto") nos ayudará a apuntar al próximo objeto que determinemos dentro del actual. Por ejemplo Si le decimos $("article").next("p")
apuntará a la primera etiqueta p de cada articulo.
Si deseamos que un obejeto responda a dos o mas eventos (click, hover..) y al responder a ellos desencadene la misma función podemos utilizar bind().
Hasta el momento teniamos que hacer lo siguiente: $("p").click(funcionA).hover(funcionA)
Con bing lo podemos hacer bind("click hover", data, miFuncion)
data será un dato o variable con un dato que le pasamos a nuestra variable
En los eventos podemos poner tantos eventos como deseemos que desencadenen nuestra acción, para ello los nombraremos separados con espcacios:
.on("click dbclick scroll", funciónAcciónDesencadenada)
$('.h2').on({ click:hacerclick, mouseover: hacerhover});
function hacerclick(e) {
e.preventDefault();
console.log('has hecho click');
}
function hacerhover() {
console.log('pasó el ratón');
}
La delegación de eventos es una propiedad del objeto evento que nos puede resultar muy util para identificar el elemento del DOM que dispara el evento y sus atributos. Saviendo este dato podremos solicitar su modificación posterior mente.
En este ejemplo utilizamos la funcion .on() y le indicamos en primer lugar el elemento padre desde el que deseamos empezar la búsqueda $("ElementoPadre")
y dentro de la función on le pasaremos por parámetros, los eventos desencadenantes de la acción, el hijo que debe identificarnos y por ultimo acción que desencadena.
$("ElementoPadre").on("eventos","ElementoHijo", function(){ $(this).attr("id") });
En el siguiente ejemplo nos regresará por consola la propiedad class de cada objeto del DOM por el que pasemos el ratón.
$("*").hover(function(e){console.log(e.target.className);});
See the Pen función next() de JQ by CVDGP (@cvdgp) on CodePen.
En el siguiente ejemplo crearemos dos imágenes, cuando hagamos click o carguemos la página copiara la ruta de la imagen1 y se la dará a la imagen 2, poniendola visible (Show), cuando pasemos el ratón por la imágen 2 esta desaparecerá, utilizaremos el método stopPropagation() del objeto evento para evitar que se propague en otro objetos como el body:
Sandisk y Western Digital