Como hemos hablado, jQuery se puede considerar como una biblioteca de "seleccionar y hacer". Hemos hablado bastante sobre la selección, así que ahora hablemos de algunas actividades. Recuerde que el patrón básicamente se ve así:
// Select something! $(".something") // Do something! .hide();En lugar de trabajar con ejemplos más teóricos, nos movemos directamente hacia algo del mundo real. Encontramos este bolígrafo de Drew Barontini y lo bifurcamos.
Consulte el formulario de tarjeta de crédito Pen por Chris Coyier (@chriscoyier) en CodePen
En nuestro ejemplo, ocultamos el formulario de la tarjeta de crédito de forma predeterminada. Luego creamos un enlace en el que puede hacer clic para deslizar hacia arriba y hacia abajo en el formulario de la tarjeta de crédito. Nosotros seleccionamos el enlace, y luego hacer un slideToggle en el formulario. ¡Selecciona y hazlo!
Todavía no hemos hablado mucho sobre eventos, pero eso es una gran parte de jQuery. Un evento es algo así como clics del mouse, pulsaciones de teclas, desplazamientos, etc. La parte "hacer" de "seleccionar y hacer" a menudo ocurre después de un evento. No se preocupe, hablaremos mucho sobre los eventos antes de que termine esta serie. Por ahora, solo sepa que on () es la mejor forma / estándar de vincular eventos en jQuery. Vincular, que significa "estar atento a este evento en este elemento o conjunto de elementos".
El plan básico:
$("#link-that-toggles").on("click", function() ( $("#thing-to-toggle").slideToggle(); ));En nuestro ejemplo, el enlace era literalmente un enlace.
palanca
La forma en que funcionan los enlaces hash de forma predeterminada en cualquier navegador es que la ventana se desplazará hacia abajo hasta el elemento con el ID que coincide con ese enlace hash. A veces eso es bueno. Me gusta cómo crea una conexión semántica entre ese vínculo y ese elemento. Entonces, sin JavaScript, el enlace aún tiene sentido (especialmente si lo titula como algo inteligente).
Pero a veces, ese comportamiento de salto de enlace hash es un fastidio. Podemos prevenirlo en JavaScript usando preventDefault. Como esto:
$("#link-that-toggles").on("click", function(event) ( $("#thing-to-toggle").slideToggle(); event.preventDefault(); ));Hablaremos más sobre eso próximamente.
Por supuesto, la propia documentación de jQuery es un recurso fantástico para todos los aspectos de "hacer" de jQuery (métodos).
Creo que la comprensión básica de este "seleccionar y hacer" y los eventos realmente abre un mundo de comprensión en JavaScript. Sé que lo hizo por mí. Al final de este screencast, echamos un vistazo al diseño actual de CSS-Tricks y vemos dónde se usa claramente JavaScript para reaccionar a algunos eventos de clic y cambiar la interfaz de usuario. Cosas muy muy similares a lo que estábamos haciendo en la demostración anterior. Por ejemplo, establecer una clase activa en las cosas en las que hace clic, como esta:
Vea el lápiz d6f7161a5931397b4f24195a315d52f3 de Chris Coyier (@chriscoyier) en CodePen