Write less, do more.
¨Write less, do more¨ es la filosofía de jQuery.
jQuery es una librería de Javascript desarrollada por John Resig, que tiene las siguientes características:
- Facilita la manera de interactuar con los documentos HTML
- Manipulación del DOM
- Manejar eventos
- Desarrollar animaciones
- Agregar interacciones con AJAX
¿Cómo incluir jQuery en un proyecto?
Hay dos maneras de incluir jQuery en un sitio web:
- Descargando la librería de jQuery e incluirla en el proyecto.
Hay dos versiones disponibles de jQuery para la descarga:
- Versión de producción:
<script src=”jquery-3.2.1.min.js”></script>- Versión de desarrollo:
<script src=”jquery-3.2.1.js”></script>2. Incluir CDN de jQuery
CDN Google:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>CDN Microsoft:
<script src=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>Sintaxis de jQuery
La sintaxis de jQuery está hecha para seleccionar elementos de HTML y realizar alguna acción sobre el elemento.
$() es una función que convierte lo que está en medio de los paréntesis en un objeto de jQuery.La sintaxis básica de jQuery es:
$ ("selector").acción();- El signo $ es para definir el acceso a jQuery
- El (“selector”) es el elemento HTML a encontrar y/o consultar
- La acción() es la que se realizara con el elemento
Inicio de jQuery
Es una buena práctica esperar a que el documento esté completamente cargado y listo antes de trabajar con él.
Para evitar que cualquier código jQuery se ejecute antes de que el documento haya terminado de cargarse usamos:
$(document).ready();- El signo $ indica que estamos trabajando con jQuery
- (document) especifica que vamos a manipular el documento de HTML Nota: document no es un elemento de HTML por eso no va entre comillas
- .ready() es un método de jQuery que ejecuta una función hasta que se cargue por completo el DOM
Selectores jQuery
Los selectores de jQuery te permiten seleccionar y manipular uno o varios elementos de HTML.
Los selectores de jQuery se basan en los selectores de CSS. Ejemplos:
- Selector por nombre:
$(“elementoHTML”)- Selector por id:
$(“#nombreId”)- Selector por class:
$(“.nombreClase”)Nota: todos los selectores de jQuery comienzan con el signo de dolar y paréntesis: $().
Eventos jQuery
Los eventos son acciones que se realizaran en nuestro sitio, disparados por la interacción que tenga el usuario en él.
La sintaxis de los eventos en jQuery es:
$("selector").evento();El siguiente paso es definir lo que va a suceder cuando se activa el evento
$(“selector”).evento(function(){ //acción a realizar});
Algunos de los eventos más utilizados son:
- .ready( ): nos permite ejecutar una función cuando el documento se ha cargado completamente.
- .click( ): la función se ejecuta cuando el usuario hace clic en el elemento HTML.
- .dbclick( ): la función se ejecuta cuando el usuario hace doble clic en el elemento HTML.
- .mouseenter( ): la función se ejecuta cuando el puntero del ratón entra en el elemento HTML.
Si quieres saber más sobre jQuery puedes leer la documentación oficial en el siguiente link:
