Scribd
Cargar
116 vistas2 páginas

Notas Javascript

Este documento resume las funciones básicas de JavaScript y jQuery para manipular eventos y elementos en una página web. Explica cómo usar jQuery para agregar y quitar clases a elementos, manejar eventos de click, obtener atributos, y agregar animaciones de desplazamiento al hacer clic en enlaces.

Cargado por

Diana Garcia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
116 vistas2 páginas

Notas Javascript

Este documento resume las funciones básicas de JavaScript y jQuery para manipular eventos y elementos en una página web. Explica cómo usar jQuery para agregar y quitar clases a elementos, manejar eventos de click, obtener atributos, y agregar animaciones de desplazamiento al hacer clic en enlaces.

Cargado por

Diana Garcia
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd

JAVASCRIPT.

Es un lenguaje de programación apuntado a Web, a la parte frontend principalmente,


aunque también se puede trabajar backend (la parte del servidor con javascript a
travéz de NodeJS).

JQuery es una de sus principales librerías.

Para empezar a trabajar le decimos que vamos a trabajar con toda la web. document
es una representación de toda la web:
jQuery(document)

Con ready() se le dice que vamos a trabajar con elementos listos en una web lista:
jQuery(document).ready(listo);

Se crea una función, que es un bloque de lineas de código que pueden repetirse N
cantidad de veces.
function listo(){]

Vamos a crear un evento en el elemento con id hamb, al hacer click, se llevará a


cabo la funcionalidad e. e representa a la acción.
jQuery(".hamb").click(function(e){});

Esta acción hace que al hacer clic en ham no me regrese al principio


jQuery(".hamb").click(function(e){
[Link]();
});

Si el elemento nav tiene la clase open, la va a quitar, y si no la tiene, la va a


agregar.
jQuery("header .container
nav").toggleClass("open");

Para cambiar el icono hamb por una x cuando ha desplegado nav para regresar.
jQuery(".hamb i").toggleClass("fa-
times");

Se obtiene el atributo del elemento de la nav a la que se le dio clic, obteniendo


el href.
jQuery("header .container nav
a").click(function(){
var dev =
jQuery(this).attr("href");
});

Para agregar una animación, la propiedad scrollTop, para saber la ubicación del
elemento con el id seleccionado uso dev, el método offset sirve para decirme desde
el
punto de arriba del explorador hasta el punto de abajo, cual es el valor, aqui top.
jQuery("html,body").animate({
"scrollTop": jQuery(dev).offset().top()
})

Cuando yo haga click a cualquier a uso el remove para quitar el icono x para que se
cierre y cierre el menú
jQuery("header .container
nav").removeClass("open");
jQuery(".hamb i").removeClass("fa-
times");

También podría gustarte