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

Anuncio

Esto es parte de una introducción continua para principiantes a la serie de programación web jQuery. Parte 1 cubrió los conceptos básicos de jQuery Tutorial de jQuery - Introducción: conceptos básicos y selectoresLa 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 las manos con algo de código y aprendamos cómo ... Lee mas de cómo incluirlo en su proyecto y selectores. En la parte 2, continuaremos con el uso básico a medida que analicemos algunos métodos que puede realizar en esos elementos DOM y algunos fundamentos más del lenguaje.

$(selector).método();

Si recuerda de la lección 1, esta es la estructura básica de una manipulación DOM en jQuery. La manipulación del 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 recapitular rápidamente, el selector parte de esta declaración le permite usar nombres de elementos, clases o ID de tipo CSS para localizar partes del DOM. Por ejemplo, para agarrar todos los con un nombre de clase de

.oculto, usaríamos:

$ ('div.hidden')

La segunda parte de esta ecuación es la método realizar en estos DIV una vez que los hayamos encontrado (si es que existen) o solo pueden ser un elemento "coincidente"). 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 de algo, debe definirse como una clase en CSS.

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

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

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

Por lo tanto, cualquier cosa definible por CSS se puede ajustar con jQuery (colores, transparencia, ubicación, tamaño), por nombrar solo algunos. El cambio es inmediato.

Si prefiere animar los cambios de CSS, tengo buenas noticias para usted; también hay un método llamado .animar(). Sin embargo, es un poco más complejo:

.animate ({'propiedad': 'valor'}, velocidad);

Como ejemplo:

.animate ({'opacidad': '0.25', 'altura': '100px'}, 'rápido');

En este punto, es posible que se pregunte para qué sirven las llaves; se denominan "objeto literal" y, por lo general, se usan para crear una lista de El valor de la propiedad pares, algo así como un matriz indexada si vienes de otros idiomas Los usará mucho en jQuery, así que lo diré nuevamente: ¡acostúmbrese a verificar correctamente los corchetes y llaves cerradas!

Revisa esta página para muchos ejemplos de trabajo del método animado.

Además de manipular las propiedades CSS de algo, puedes ajustar el contenido con .métodos text (), .html () y .val () también (val es para el contenido de 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 comentarios y asígnelo a una variable comentario_nombre:

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

Establecer el valor de al valor tomado de nombre_comentario:

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

Luego tenemos una amplia selección de métodos para clonar, mover, 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 3 párrafo en la columna de contenido, pero lo está haciendo en Javascript para que la carga de la página inicial pueda ser mantenido limpio Suena bastante complejo, ¿verdad? Apenas…

$('contenido div #pags: enésimo hijo (3n)').después('');

Desglosando eso, le hemos pedido a jQuery que:

1. Encuentra el div con una ID de "contenido"
2. Encuentra las p contenidas dentro de ese div
3. Filtrar a cada 3 p usando el pseudo selector nth-child (más sobre eso aquí)
4. Insertar una imagen arbitraria después cada elemento a juego

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 te ocurra cuando se trata de manipulación, así que revisa la API para uno que puedes 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 a insertAfter (), tal vez piense en encontrar el siguiente niño abajo y usando insertBefore () en lugar.

Método de encadenamiento

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

$ ('nav # menu'). fadeIn ('fast'); $ ('nav # menu'). addClass ('beingShown'); $ ('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, que siempre es algo bueno, pero en realidad también se ejecuta más rápido.

¿Por qué? Bueno, cada vez que invocas el jQuery básico $ comando y selector, le está pidiendo que busque en el árbol DOM buscando 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ía estar armado con la capacidad de realizar algunas manipulaciones DOM bastante pesadas, así que intente, encadene sus métodos y haga un verdadero desastre en la página. Por ahora, querrás colocar tus scripts en el pie de página para que el resto de la página se cargue. La próxima semana abordaremos el problema de hacer que jQuery haga cosas solo cuando todo se haya cargado correctamente con eventos y el curioso caso de funciones anónimas.

Si acaba de toparse con esta publicación, es probable que sea un desarrollador web de algún tipo y desee ver todos nuestros WordPress y blogs artículos, o incluso nuestro Los mejores complementos de WordPress Los mejores complementos de WordPress Lee mas página.