Internet

Introducción a jQuery (Parte 2) Métodos y funciones

Introducción a jQuery (Parte 2) Métodos y funciones / Internet

Esto es parte de una introducción para principiantes en curso a la serie de programación web jQuery. La Parte 1 cubrió los conceptos básicos de jQuery Tutorial de jQuery - Introducción: Conceptos básicos y selectores Tutorial de jQuery - Introducción: Fundamentos y selectores La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es increíble. Esta semana, creo que es hora de que nos ensuciemos con un poco de código y aprendamos cómo ... Más información sobre cómo incluirlo en su proyecto y los selectores. En la parte 2, continuaremos con el uso básico mientras observamos algunos métodos que puede realizar en esos elementos DOM y algunos fundamentos de lenguaje más.

$ (selector) .method ();

Si recuerdas la lección 1, esta es la estructura básica de una manipulación DOM en jQuery. La manipulación de DOM no es lo único que puede hacer con jQuery, por supuesto, pero es el lugar más fácil para comenzar y el más común, por eso lo elegimos..

Para resumir rápidamente, la parte selectora de esta declaración le permite usar nombres de elementos, clases o ID similares a CSS para ubicar partes del DOM. Por ejemplo, para agarrar todos los

con un nombre de clase de .oculto, nosotros usaríamos

$ ('div.hidden')

La segunda parte de esta ecuación es el método para realizar en estos DIV una vez que los hemos encontrado (si es que existen, o solo pueden ser uno “pareo” ít). Recuerde, jQuery solo devolverá un elemento para las selecciones de ID, ya que las ID deben referirse a elementos únicos. Si va a tener más de uno, debe definirse como una clase en CSS.

A los métodos entonces; ¿Qué puedes hacer con los elementos del DOM de todos modos??

En primer lugar, te presenté a la .css Método la última vez para que puedas usarlo para pruebas. El formato es simple:

.css ('propiedad', 'valor');

Cualquier cosa definible por CSS puede ser ajustada por jQuery - colores, transparencia, ubicación, tamaño - para nombrar solo algunos. El cambio es inmediato.

Si prefieres animar los cambios de CSS, entonces tengo buenas noticias para ti; También hay un método llamado .animar(). Aunque es un poco más complejo:

.animar ('propiedad': 'valor', velocidad);

Como ejemplo:

.animate ('opacity': '0.25', 'height': '100px', 'fast');

En este punto, es posible que se esté preguntando para qué sirven las llaves; se llaman un “objeto literal”, y se utilizan normalmente para crear una lista de valor de propiedad pares, como una especie de matriz indexada Si vienes de otros idiomas. Los usarás mucho en jQuery, así que lo diré de nuevo: acostúmbrate a revisar correctamente los brackets y llaves cerrados.!

Echa un vistazo a esta página para ver muchos ejemplos prácticos del método animado.

Además de manipular las propiedades CSS de algo, puede ajustar su contenido con la .Los métodos text (), .html () y .val () también (val es para el contenido de los elementos de formulario). Estos métodos actúan como ambos conjuntoTers y obtenerters Si no especifica un valor, obtendrán el valor actual. Si especifica un valor, reemplazarán el valor actual.

Aquí hay algunos ejemplos rápidos:

Obtenga el valor actual del campo de nombre en el formulario de comentario y asígnele una variable nombre_comentarios:

var commenter_name = $ (# comment-form #name) .val ();

Establecer el valor de al valor tomado de comentarista_name:

$ ('span.name'). text (commenter_name);

Luego tenemos una amplia selección de métodos para clonar, desplazarnos, insertar o eliminar partes del DOM. Tu imaginación es el límite, de verdad..

Supongamos que desea insertar dinámicamente un bloque de imagen publicitaria después de cada tercer párrafo en la columna de contenido, pero lo está haciendo en Javascript para que la carga de la página inicial pueda mantenerse limpia. Suena bastante complejo, ¿verdad? Apenas… 

$ ('div # content p: nth-child (3n)'). after ('');

Rompiendo eso, le hemos pedido a jQuery que:

  1. Encuentra el div con una identificación de “contenido”
  2. Encuentra las p contenidas dentro de ese div
  3. Filtrar a cada 3ra p usando el pseudo selector nth-child (más sobre esto aquí)
  4. Inserte un img arbitrario después de cada elemento coincidente

No puedo enumerar todos los métodos aquí y tampoco querrías leer eso. El punto es que hay un método para hacer casi cualquier cosa que se pueda imaginar cuando se trata de manipulación, así que compruebe la API para ver cuál puede usar..

Además, tenga en cuenta que puede haber más de una forma de hacer algo. Si, por ejemplo, no puede reducir el objeto correcto para insertAfter (), tal vez piense en encontrar el siguiente niño abajo y usando insertBefore () en lugar.

Método de encadenamiento

Por último, hoy, hablemos rápidamente sobre el encadenamiento de métodos, básicamente porque es increíble. Primero, consideremos las siguientes líneas de código:

$ ('menú de navegación'). fadeIn ('rápido'); $ ('menú # de navegación'). addClass ('se muestra'); $ ('nav # menu'). css ('margin-right', '10px');

Eso suena bastante razonable, ¿verdad? Pero puedes hacer lo mismo en una sola línea:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Eso hace exactamente lo mismo, y se llama. método de encadenamiento. Dado que casi todos los métodos jQuery devuelven un objeto jQuery, cada uno puede alimentar al siguiente. Esto significa menos código, lo que siempre es bueno, pero en realidad también se ejecuta más rápido.

¿Por qué? Bueno, cada vez que invocas el jQuery básico. PS comando y selector, le está pidiendo que busque a través del árbol DOM en busca de un elemento coincidente. Cuando encadena métodos, no es necesario que siga refiriéndose al DOM, porque sabe dónde están ahora y puede realizar el método al instante..

Eso es todo por hoy, y creo que probablemente hemos cubierto bastante. Ahora deberías tener la capacidad de realizar manipulaciones de DOM bastante pesadas, así que prueba, encadena tus métodos y crea un verdadero lío de la página. Por ahora, querrá colocar sus scripts en el pie de página para que el resto de la página se cargue. La próxima semana abordaremos el tema de hacer que jQuery haga las cosas solo cuando todo se haya cargado correctamente con eventos y el curioso caso de funciones anónimas..

Si acabas de encontrarte con esta publicación, probablemente seas un desarrollador web de algún tipo y querrás revisar todos nuestros artículos de WordPress y blogs, o incluso nuestra página de los mejores complementos de WordPress..