JavaScript Avanzado: Trabajar con jQuery

Bienvenido al curso de KnowledgeCity en JavaScript avanzado. En este capítulo de nuestro curso, veremos jQuery. Hablemos un poco primero sobre por qué es posible que desee considerar el uso de jQuery, porque hay muchas de las bibliotecas de JavaScript que existen. ¿Qué tiene de bueno este? Bueno, en primer lugar, es bastante popular. Leí una estadística el otro día que decía: 96% de todos los sitios web que usan JavaScript usan jQuery, que es más del 75% de todos los sitios. Entonces, es bastante popular. Tiene que haber una razón para eso y sí, hay razones. Puede hacer más con menos código. En primer lugar, manipular el modelo de objetos de documento. Con JavaScript normal, digamos, por ejemplo, que quería seleccionar todos los párrafos del DOM, Lo haría con document.querySelectorAll por ejemplo. Con jQuery, eso es todo lo que tengo que hacer. Y cuanto menos código podamos escribir, cuanto más código podamos lanzar y ser más productivos, y definitivamente queremos eso. Entonces jQuery sobresale en la manipulación DOM. También hace que las llamadas AJAX sean dramáticamente más fáciles que entre comillas, JavaScript normal funcionaría. Y tiene una biblioteca de efectos bastante grande. que aprovecha los efectos de CSS. Y lo importante es porque tampoco queremos preocuparnos por esto, abstrae los problemas de varios navegadores. jQuery es solo una biblioteca, es una biblioteca bastante extensa como verá una vez que lo instalemos en esta lección. Pero una de las cosas que hace ¿Se abstraen los problemas de varios navegadores? para que no tengamos que preocuparnos. Nuestro código jQuery debería ejecutarse igualmente bien en cualquier tipo de navegador sin que tengamos preocuparse por la mayoría de las especificaciones del navegador en el mundo. Entonces, habiendo dicho todo eso, con suerte, hemos hecho un caso a dónde vas estar interesado en hacer esto. Veamos las formas en que podemos instalar esto. Ahora para este curso, Voy a usar Visual Studio. Y este es el Visual Studio completo, Community Edition más bien es lo que tengo aquí. Entonces, todas las herramientas están disponibles aquí, puedes descargarlo gratis si no lo tienes. Ahora, me doy cuenta de que hay muchas de diferentes lugares para los que quizás quieras escribir jQuery o de las diferentes tecnologías que utiliza junto con él, así que mostraré un par de enfoques diferentes aquí. y luego hablaremos de lo que tenemos que hacer para convertirlo específicamente en parte de la aplicación que estoy corriendo aquí. Pero antes que nada, lo más fácil es ir a buscarlo. Entonces podemos ir a jquery.com, ahí está la documentación, muy buenos ejemplos de cómo utilizar esto. Pero puedes descargar jQuery directamente desde aquí. La versión actual en ese momento de esta grabación es 3.5.1, que es lo que voy a usar en mis proyectos. Si no desea instalarlo directamente, como ocurre con la mayoría de las bibliotecas de cualquier tipo de popularidad, también puede utilizar el CDN. Por lo tanto, solo está vinculando a la versión más cercana de, y con jQuery te dan estas cuatro opciones allí. El descomprimido, el minificado, el delgado y el delgado minificado. Entonces, dependiendo de dónde se encuentre en su proyecto, usarías diferentes aquí. Normalmente, usamos la versión sin comprimir en tiempo de desarrollo para que podamos hacer algunas depuraciones, y luego el minificado en el momento de la producción para que nuestra aplicación es más eficaz, se ejecuta de forma más fluida, los archivos son más pequeños. Todo ese tipo de cosas. Si desea utilizar la CDN, simplemente haz clic en eso y ahí está el enlace de tu secuencia de comandos. Así que puedo copiar eso allí, y como dice, el origen cruzado y la integridad están ahí para la verificación del SRI. Entonces, si voy a hacer eso, eso es todo lo que tengo que tener en cualquier documento en el que quiera tenerlo disponible. Las otras opciones, si usa NPM, que podemos hacer desde Visual Studio. Lo que tengo que hacer es abrir una línea de comando aquí, y una pequeña herramienta que tengo para eso, Abra la línea de comandos. Esta es una extensión que puede agregar a Visual Studio. Entonces, si no usa Visual Studio específicamente, no se preocupe demasiado por esta parte. Pero me gusta esto como una extensión y puedes agregar extensiones aquí a través del menú Extensiones. Pero Open Command Line me da PowerShell o mi símbolo del sistema Dev o el símbolo del sistema predeterminado. Y para este, realmente no importa. Pero lo lindo que no tengo de qué preocuparme cuando hago eso, es notar que me pone justo ahí en la carpeta en la que necesito estar, porque lo que voy a hacer aquí es simplemente instalar jQuery usando NPM, entonces Node Package Manager. Y el nombre del paquete es simplemente jQuery. Y puedes ver a partir de eso parece que no tenemos NPM instalado. Bueno, eso es bastante fácil de arreglar. Aquí vamos. Puede obtener Node js y NPM juntos. Así que seguiré adelante e instalaré ese. Y dejaremos que eso haga lo suyo y regresaremos en un segundo. Muy bien, volvemos a atravesar la magia del video. Veamos si NPM está instalado actualmente. Eso es bueno, obtenemos la documentación. Y asegurándose de que jQuery entre allí, de nuevo, es un asunto bastante simple del paquete se llama simplemente jQuery y esto debería tenerlo todo instalado para nosotros. Entonces, en este proyecto en particular, lo que terminó haciendo por mí estaba creando una carpeta de módulos de nodo. Ahora, si esto se muestra atenuado en su proyecto o si no lo ves en absoluto, así es como lo obtenemos en Visual Studio. En primer lugar, queremos asegurarnos de que se muestren todos los archivos. está mostrando todos los archivos. Y verá carpetas y archivos aquí que en realidad no se consideran parte de su solución pero están en el directorio. Entonces, si el tuyo se muestra así, por ejemplo, luego queremos incluir en el proyecto allí, para que sea parte del proyecto. Y ahí es donde terminarán todos nuestros paquetes de nodos. Y ahí es donde está jQuery. Ahora, para este tipo de proyecto en particular, Estoy haciendo una aplicación ASP.NET Core. Y para este tipo de proyecto en particular, para que se sirvan archivos estáticos, Tengo que hacer un cambio en el archivo startup.cs. Entonces, nuevamente, si no está usando Visual Studio o la forma del proyecto de aplicación principal para construirlo, no te preocupes por esta parte, obtenga NPM para instalar jQuery, sin embargo, puede hacerlo y luego siga adelante y úselo. Pero para este tipo de aplicación en particular, necesitamos esta llamada para usar archivos estáticos, es solo algo que la aplicación necesita. Y solo estoy tomando la ruta raíz de mi aplicación, tachando la carpeta de módulos de nodo allí, para que sirva al jQuery de esa ubicación en particular. Ahora, cuando termine haciendo eso, vuelve a mi página para obtener la referencia, sigue siendo solo una referencia de guión. Y la fuente es que vamos a ir desde los módulos de nodo hacia abajo. Así que teníamos nuestro paquete jQuery allí. Y, veamos, creo que está en otra subcarpeta. Así que hay dist y solo voy a usar cualquier archivo jQuery que esté allí. Entonces ese sería jQuery.js. Entonces cualquiera de esas formas está bien. Sin embargo, desea tener ese script allí, lo que sea que funcione para ti, entonces está bien. Y probemos y asegurémonos que en realidad tenemos algo. Lo que siempre llamamos es la función jQuery. Y entonces puede usar la palabra real, jQuery. Pero lo que probablemente verá la mayoría de la gente haciendo está usando el signo de dólar. Entonces podemos hacer cualquiera de esos, está bien. Ahora hay una posibilidad que alguna otra biblioteca usaría el signo de dólar como algo significativo. Entonces, ¿qué puedes hacer entonces? es básicamente ceder el control del signo del dólar a esa otra biblioteca si la tienes, y puede hacer lo que se llama modo sin conflicto. Entonces, por ejemplo, podría nombrar esto como quiera, jq es bastante estándar, y luego llamaríamos jquery.noConflict. Así que ahora, para el resto de lo que haremos, jq llama a la función jQuery y luego podemos hacer lo que sea que necesitemos hacer. Documento listo es algo que te encontrarás usando con bastante frecuencia en aplicaciones jQuery. Esto es lo que se ejecuta cuando todo se carga. Entonces, no necesito ningún modo de conflicto, Simplemente voy a usar la función jQuery aquí. Y lo que estamos haciendo es mirar el objeto del documento. y luego todo esto se ejecuta cuando nuestro documento se carga. Así que hagamos un pequeño hola mundo aquí, y asegúrese de que el método que elegimos funcione. Voy a seguir adelante y usar este CDN por ahora. Y salvaremos todo y deberíamos tener una página para nosotros. ¿Listo para el hola mundo más memorable de todos los tiempos? Mejor que todos los demás que hayas visto. Aquí vamos. Hola. Mira, está mal escrito, es muy memorable. Entonces, en esta lección, analizamos una variedad de formas para instalar jQuery en su proyecto. Estén atentos para la próxima lección, veremos más en la función jQuery y el conjunto de elementos envuelto y cómo utilizar los selectores.