El JQuery by Alex Garcia Aguilar

alexgarciaaguilar05 — 2022-11-01 18:08:47 UTC

jQuery es un software libre y de código abierto, cuenta con un diseño que facilita la navegación por un documento y seleccionar elementos DOM proporcionando a los desarrolladores de aplicaciones web complementos que agilizan el desarrollo de proyectos.

Para qué sirve jQuery

alexgarciaaguilar05 — 2022-11-01 18:12:35 UTC

JavaScript, jQuery es que es mucho menos verboso, es decir, se puede hacer lo mismo con muchas menos líneas de código, y esa es la clave de su éxito. El lema de jQuery es "escribe menos, haz más".
Los desarrolladores encuentran apoyo en la librería para sus proyectos, que además cuentan con una excelente documentación oficial donde se explican todas las funcionalidades. El único inconveniente es que la página de jQuery está en inglés, como la mayoría de la documentación del mundo de la programación.

Características de jQuery (ejemplos de sintaxis)

alexgarciaaguilar05 — 2022-11-01 18:14:50 UTC

Para entender cómo funciona jQuery debemos atender a sus características.

Constructor jQuery. El constructor es una función sobrecargada que nos permite acceder a los elementos del DOM correspondientes a la consulta que realizamos. Por ejemplo:

jQuery('h2').css('color', ‘blue’’);

Nota: Seguro que ya has visto múltiples ejemplos donde se usa $ en lugar de jQuery. Pues bien, $ es una alias de jQuery. Por ejemplo, tomando los ejemplos anteriores usando el alias sería:

$('h2').css('color', 'red');

Pero hay que tener en cuenta que, aunque usar $ es más cómodo que escribir jQuery, esto no siempre es válido cuando se utilizan otras librerías que usan la función $, ya que para esto se emplea el noconflict de jQuery.

Trabajar por grupos(Iteración implícita). Los métodos en jQuery pueden realizar consultas mediante iteración implícita. Es decir, buscando múltiples coincidencias y aplicando modificaciones para cada elemento en una única instrucción, Por ejemplo:

$('h2') Nos devuelve el conjunto de los títulos nivel 2 (h2), pero si por ejemplo quisiéramos cambiar el color a un gris oscuro (#333), esto lo podríamos hacer de la siguiente manera:

$.each($('h2'), function() {

$(this).css("color", "#333");

});

Diseñado para realizar consultas a través del DOM. jQuery nos permite realizar consultas CSS, xPath y transversales.Por ejemplo:

$('h2 + p').css('color', '#946900');

$('h2 + p').css('font-style', 'italic');

Con esto indicamos que todo párrafos (p) inmediatamente seguidos(+) de un título nivel 2(h2), van a tomar el color de la letra café y el estilo de la fuente será del tipo itálica.

Es un sistema modular donde podemos anidar consultas o tareas de una manera sencilla. Por ejemplo:

$('h2').css('color','red');

$('h2').text ('Cambiando el contenido a todos los elementos h2');

Ahora lo comparamos con el siguiente código:

$('h2')

.css ('color','red')

.text ('Cambiando el contenido a todos los elementos h2');

alexgarciaaguilar05 — 2022-11-01 18:44:15 UTC

Descarga el script de jQuery

Este es uno de los métodos de instalación más sencillos, pues bastará con que te descargues la última versión de jQuery desde aquí y la incluyas en tu plantilla HTML. Debes descargarte la última versión comprimida de producción. Por ejemplo, podrías situar el archivo en el directorio /js de tu proyecto.

Lo recomendable es que incluyas jQuery justo antes de la etiqueta <\body>.

alexgarciaaguilar05 — 2022-11-01 20:00:03 UTC

El uso de plugins

El verdadero poder está en los cientos de plugins que lo utilizan para crear efectos increíbles, los plugins son programas de JavaScript que usan y expanden jQuery.

Instalando jQuery

Antes de que puedas usarlo, debes descargar una copia de este y decidir dónde quieres que viva. En esta sección, analizo los pasos básicos involucrado en obtener una copia de jQuery y luego guardarla en el lugar correcto dependiendo de si está trabajando en su computadora personal o en un servidor web remoto. Más tarde, verá cómo incluir una línea de código en su Archivo HTML o página web para ver los efectos de jQuery en su página web.

alexgarciaaguilar05 — 2022-11-01 20:00:48 UTC

Descargando jQuery

Puedes descargar la última versión aquí o ir a la página de jQuery.

Las letras min en el nombre de archivo indican que el archivo está minimizado. Esto significa que los espacios adicionales y los comentarios que no hacen nada son eliminados, lo que hace que el tamaño general del archivo sea más pequeño. En general, es mejor descarga la versión minimizada de jQuery.

Si has descargado el archivo desde nuestro sitio recuerda que tienes que descomprimirlo para poder usarlo.

Configurando un directorio de pruebas

Ahora que tienes una copia local del archivo jQuery, necesitas configurar una ubicación en tu ordenador donde puedas crear archivos HTML que usan jQuery. Como hacer esto, sigue estos pasos:

1. Crea un directorio o carpeta en tu ordenador que sea fácil de navegar y asígnale el nombre, por ejemplo, webtest. En un ordenador, si crea el directorio en la unidad C:/, el directorio sería C:/webtest. En un Mac, puedes crear el directorio en el escritorio.

2. Dentro del directorio webtest, crea dos directorios, nómbralos js e imagenes.

3. Copia o mueve el archivo jQuery (jquery-x.x.x.min.js donde las x serán el número de versión) a el directorio js.

Llamar a jQuery desde una página web

alexgarciaaguilar05 — 2022-11-02 00:26:02 UTC

Query es una de las bibliotecas de JavaScript más populares del mundo. Ofrece muchas ventajas a los desarrolladores web, por lo que aprender a utilizarla debería ser tu prioridad.

El uso de la biblioteca jQuery te permite escribir menos código JavaScript sin dejar de obtener toda su funcionalidad. Esto te permite trabajar de forma más eficiente y centrarte en otras partes del proyecto.

Esperamos que este tutorial sobre jQuery te permita comprender mejor qué es la biblioteca jQuery y cómo empezar a utilizarla. Si tienes más preguntas, asegúrate de dejar un comentario a continuación.

alexgarciaaguilar05 — 2022-11-02 00:57:55 UTC

alexgarciaaguilar05 — 2022-11-02 00:58:16 UTC

alexgarciaaguilar05 — 2022-11-02 00:58:37 UTC

alexgarciaaguilar05 — 2022-11-02 00:58:56 UTC