Cómo utilizar la biblioteca jquery. Interfaz o sintaxis de programación jQuery. Conectando JQuery usando CDN

jQuery es una biblioteca de JavaScript que se centra en la interacción de JavaScript, HTML y CSS.

¿Qué puede hacer jQuery?

• Contacta con cualquier persona elemento DOM (modelo de objeto documento) y no sólo manejarlos, sino también manipularlos.
• Trabajar con eventos.
• Es fácil implementar varios efectos visuales.
• Trabajar con AJAX (muy tecnología útil, que permite comunicarse con el servidor sin recargar la página, pero por ahora no lo tocaremos).
• Tiene una gran cantidad de complementos diseñados para crear elementos de interfaz de usuario.

Cómo funciona

Primero, debe descargar la biblioteca desde el sitio web de los desarrolladores o, si es necesario, descomprimirla y moverla (la biblioteca) a la misma carpeta donde se encuentran nuestras páginas html (esto es opcional, pero las direcciones de todos los ejemplos posteriores se escribirá en base a esta estructura).

Ahora necesitamos conectar jQuery a la página html. Para esto, como recordarás, existe una etiqueta en html. , que es responsable de conectar archivos de script externos (). Agreguemos esta etiqueta a la página html (también conectamos la página script.js con funciones js): * Preste atención al nombre del archivo. Aquí se utiliza la biblioteca jquery-1.2.6, pero puede descargar una versión más reciente, por lo que sus números pueden diferir.*

Entonces, en nuestra carpeta tenemos una página html, una página con estilos (style.css), una página con funciones js (script.js) y (jquery-1.2.6.js). Hagamos este ejemplo (haga clic en los botones):

Efectos jQuery Efecto Show() Efecto SlideDown() Efecto Animate() Veamos cómo se hace esto. En la página html deberíamos tener tres rectángulos (divs) y tres botones: Efectos jQuery Efecto Show() Efecto SlideDown() Efecto Animate()

emitiremos apariencia y haz los rectángulos invisibles usando . código estilo.css:

#kv1, #kv2, #kv3( ancho:80px; alto:100px; flotante:izquierda; fondo:rojo; margen:5px; color:blanco; pantalla:ninguno; )

Ahora lo más interesante es que en la página script.js escribimos el código de las funciones que se activarán cuando se haga clic en los botones:

función addEffect1())( $("#kv1:hidden").show(); ) función addEffect2())( $("#kv2:hidden").slideDown("slow"); ) función addEffect3()) ( $( "#kv3:hidden").show().animate(( fontSize:"36px" ), 3000);

¿Qué hacen estas funciones?

Función agregarEfecto1() ve $ ("#kv1: oculto") y entiende que necesita encontrar un elemento con id="kv1" que tenga propiedad oculta(invisible). Luego ella ve .espectáculo() y entiende que el elemento encontrado debe hacerse visible.

Función agregarEfecto2() ve $ (signo de dólar) y se da cuenta de que es jQuery, luego ve ("#kv2: oculto") y comprende que necesita encontrar un elemento con id="kv2" que tenga la propiedad oculta. Luego ella ve .slideDown ("lento") y entiende que el elemento encontrado debe mostrarse lentamente ("slow") de arriba a abajo (slideDown).

Función agregarEfecto3() ve $ (signo de dólar) y se da cuenta de que es jQuery, luego ve ("#kv3: oculto") y comprende que necesita encontrar un elemento con id="kv3" que tenga la propiedad oculta. Luego ella ve .espectáculo() y entiende que el elemento encontrado debe hacerse visible. Entonces ella ve .animate((tamaño de fuente:"36px"), 3000) y comprende que el tamaño de fuente debe aumentarse a 36 píxeles en 3 segundos (3000) (fontSize:"36px")

Así es como realmente funciona jQuery. Mira lo cortas que son nuestras funciones e imagina cómo serían si decidiéramos escribirlas en javascript puro. ¿No es jQuery asombroso? sobre como hacer efectos graficos, la animación, el arrastre y la clasificación de objetos y, en general, el trabajo con esta biblioteca se analizarán en lecciones posteriores.

Al final de esta lección me gustaría hablar sobre los conceptos básicos de jQuery. La sintaxis del operador jQuery se puede representar aproximadamente de la siguiente manera:

Dónde selector- un elemento o elementos con los que haremos algo.

acción- qué haremos exactamente con los elementos seleccionados. Podemos añadir cualquier efecto, estilo css, cambiar el código html, etc. Cualquier evento se puede indicar aquí.

propiedades de acción- si están previstos en la acción.

Eso es todo por hoy, en la próxima lección estudiaremos los selectores.

Antes de comenzar a explorar la biblioteca jQuery, debemos conectarla a nuestro documento. Para hacer esto, creemos lo más pagina sencilla, sin lujos – index.html, y en él conectaremos nuestro jq (abreviatura de jQuery, empieza a acostumbrarte).

¿Cómo incluir la biblioteca jQuery? ¿Y dónde puedo conseguir el código?

Hay 2 formas de conectar la biblioteca al sitio. Antes de comenzar a describir ambos métodos, no lo repitas inmediatamente después de mí. Primero, lea sobre estos métodos y luego elija el método que más le convenga y conecte todo. No te preocupes: jQuery se habilita con una línea de código, por lo que si no tienes la memoria de un pez, estarás bien.

El primer método es descargar desde jquery.com.

Existe un sitio web maravilloso: este es el sitio web oficial de la biblioteca. Como cualquier biblioteca, jq fue desarrollada por programadores simples. Se dieron cuenta de que podían hacer su lengua más pequeña programación javascript, comenzó a trabajar duro y durante mucho tiempo, y el resultado fue la biblioteca más extendida, amada por los programadores web.

¡Importante! Se puede hacer clic en todas las imágenes.

Conectando la biblioteca jQuery desde el sitio web oficial.

Vamos al sitio web oficial;

Haga clic en el enlace "Descargar";

Si necesita una versión ligera (comprimida), haga clic en el enlace del bloque “3”;

Si necesita una versión para desarrolladores web, haga clic en el enlace del bloque “4”;

Descargando la biblioteca:

Súbelo a la carpeta donde se encuentra el archivo index.html.

¿Cuál es la diferencia entre la versión comprimida y la versión para desarrolladores web?

En las imágenes a continuación mostré pequeños fragmentos de código de dos versiones.

En principio, se trata de 2 versiones absolutamente idénticas. La única diferencia entre estos archivos es que en la versión comprimida de jQuery, todo el código está escrito en una línea. En jQuery, que está destinado a desarrolladores, todo el codigo va con tabulaciones, espacios y, en consecuencia, se puede leer fácilmente.

Dado que el navegador (es decir, el navegador procesa este código) no ve la diferencia entre estos dos archivos, es mejor utilizar la versión comprimida en sus proyectos "en vivo", porque es mucho más ligera (debido a la ausencia de espacios). . Y como sabes, cuanto menos pesan archivos fuente sitios: más rápido se carga, lo que tiene un efecto positivo en el factor de comportamiento.

Bloque “1”: el tamaño del archivo de la versión comprimida es de 96 KB.

Bloque "2": el tamaño del archivo de la versión para desarrolladores es de 280 KB.

¡La versión completa es casi tres veces más pesada!

No comprimido versión jQuery Sirve para profundizar en esta biblioteca con más detalle. Si eres un desarrollador muy meticuloso, puedes eliminar funciones innecesarias, agrega el tuyo, etc.

Personalmente, nunca he subido allí; durante tres años no hubo tal necesidad. Y realmente no soy partidario de leer 10 mil líneas.

Puedes distinguir estas 2 versiones por su nombre. En la versión comprimida, .min siempre va antes de .js (en la figura esto se muestra en el bloque numerado “3”). Si ha trabajado en desarrollo web durante suficiente tiempo, probablemente haya notado este "truco" en otras bibliotecas.

¿Cómo conectar jQuery?

Sí, la conexión se produce de la misma manera que css, solo que usando una etiqueta diferente.

¡Atención! Todo el código que escribirás usando jq debe escribirse debajo de la conexión de esta biblioteca. De lo contrario, recibirá un error y nada funcionará.

La segunda forma es utilizar Google.

¿Por qué te pedí que no te apresuraras a descargar esta biblioteca? Es simple: puedes conectarlo directamente con Google.

Como sabes, Google no es sólo sistema de búsqueda, pero en esta corporación gigante hay muchas características diferentes que se crean para facilitar la vida de un programador.

Google también utiliza una versión comprimida. Y en este código puedes encontrar una adición importante: contiene tecnología ajax(hablaremos de esto más adelante). Esto es muy cosa útil, y tarde o temprano lo necesitarás. Y si conecta la biblioteca con Google, no tendrá que perder el tiempo buscando y conectando todas las funciones de ajax.

Porque google - muy gran compañía, sus servidores nunca fallarán y, por lo tanto, puede estar completamente seguro de que jQuery siempre funcionará en su sitio.

Pero hay un inconveniente: si conecta la biblioteca de Google, al desarrollar un sitio necesitará tener acceso constante a Internet.

Bueno, ahora que he descrito ambos métodos, puedes elegir el que sea más adecuado para ti y conectarlo a tu documento html.

Pruebas

Una vez incluida la biblioteca, es recomendable probarla. A continuación, he proporcionado parte del código jq; no entre en demasiados detalles (esto se discutirá en lecciones futuras) sobre lo que está escrito allí, simplemente escriba lo mismo y observe el resultado.

Algún texto

Después de iniciar la página, deberían aparecer las palabras "Hay algo de texto". Y después de hacer clic en este texto, debería desaparecer. Si todo salió exactamente así para ti, entonces hiciste todo bien.

PD A veces te encuentras con preguntas: “¿cómo conectar jQuery a Joomla 3?”, “¿cómo conectar jQuery a Bitrix?”, “¿cómo conectar jQuery a WordPress?”. No importa qué motor utilice en el sitio, el método de conexión es siempre el mismo. Colocamos la línea requerida en la plantilla y todo funcionará para usted.

Amigos, hola.

Inesperadamente, descubrí que en el blog, de hecho, no hay ni una sola mención de la increíble biblioteca para trabajar con JavaScript: jQuery.

Si crees que por conveniencia y desarrollo rápido La interacción con el cliente JavaSciprt es bastante simple, lo cual no parece ser complicado, puedo responder una cosa: casi seguro que nunca te has encontrado con ningún proyecto complejo en tu camino. Por supuesto, para la interacción más simple con una página (por ejemplo, solicitar el contenido de un elemento por su ID), no se necesitan bibliotecas. Pero imagine que el elemento deseado se encuentra en algún lugar en las profundidades del código y para acceder a él necesita recorrer el árbol de elementos y clases superpuestos. En este caso, deberá escribir su propia implementación para la búsqueda. Sin embargo, las sorpresas apenas comienzan: el código que funciona perfectamente en Firefox puede negarse por completo a funcionar en IE o Chrome. En consecuencia, tendrás que buscar método universal, que funcionaría en todas partes, o usar “muletas”, lo que lleva bastante tiempo, ya que implica complementar el código con comprobaciones del funcionamiento de un método en particular.

Pero buenas noticias está presente - hace ya muchos años que hay personas que han recorrido este camino, personas que no sólo conocen los muchos trampas, pero también cómo superarlos. Entonces, conozca una de las mejores bibliotecas de JavaScript: ¡jQuery!

¿Qué permite esta “bestia”? ¿Realmente necesitas aprender los conceptos básicos y la nueva sintaxis de otra biblioteca más? Si lo prueba, podrá acceder fácilmente a los elementos de la página utilizando el modelo selector CSS, manipular elementos, clases y atributos, y mucho más. Pero en realidad, tú decides. Sólo tenga en cuenta que después de trabajar con jQuery será difícil obligarse a programar a la antigua usanza, en formato . Bueno, te lo advertí.

Antes de pasar a los temas principales del artículo, me permitiré algunas explicaciones que serán útiles más adelante. Sucedió que el idioma marcado de hipertexto- - en constante desarrollo y continúa haciéndolo ahora. A partir de la cuarta versión, XHTML se separó de ella, lo que permite un procesamiento de documentos ligeramente diferente: todo el código debe ser absolutamente válido y libre de errores (de lo contrario, los navegadores pueden detener el procesamiento posterior), mientras que HTML permite cualquier libertad, y todos los navegadores deben mostrar la página al menos de alguna manera. Para saber qué especificación admite un sitio, simplemente mire el comienzo del código de la página y busque la etiqueta DOCTYPE.

Los siguientes documentos siguen la especificación XHTML:

La especificación HTML5 tiene una definición simplificada:

Lo esencial diferencia significativa- XHTML requiere que todas las etiquetas estén cerradas. Si un elemento no tiene una etiqueta de cierre al final, utilice una barra diagonal /. Además, los nombres deben especificarse en minúscula. Unos cuantos ejemplos le ayudarán a entender de qué estamos hablando:

HTMLXHTML

enlace		enlace

¿Dónde puedo descargar jQuery?

Lo más sencillo es acudir a la web oficial. Allí, además de la biblioteca en sí, puede encontrar muchas más cosas útiles diferentes, desde jQuery UI (para una creación más fácil y conveniente interfaz de usuario) a una variedad de complementos, ¡de los cuales hay más de 2500!

Más manera conveniente, que ni siquiera requiere cargar archivos en su sitio web; utilice un servicio de alojamiento de biblioteca JS. Las ventajas de este método son que puede elegir cualquier versión, que siempre se encuentra en la dirección indicada.

¿Cómo conectar la biblioteca jQuery a tu página?

Si prefiere almacenar todos los archivos en su servidor, sería mejor asignar un solo lugar al que se puedan agregar complementos u otras bibliotecas más adelante. Sea esta la carpeta /scripts/ en la raíz del sitio. Vaya a la página del sitio web oficial (enlace justo arriba). Aquí se nos ofrecen dos versiones, 1.xy 2.x, de las cuales es preferible elegir la última. La primera versión lleva consigo un código obsoleto, por lo que se necesitan varios más espacio. Para publicar en un sitio web, es mejor elegir la versión comprimida; se trata de un archivo de tamaño lo más pequeño posible, que proporciona las mismas capacidades que la versión sin comprimir, con la diferencia de que esta última se utiliza mejor para el desarrollo. conserva el formato y es conveniente ver cómo se ha implementado una u otra función. Digamos que se selecciona el archivo jquery-2.1.1.min.js, que debe cargarse en el directorio /scripts/. En este caso, el código de conexión será así (solo necesitas usar 1 opción, según el valor de la etiqueta DOCTYPE):

o

Si planea conectar archivos desde un recurso de alojamiento para bibliotecas JS:

o

Eso es todo, después podrás utilizar todo el poder de jQuery.

Conceptos básicos de jQuery

Dado que jQuery es una biblioteca escrita en JavaScript, el código debe escribirse en lugares que lo permitan. EN caso general- entre etiquetas y .

La selección de un elemento en JavaScript se realizó mediante el método document.getElementById('element id'), varios: document.getElementsByTagName('tag elemento deseado'), después de lo cual era necesario recorrer la lista en bucle y realizar la acción necesaria. Esto es mucho más fácil en jQuery y acción requerida se puede aplicar a todos los elementos a la vez. Para el muestreo se utiliza la siguiente construcción:

jQuery("selector").func()
Dónde selector- una regla que define una parte de la página (etiqueta, clase, identificador),
función- un método que se aplicará a todos los elementos recibidos.

Selectores jQuery básicos

La funcionalidad es muy similar a la de CSS, por lo que si ha estado diseñando documentos, será mucho más fácil. Se pueden distinguir los siguientes:

• * - un selector universal que selecciona absolutamente todos los elementos;
• etiqueta: un selector de elementos que representa simplemente el nombre de cualquier etiqueta (por ejemplo: p, div, span, a); se seleccionan todas las etiquetas solicitadas en la página;
• .class_elems - selector de clases ();
• #id_elem - selector de identificador ()
• etiqueta - selector de atributos ();
• elem1 elem2 - combinador de descendientes - elementos (etiquetas, clases, identificadores) de elem2 ubicados dentro de elem1 (p i →

  texto

  );
• elem1 > elem2 - combinador de “hijos” - elementos elem2 directamente anidados dentro de elem1 (p > b →

  texto

  ), a diferencia del diseño anterior, p>i no encontrara ningun elemento, porque i no es un descendiente directo pag(anidado en b);
• elem1 + elem2 - el combinador "próximo hermano" - elem2, ubicado (¡no anidado!) inmediatamente después de elem1, de hecho, el siguiente elemento (b + i → b i);
• elem1 ~ elem2 - combinador “hermanos inferiores” - elem2, ubicado (¡no anidado!) después de elem1, a diferencia del párrafo anterior, se buscan elementos que no necesariamente están inmediatamente después de elem1 (b ~ i → bspan i);
• elem:first: selecciona solo el primer elemento de todos los elementos;
• elem:last - selecciona sólo el último elemento;
• elem:eq(n) - selecciona solo el enésimo elemento; la numeración comienza desde cero, notación:eq(n) es equivalente a:primero;
• elem:lt(n) - selecciona todos los elementos hasta el enésimo;
• elem:gt(n) - selecciona todos los elementos después del enésimo;
• elemento: incluso - todos elementos pares(es importante saber que la numeración comienza desde cero, por lo que el elemento cero es par, aunque ocupa el primer lugar en el flujo);
• elem:odd - todos los elementos impares;
• elem:visible - elementos visibles;
• elem:oculto - elementos invisibles.

Esta lista debería ser suficiente para obtener diferentes conjuntos de elementos. Al igual que en CSS, los selectores se pueden combinar para llegar incluso a la etiqueta más profunda:

• div h2 ~ tabla: busque la tabla dentro del div que sigue al subtítulo h2;
• entrada form.reg - todas las etiquetas , ubicado dentro del formulario con la clase instalada registro;
• div > table td: celdas de la tabla directamente anidadas en la etiqueta div.

jQuery: método css vs propiedad de estilo

De hecho, no hay nada complicado. Si en JS normal hubiera un elemento para manipular estilo, entonces aquí todo es mucho más sencillo:

jQuery("selector").css("propiedad", ["valor"])
Dónde propiedad- propiedad CSS,
valor- El valor de la propiedad.

Si no se especifica el valor del año, se devolverá el valor actual de la propiedad. Las propiedades se utilizan en " forma pura", es decir, de la misma forma que se escriben en estilos. Para JS tendrías que escribir, por ejemplo, algo como:

document.getElementById("id").style.backgroundColor = "#f0f";
En jQuery el código se reducirá a:

jQuery("#id").css("color de fondo", "#f0f");
Pero no olvides que aquí puedes establecer como selector regla compleja- la biblioteca se hará cargo de la búsqueda del elemento. En JS puro tendrías que jugar con esto.

Atributos del elemento: obtener, eliminar, agregar, cambiar

Obtener, agregar o cambiar un atributo se realiza de la misma manera que en el caso de CSS, solo necesitas usar otro método: atributo:
jQuery("selector").attr("nombre", ["valor"])
Dónde nombre- Nombre del Atributo,
valor- valor del atributo (si no se especifica, se devolverá el valor actual).

Existe un método especial para eliminar un atributo:
jQuery("selector").removeAttr("propiedad")

Clases de elementos: eliminar, agregar, cambiar

Las clases tienen una propiedad interesante: un elemento puede tener varias a la vez. Por tanto, el conjunto de funciones difiere de lo habitual.

Agregar clase:
jQuery("selector").addClass("nombre_clase")
Dónde nombre de la clase- Nueva clase.

Eliminar clase:
Además de esto hay bastante oportunidad útil clase de "cambio". La forma en que funciona es que si a un elemento ya se le ha asignado una clase nombre de la clase, se elimina (la clase), si no, se agrega:
jQuery("selector").removeClass("nombre_clase")
Y había una funcionalidad más que no se mencionó: comprobar si el elemento está asignado. clase dada(verdadero en caso afirmativo):
jQuery("selector").hasClass("nombre_clase")

Contenido del contenedor: análogo a InnerHTML

En JavaScript, la propiedad internalHTML se utiliza para obtener o establecer todo el contenido HTML de un elemento. Para jQuery el código se simplifica a esto:
jQuery("selector").html(["código"])
Dónde código- Código HTML que será asignado a los elementos encontrados. Si no se especifica el parámetro, se devolverá el contenido (HTML).

¿Cómo eliminar un elemento en jQuery?

A diferencia de JavaScript puro, la operación degenera en una línea de código:
jQuery("selector").eliminar()

¿Cómo insertar texto?

Para JS existe una propiedad insideText que, sin embargo, no todos los navegadores soportan. Pero no estamos mirando caminos dificiles, ¿bien?
jQuery("selector").text(["cadena"])
Dónde cadena- el texto que se insertará. Si no se especifica el parámetro, se devolverá el contenido del texto actual.

¿Cómo saber el número de elementos? ¿Cómo ocultar o mostrar un elemento?

Hay dos métodos para esto:
jQuery("selector").ocultar(); // esconder
jQuery("selector").mostrar(); // espectáculo

¿Qué más puede hacer jQuery?

Muchísimas cosas: interceptar y procesar varios eventos (por ejemplo, desde el mouse o el teclado), trabajar con Ajax (comunicación con el servidor sin recargar la página, por ejemplo, para organizar la carga de nuevos mensajes, como se hace en VK), serializar formularios para su posterior envío, crear elementos y agregarlos fácilmente a la ubicación requerida en la página, etc.

Si decides definitivamente aprender jQuery, mira el maná oficial, hay muchas cosas útiles allí. Le advierto de inmediato que la información está presentada en inglés, pero no se asuste: de los ejemplos casi siempre queda claro qué hace tal o cual método.

Si tenéis alguna duda la espero en los comentarios.

Las bibliotecas JQuery son familiares para los diseñadores y desarrolladores de primera mano. Este es uno de los más bibliotecas populares JavaScript que encuentras en la web.

Todo diseñador y desarrollador que se precie está familiarizado con las funciones y capacidades de esta biblioteca:

• jQuery está diseñado para resolver casi cualquier tarea en un sitio web;
• jQuery puede eliminar la molestia de crear un sitio web hermoso y funcional;
• Si necesita resolver problemas entre navegadores, agregue bibliotecas de JavaScript a la colección de herramientas que utiliza.

Bibliotecas JQuery - gran herramienta para desarrolladores web. Hay una gran cantidad de complementos gratuitos en Internet.

Puede dedicar mucho tiempo a buscar las que necesita, porque tendrá que trabajar con cada sitio para encontrar las últimas versiones de las bibliotecas JQuery que más le convengan.

Por lo tanto, para ahorrarle tiempo, hemos recopilado las bibliotecas jQuery más útiles en este artículo. Puede utilizarlos en su sitio web para agregar efectos interesantes y útiles.

1. Árbol:

El complemento Árbol le brinda la posibilidad de crear una estructura de árbol para su sitio web. Es extensible, personalizable, potente y muy fácil de usar.

2. jQuery Vibrar:

Este es un complemento especialmente creado para usar en dispositivos móviles. Permite al desarrollador hacer que cualquier dispositivo vibre según un patrón personalizado en cierto periodo tiempo.

3. Indicadores de vuelo:

Complemento muy fácil de usar. Podrás mostrar indicadores de vuelo de alta calidad con usando HTML, CSS3, JQuery y SVG.

4. Control deslizante de luz jQuery:

jQuery LightSlider es un control deslizante táctil altamente personalizable para mostrar el contenido de su sitio web. Hay disponibles efectos de deslizamiento y desvanecimiento. Es compatible con todos los principales navegadores.

5. ¡jQuery GoUp!

Muy fácil de usar. Permite a los visitantes de su sitio moverse a la parte superior de la página con un solo clic.

6. Recortador de imágenes:

Este complemento jQuery le permite recortar imágenes en su sitio web. Hay opciones de configuración y avance. También podrás establecer el alto y el ancho.

7. Control deslizante Devrama:

Devrama completamente control deslizante adaptativo imágenes de oportunidades unicas. Admite imágenes y contenido HTML. Hay varias opciones para efectos de cambio de imagen.

8.jQFader:

jQFader es un complemento simple para aplicar un efecto de desvanecimiento a los elementos de su sitio. Fácil de usar. Fácil de usar en cualquier sitio web.

9.Kit de tenedor:

Forkit.js es un complemento jQuery animado que actúa como una cortina detrás de la cual puedes esconderte contenido adicional. Generalmente ubicado en la esquina superior derecha.

10.Control deslizante de noticias vertical:

Como sugiere el nombre, es un control deslizante vertical basado en jQuery y CSS 3 que muestra titulares de noticias. Hay una función de vista previa y breve descripción noticias.

11. Buscando:

Este complemento jQuery le permite buscar texto en listas disponibles en una página. Oculta elementos que no coinciden con la consulta de búsqueda.

12. Deslizar el navegador:

Este complemento crea un efecto de panel táctil para desplazarse por las páginas cuando el desplazamiento está deshabilitado en el sitio. El evento ocurre cuando se desplaza la rueda del mouse.

13. Cena de pollo:

ChickenDinner es un complemento jQuery único. Le permite cargar imágenes desde una matriz de imágenes creada en el lado del cliente, a través de etiquetas img o imágenes de fondo.

14. Placa parpadeante:

Complemento totalmente responsivo y muy fácil de usar. Le permite crear una apariencia de desplazamiento página por página a través del contenido del sitio.

15. SVGMagia:

¿Cómo convertir imágenes SVG a formato PNG? Aprovecha esto jQuery sencillo biblioteca. Busca imágenes en formato SVG en el sitio y, si el navegador no admite SVG, las convierte a PNG.

16. perezosoYT:

Este complemento se puede utilizar para adición rápida vídeo de YouTube. Cuando se carga por primera vez, la capa contendrá una imagen de vista previa del video y, cuando se hace clic, el video se reproducirá.

17.Desplazamiento mágico:

Con este complemento, puede fijar un elemento de la página en un lugar determinado, activar la animación y en el momento en que el usuario se desplaza por la página a un lugar determinado.

18. Cuadrícula de filas:

RowGrid es un complemento jQuery diseñado para presentar elementos de página como una tabla. Herramienta pequeña y fácil de usar.

19. Remodal:

Este complemento jQuery se utiliza para crear ventanas modales con seguimiento de hash. Diseño plano, totalmente responsivo y muy fácil de personalizar.

20. Visor panorámico:

Este complemento jQuery puede resultar muy útil para su sitio web. Te permite agregar imágenes panorámicas, lo que sin duda hará que la página sea aún más única.

21. Etiquetas flotantes:

Este complemento, basado en jQuery, es familiar para muchos desarrolladores. Su trabajo es mostrar un texto predeterminado en el campo de entrada y cambiarlo cuando el usuario comienza a escribir.

22. Caja de fluidos:

Complemento jQuery muy útil. Amplía y mejora las capacidades del módulo de caja de luz fluida. Funciona como enlace a una imagen más grande.

23. Espacio libre:

Headroom.js le ayudará a ocultar la navegación (u otro contenido del encabezado) en el sitio. Cuando un visitante se desplaza hacia abajo en la página, la navegación desaparece y aparece cuando el usuario regresa a la parte superior de la página.

24. Control deslizante A:

A-Slider es un control deslizante adaptable y simple que también admite contenido de audio. Muy fácil de usar y personalizable de forma bastante flexible mediante HTML.

25. CoverflowJS:

Este es un proyecto de coverflow que recreará el efecto 'CoverFlow' utilizando componentes jQuery UI y transformaciones CSS3.

26. jQuery URLive:

Las capacidades de este complemento jQuery son muy similares a la funcionalidad del archivo adjunto en la ventana de creación de publicaciones de Facebook. Le permite crear vistas previas rápidas de cualquier URL según las propiedades.

El complemento permite que las aplicaciones web carguen imágenes para diferentes resoluciones de pantalla.

28. Collapser de jQuery:

Este complemento de jQuery le permite ocultar texto por palabras, letras o líneas utilizando una API bastante flexible. Hay muchas opciones para ocultar párrafos.

29. Desplazamiento de imagen de paralaje:

Un complemento que crea un efecto de desplazamiento de imagen. Fácil de usar. Montón opciones adicionales para modificación. La animación está realizada en CSS3.

30. Desplazamiento de bloques:

Un complemento de jQuery que divide el contenido del sitio web en páginas para una mejor presentación y luego las muestra en bloques.

31. Presentación de diapositivas de imágenes de página completa:

Un complemento jQuery de página completa que crea una presentación de diapositivas que llena automáticamente todo el espacio de la pantalla con una imagen. Los tamaños de las imágenes se ajustan automáticamente para adaptarse al área de visualización.

32. Árbol Fácil

El complemento EasyTree jQuery está diseñado para convertir listas UL o JSON en un menú de árbol para su sitio. Fácil de usar y absolutamente gratis.

33. Mapeado:

Mapsed simplifica el proceso de marcar lugares en un mapa. También puedes agregar y editar lugares si no están en la API de Google Places.

34. Desplazador radiante:

Este complemento de jQuery le permite crear desplazadores responsivos (carruseles) con cuadrículas y diseños horizontales simples. Radiant Scroller admite varias opciones de personalización y también proporciona una API para la administración.

35. Caja de luz de imagen:

Caja de luz minimalista para fotografías. El complemento, por defecto, no tiene etiquetas ni botones de navegación, lo que lo hace simple pero ascético. Responsivo y solidario dispositivos táctiles, se ejecuta en la mayoría de los sistemas operativos móviles.

36. Sr. JsonTable:

Este complemento es muy fácil de usar. Con su ayuda, puede organizar datos JSON en forma de tabla HTML, con la capacidad de paginar y ordenar. También puedes ocultar columnas.

37.Ajuste de imagen:

ImageFit puede resultar muy útil para los desarrolladores. Hecho de forma sencilla. Tiene un tamaño pequeño. Le ayudará a colocar cualquier imagen en cualquier lugar de su sitio.

38. Validador de arranque:

Este complemento será muy útil cuando desee agregar capacidades de validación a su sitio. Tiene muchas opciones integradas y es muy fácil de usar.

39. Cambiar tamaño del complemento final:

Este complemento se utiliza para mostrar mensajes después de cambiar el tamaño de la ventana del navegador.

40. Fondos adaptativos:

El complemento utiliza el color dominante en la imagen de fondo y agrega este color al fondo del elemento principal.

41.Forma chimpancé:

El complemento jQuery, que es un formulario Mailchimp Ajax totalmente personalizable, permite al usuario iniciar sesión fácilmente en Mailchimp.

42. Contraseña Peekaboo:

El complemento le permitirá mostrar temporalmente la contraseña ingresada al usuario si así lo desea.

Del autor: Saludos amigos. En este artículo, comenzaremos a familiarizarnos con la maravillosa y popular biblioteca de JavaScript: jQuery. Descubriremos por qué es necesario y cómo puede ayudarnos en nuestro trabajo, y también aprenderemos cómo conectar la biblioteca jQuery a nuestro proyecto.

Entonces, ¿qué es jQuery? jQuery es biblioteca javascript, es decir. biblioteca escrita en javascript. En pocas palabras, este es un conjunto funciones listas para usar, que simplifican la vida de un desarrollador y escriben código en JavaScript.

Si no has olvidado JavaScript, debes recordar lo difícil que es seleccionar elementos en una página y luego manipularlos. Recuerda todos estos títulos largos métodos: getElementById, getElementsByClassName, etc. Escribir este montón de palabras es realmente largo e inconveniente. La biblioteca jQuery te permite hacer lo mismo de una forma mucho más sencilla y clara. Compare al menos estas dos líneas de código:

var elem = document.getElementById("p"); var elem = $("#p");

< p id = "p" > < / p > var elem = documento. getElementById("p"); var elem = $ ("#p");

Ambas líneas seleccionarán el mismo elemento: el párrafo con el identificador especificado. Pero, como ve, la segunda línea es mucho más corta y, lo más importante, más clara. Por cierto, lo más probable es que su sintaxis te recuerde algo. Así es, eso es Selector CSS— #p – selección de un elemento con el ID especificado. jQuery usa la misma sintaxis para seleccionar elementos que CSS, por lo que si conoce CSS, le resultará mucho más fácil comprender y trabajar con jQuery. Esta es una ventaja adicional.

Sin embargo, jQuery es bueno no solo porque permite seleccionar cualquier elemento de la página y la selección es flexible. Al utilizar jQuery, obtienes otras ventajas en comparación con JS nativo. Éstos son algunos de ellos:

trabajo sencillo con eventos;

compatibilidad entre navegadores;

trabajo conveniente con AJAX (solicitudes asíncronas al servidor);

métodos convenientes para trabajar con efectos (ocultar/aparecer elementos agregando efectos visuales);

y la principal ventaja son los miles de complementos listos para usar para todos los gustos (galerías, presentaciones de diapositivas, trabajo con formularios y otros elementos de la página).

Hoy en día, conocer y trabajar con la biblioteca jQuery es prácticamente un estándar para cualquier desarrollador web. Casi ningún proyecto en la web puede prescindir de él, ya que jQuery realmente simplifica la escritura de código JavaScript.

Intentemos conectar la biblioteca jQuery a nuestra página, sobre todo porque es muy fácil de hacer. La primera manera es conexión local. Consiste en descargar jQuery en nuestro proyecto y conectarlo. Vaya al sitio web oficial de jQuery y descárguelo. versión actual bibliotecas. En el momento de escribir este artículo, esta es la versión 3.1.1.

Tenga en cuenta que podemos descargar versiones comprimidas y sin comprimir de la biblioteca. ¿Cuál es la diferencia?

Si descargamos ambas versiones de la biblioteca, veremos que difieren en peso. La versión comprimida pesa 84 KB, la versión sin comprimir pesa 260 KB. La diferencia es que todos los espacios y nuevas líneas se eliminaron de la versión comprimida y todos los nombres de las variables se acortaron. De lo contrario, no hay diferencia, es decir Ambas versiones de la biblioteca son iguales y hacen el mismo trabajo. Recomiendo conectar la versión comprimida, ya que pesa menos y, por tanto, cargará más rápido. Entonces, ¿por qué necesitas una versión sin comprimir? Es necesario para los desarrolladores, es decir. para aquellos que quieran mirar el interior de la biblioteca para estudiarla con más detalle.

Entonces, conectemos la biblioteca:

jQuery

< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title >jQuery< / title > < / head > < body > < / body > < / html >

Eso es todo, la biblioteca jQuery está conectada y podemos usar sus capacidades, que conoceremos en las siguientes lecciones. Otra forma de conectar jQuery es usar una CDN, en otras palabras, almacenamiento remoto recursos. Por ejemplo, podemos conectar jQuery con