Share
Los ávidos lectores de Envato Tuts + provienen de una amplia variedad de antecedentes en términos de experiencia, cultura y lo que buscan aprender. Cuando se trata de tecnología, es fácil dar por sentado a aquellos que recién comienzan, especialmente si ha realizado algún tipo de desarrollo durante un período prolongado de tiempo..
Dicho esto, una de las cosas buenas de convertirse en un desarrollador es que una vez que haya aprendido un idioma y un conjunto de habilidades en particular, es fácil traducirlas a otras áreas de desarrollo..
En un intento de asegurarnos de que estamos llegando a la audiencia más amplia posible, nuestro objetivo es publicar contenido dirigido directamente a los principiantes que tengan curiosidad por un determinado idioma, plataforma o aplicación..
Y en este artículo, nos centraremos exclusivamente en jQuery. Específicamente, vamos a echar un vistazo de alto nivel a todo lo que ofrece jQuery y cómo puede ayudarnos, y vamos a revisar algunos de los proyectos que también se han materializado en la biblioteca inicial..
Aprender JavaScript: la guía completa
Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..
Lanzado por primera vez en 2006 por John Resig, jQuery se propuso ser una biblioteca de JavaScript multiplataforma que facilitaba la escritura de soluciones del lado del cliente.
En el momento en que se lanzó, fue especialmente útil debido a las inconsistencias que existían entre las implementaciones de JavaScript en Internet Explorer, Firefox y, finalmente, en Google Chrome (que no se lanzó hasta 2008).
Según lo definido por Wikipedia:
jQuery es una biblioteca de JavaScript multiplataforma diseñada para simplificar las secuencias de comandos HTML del lado del cliente. jQuery es la biblioteca de JavaScript más popular en uso hoy en día, con la instalación en el 65% de los 10 millones de sitios con mayor tráfico en la Web. jQuery es un software gratuito de código abierto con licencia de la licencia MIT.
Además, el propio sitio web de jQuery dice:
jQuery es una biblioteca de JavaScript rápida, pequeña y con muchas funciones. Hace que cosas como la manipulación y manipulación de documentos HTML, el manejo de eventos, la animación y Ajax sean mucho más sencillos con una API fácil de usar que funciona en una multitud de navegadores. Con una combinación de versatilidad y extensibilidad, jQuery ha cambiado la forma en que millones de personas escriben JavaScript.
Pero, ¿qué significa esto para nosotros como desarrolladores? Quizás la mejor manera de que entendamos lo que ofrece la biblioteca es examinar lo que dice ofrecer..
Cuando un navegador presenta una página web, es una representación visual de lo que se conoce como DOM (o el modelo de objeto de documento). Este modelo puede modelarse conceptualmente como una estructura de datos de árbol donde hay ciertos nodos, cada uno con raíces y hojas.
Por ejemplo, vea esta imagen tal como lo proporciona el Libro de pasos en la Web:
Cuando está trabajando con jQuery, puede recorrer fácilmente los contenidos del DOM para alcanzar o encontrar los nodos, elementos o valores que desea recuperar..
Esto significa que si estás buscando el texto de un div Elemento que tiene una identificación única, es fácil de hacer..
Accentsconagua
/ ** * Este código busca un div con el ID de "mi elemento único" * y luego lo elimina de la vista. * / $ ('div # my-unique-element') .hide ();Si estás tratando de recorrer todos los lapso Elementos, puedes hacer eso también:
/ ** * Esta es la forma básica de configurar un bucle en jQuery. * Tomará todos los elementos de la página y luego * le permitirá recorrerlos. * / $ ('span') .each (function () // Procesa el elemento span aquí);Revisaremos esta funcionalidad en particular un poco más en la siguiente sección para mostrar algunos de los trabajos adicionales que puede realizar para manipular la página..
Por supuesto, estos ejemplos son simples, y las cosas puede Consiga más complicado, especialmente cuando introducimos el método de encadenamiento. Por ejemplo:
$ excerpt.on ('keydown', function (evt) if ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) if (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);). on ('keyup', function () if (user_has_pasted_content (keymap)) resize_textarea (this) ; mapa de teclas = [];);En este punto, no se supone que sepa qué está pasando con el código, pero está destinado a mostrarle qué tan útil puede ser jQuery en ciertas situaciones mediante el uso de funciones de ayuda y el encadenamiento de métodos..
Basta con decir que el poder de jQuery radica en su capacidad para consultar el DOM (de ahí el nombre jQuery) y luego realizar ajustes mediante el uso de una API bien documentada (que está repleta de ejemplos de cómo usar cada función).
Se podría argumentar que todo lo demás se deriva de esa característica solo. Así que con eso dicho, vamos a seguir viendo algo de lo que parece.
Cuando se trata de manipular realmente el DOM, jQuery tiene mucho de funciones que nos permiten cambiar lo que ven nuestros visitantes..
Algunas de estas funciones son simples, como permitirnos espectáculo o esconder Elementos que no son visibles cada vez que se carga una página. Otras funciones nos permiten crear nuevos elementos y adjuntar a un elemento existente, o anteponer frente a una lista completa.
Si estás tratando de recorrer todos los lapso Para agregar un atributo de clase a los elementos, puede hacerlo también:
/ ** * Esta es la forma básica de configurar un bucle en jQuery. * Tomará todos los elementos de la página y luego * les agregará un atributo de clase personalizado. * / $ ('span') .each (function () $ (this) .addClass ('my-custom-class'););Esto apenas roza la superficie de la funcionalidad de manipulación de DOM disponible en jQuery. Al observar la API, en la sección Manipulación, puede ver cuántas opciones tenemos disponibles (junto con buenos ejemplos).
Para dar más ejemplos, también podemos:
Recuerde que una de las cosas que hacen de jQuery una solución atractiva para tantos desarrolladores es que todas las funciones y ejemplos que vemos en este artículo son compatibles con todos los navegadores..
Si eres nuevo en JavaScript, una cosa que es clave para entender cómo funciona con la página que se muestra en el navegador web es que responde a varios eventos..
Es decir, cuando un usuario hace clic en un elemento, hace una pulsación de tecla o hace clic con el mouse, el navegador emite una señal correspondiente al evento que ocurrió. Esto es lo que nos permite aprovechar la interacción del usuario con el navegador..
Concretamente, cada vez que un usuario lo hace. alguna cosa A la página, podemos responder utilizando un evento personalizado. El problema es que no todos los navegadores implementan eventos de la misma manera (es por esto que se necesita una especificación, pero eso es contenido para otra publicación).
Afortunadamente, jQuery hace esto mucho más fácil al definir un nombre coherente para todos los eventos, de modo que podamos usar el mismo nombre para un evento al que intentamos responder y funcionará en todos los principales navegadores.
Cuando salió jQuery por primera vez, Flash seguía siendo relativamente popular, y las animaciones generales en la web no estaban completamente muertas.
Sin embargo, cuando hablamos de animación en el contexto de jQuery, no estamos hablando del mismo tipo de efectos o comportamientos que estamos acostumbrados a ver con la tecnología más antigua. En cambio, estamos hablando de efectos que dan a los usuarios comentarios que alguna cosa Ha pasado en la pantalla. Además, es menos invasivo y puede agregar un buen sentido de estilo a una página o aplicación cuando se usa correctamente (aunque se puede abusar de cualquier cosa).
Puede ver la API de todos los efectos en esta página, pero vale la pena señalar que los efectos de jQuery pueden variar desde el manejo del fundido y desvanecimiento simple de elementos o el deslizamiento de elementos para ver algo más complejo, como la manipulación de la cola de efectos registrados. disparar contra un elemento.
Por supuesto, este último caso asume que tienes un poco de experiencia con la API de efectos, pero es algo que viene naturalmente dado suficiente tiempo con la biblioteca y la documentación..
Si no está familiarizado con Ajax, es esencialmente una forma en que una página web puede hacer una llamada al servidor, manejar la respuesta y actualizar una parte de una página sin tener que actualizar toda la página. Aunque la tecnología ha existido desde hace bastante tiempo, sigue siendo algo realmente genial y puede proporcionar una funcionalidad realmente nítida dentro del contexto de una página o aplicación web cuando se usa de manera adecuada y efectiva..
Aunque el soporte para Ajax no es tan malo como lo fue hace cinco o diez años, la implementación de la API en todos los navegadores puede variar ligeramente. Esto significa que tenemos la tarea de escribir el código Ajax específicamente para un navegador que proporciona Microsoft, que proporciona Google, que proporciona Apple, que proporciona Chrome, etc..
Al menos, ese es el caso sin jQuery. Gracias a su soporte para Ajax, podemos aprovechar el Ajax de varias maneras diferentes sin tener que meternos en las inconsistencias entre navegadores. De hecho, es trivialmente fácil de manejar OBTENER y ENVIAR solicitudes, mientras que también tiene la capacidad de hacer llamadas mucho más avanzadas utilizando el $ .ajax método.
Una vez que te acostumbras a tener la API disponible en el núcleo de tu aplicación o a tu disposición, es difícil imaginar que no trabajes con ella (o con algo parecido).
Una característica que ofrecen muchos marcos y bibliotecas del lado del servidor es la capacidad de crear extensiones al código base básico. Las bibliotecas y los marcos modernos del lado del cliente lo permiten, y jQuery no es diferente.
Digamos, por ejemplo, que trabaja en un nicho particular en el que se encuentra creando la misma funcionalidad para cada proyecto. O bien, si tiene un producto que está vendiendo y tiene un poco de código personalizado que necesita integrarse con jQuery, pero puede requerir diferentes parámetros según el proyecto..
Que haces entonces?
Afortunadamente, jQuery soporta plugins. Esto significa que nosotros, como desarrolladores, no solo tenemos la capacidad de aprovechar los complementos que otros han escrito (algunos de los cuales están disponibles en el sitio web de jQuery, otros están disponibles en GitHub), sino que también podemos desarrollar nuestros propios complementos..
Luego podemos reutilizar este código en nuestros propios proyectos, o ponerlos a disposición en sitios como GitHub para que otros puedan ofrecer contribuciones, correcciones, características, etc..
Desde su inicio, jQuery se ha convertido en algo más que una biblioteca de JavaScript que nos ofrece la capacidad de realizar operaciones simples y potentes de una manera compatible con varias plataformas..
Además de la biblioteca central, jQuery también ha dado como resultado otros dos proyectos notables que vale la pena mencionar antes de que terminemos este artículo. Aunque no vamos a ver los detalles de lo que ofrece cada proyecto, vamos a tener una visión de alto nivel de cada proyecto, aunque solo sea por estar al tanto de lo que tenemos disponible si lo necesitamos para futuros trabajos..
Desde la página de inicio de jQuery UI:
jQuery UI es un conjunto curado de interacciones de interfaz de usuario, efectos, widgets y temas creados sobre la biblioteca de jQuery JavaScript. Ya sea que esté creando aplicaciones web altamente interactivas o simplemente necesite agregar un selector de fecha a un control de formulario, jQuery UI es la opción perfecta.
Esta biblioteca se publicó por primera vez en 2007, aproximadamente un año después de jQuery. Funciona como una biblioteca complementaria de jQuery, ya que aprovecha la compatibilidad multiplataforma de la biblioteca para ayudar a crear widgets que se pueden usar en un sitio web..
Muchos de los widgets incluyen piezas de funcionalidad de uso común. Por ejemplo:
También hay características avanzadas como efectos, utilidades e interacciones. Todo lo que hemos cubierto hasta ahora (así como lo que no tenemos) incluye una amplia variedad de devoluciones de llamada, atributos y funciones que nos permiten interactuar con ellos en la mayor medida posible..
Todas las características mencionadas anteriormente también ofrecen varios temas para asegurarse de que se ajusten a la apariencia de su sitio web. Finalmente, todas las características descritas aquí e incluidas en el sitio están bien documentadas..
Desde la página de inicio de jQuery Mobile:
jQuery Mobile es un sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web y aplicaciones con capacidad de respuesta accesibles para todos los teléfonos inteligentes, tabletas y dispositivos de escritorio..
Esta biblioteca es la introducción más reciente a la familia de bibliotecas que se lanzará en 2010 (con la última versión estable en 2014).
Al igual que su contraparte de UI, ofrece una API bien documentada y temas personalizados que son ideales para los diversos dispositivos a los que puede dirigirse su proyecto..
Mientras que las dos bibliotecas anteriores ofrecen un conjunto de funciones multiplataforma que nos permiten escribir jQuery y los widgets que lo acompañan de una manera relativamente fácil, jQuery Mobile incluye un marco CSS que nos permite diseñar interfaces de usuario que son ideales para la naturaleza de nuestra proyecto respectivo.
El marco incluye:
A partir de ahí, la biblioteca ofrece lo que esperaría de un proyecto orientado a facilitar el desarrollo web para varios dispositivos móviles. Estos incluyen cosas como:
Finalmente, el número de navegadores que todavía están disponibles y se utilizan en la naturaleza es alto. Aunque hemos visto una disminución en el uso de versiones anteriores de Internet Explorer y una adopción más amplia de Chrome, todavía tenemos ciertos usuarios que se apegan a los navegadores más antiguos por varias razones.
A veces, estos usuarios se encuentran en navegadores antiguos debido a la naturaleza de la intranet de su empresa. A veces tiene que ver con los dispositivos móviles y / o teléfonos que han sido asignados para su trabajo. Y a veces simplemente tiene que ver con la incapacidad de actualizarse a algo mejor..
Sin embargo, no importa. jQuery Mobile ofrece soporte para la mayoría de los navegadores y sistemas operativos que están disponibles actualmente. Si no está seguro de si la biblioteca es compatible con la plataforma a la que está apuntando, siempre puede consultar la página de soporte del navegador.
Comprender qué es jQuery (y qué no lo es) y cómo se relaciona con JavaScript es importante para que sepa qué se está haciendo por usted y qué puede hacer cuando necesite trabajar con la biblioteca..
Como se mencionó anteriormente, algunos pueden argumentar que primero debe aprender JavaScript y luego aprender jQuery; otros pueden argumentar que aprender jQuery es una excelente manera de trabajar hacia JavaScript.
En cualquier caso, jQuery es una biblioteca de larga data en la economía de JavaScript y se utiliza en varios proyectos muy populares (como WordPress), por lo que aprenderlo te dará una ventaja de varias maneras..
JavaScript se ha convertido en uno de los idiomas de facto de trabajar en la web. No deja de tener sus curvas de aprendizaje, y también hay muchos marcos y bibliotecas para mantenerte ocupado. Si está buscando recursos adicionales para estudiar o usar en su trabajo, vea lo que tenemos disponible en el mercado de Envato.
Si eso no es suficiente, también hay mucha documentación y código de código abierto disponibles para que los revise y lea. También hay complementos ampliamente disponibles y un blog activo para mantenerlo al tanto de todas las noticias que ocurren con el desarrollo de la biblioteca..
Para aquellos que estén interesados en JavaScript (particularmente en el contexto de WordPress), siéntase libre de seguirme en mi blog y / o Twitter en @tommcfarlin. También puedes ver todos mis cursos y tutoriales en mi página de perfil.
No dude en dejar cualquier pregunta o comentario en la siguiente fuente, y trataré de responder a cada una de ellas..
