Esto es parte de una introducción continua para principiantes a la serie de programación web de jQuery. Parte 1 cubrió los principios básicos de jQuery. Tutorial de jQuery - Introducción: aspectos básicos y selectores. Tutorial de jQuery - Introducción: conceptos básicos y selectores. La semana pasada, hablé sobre la importancia de jQuery para cualquier desarrollador web moderno y por qué es impresionante. Esta semana, creo que es hora de que nos ensuciemos las manos con un poco de código y descubramos cómo ... Leer más sobre cómo incluirlo en su proyecto y selectores. En la parte 2, continuaremos con el uso básico al observar algunos métodos que puede realizar en esos elementos DOM, y algunos fundamentos de lenguaje más.
$ (selector) .method ();
Si recuerdas de la lección 1, esta es la estructura básica de una manipulación de DOM en jQuery. La manipulación DOM no es lo único que se puede hacer con jQuery, por supuesto, pero es el lugar más fácil para empezar y el más común, por eso lo elegimos.
Para recapitular rápidamente, la parte del selector de esta declaración le permite usar nombres, clases o ID de elementos similares a CSS para localizar partes del DOM. Por ejemplo, para tomar todo con el nombre de clase de .hidden, 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 pueden ser solo un elemento "coincidente"). Recuerde, jQuery solo devolverá un elemento para las selecciones de ID, ya que los ID deben referirse a elementos únicos. Si va a tener más de uno de algo, debe definirse como una clase en CSS.
En los métodos entonces; ¿Qué puedes hacer con los elementos del DOM de todos modos?
En primer lugar, te presenté al método .css la última vez para que pudieras usarlo para probar. El formato es simple:
.css('property', 'value'); Todo lo que se puede definir con CSS se puede ajustar mediante jQuery: colores, transparencia, ubicación, tamaño, por nombrar 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 .animate () . Aunque es un poco más complejo:
.animate({'property':'value'}, speed); Como ejemplo:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); En este punto, te estarás preguntando para qué sirven las llaves; se denominan "literales de objetos" y se usan generalmente para crear una lista de pares propiedad: valor, como una matriz indexada si vienes de otros idiomas. Los usará mucho en jQuery, así que lo diré de nuevo: ¡acostúmbrese a verificar correctamente los corchetes y llaves!
Echa un vistazo a esta página para ver muchos ejemplos de trabajo del método animado.
Además de manipular las propiedades de CSS de algo, puede ajustar el contenido del mismo con . también los métodos text (), .html () y .val () (val es para el contenido de los elementos del formulario) . Estos métodos actúan como ambos set y geters; si no especifica un valor, obtendrán el valor actual. Si especifica un valor, reemplazará el valor actual.
Aquí hay algunos ejemplos rápidos:
Obtenga el valor actual del campo de nombre en el formulario de comentario y asígnelo a una variable comment_name :
var commenter_name = $(#comment-form #name).val(); Establezca el valor de en el valor capturado de commenter_name :
$('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, realmente.
Supongamos que desea insertar dinámicamente un bloque de imágenes publicitarias después de cada 3er párrafo en la columna de contenido, pero lo hace en Javascript para que la carga de la página inicial se mantenga limpia. Suena bastante complejo, ¿verdad? Apenas…
$('div#content p:nth-child(3n)').after(' 
'); 
');Rompiéndolo, le hemos pedido a jQuery que:
- Encuentra el div con una ID de "contenido"
- Encuentra las p contenidas dentro de ese div
- Filtra a cada 3ª p usando el pseudo selector nth-child (más sobre eso aquí)
- Insertar un img arbitrario después de cada elemento coincidente
No puedo enumerar todos los métodos aquí y tampoco querría leer eso. El punto es que hay un método para hacer prácticamente cualquier cosa que se te ocurra cuando se trata de manipulación, así que revisa la API que puedas usar.
Además, tenga en cuenta que puede haber más de una forma de hacer algo. Si, por ejemplo, no puede restringir el objeto correcto para insertAfter (), quizás piense en buscar el próximo hijo y usar insertBefore () en su lugar.
Método de encadenamiento
Por último, tengamos una breve explicación sobre el método de encadenamiento, básicamente 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 encadenamiento de métodos . Como casi todos los métodos jQuery devuelven un objeto jQuery, cada uno puede pasar al siguiente. Esto significa menos código, lo cual siempre es bueno, pero en realidad también funciona más rápido.
¿Por qué? Bueno, cada vez que invoque el selector jQuery $ básico y el selector, le pedirá que busque en el árbol DOM buscando un elemento coincidente. Cuando encadena los métodos, no necesita seguir consultando el 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 hayamos cubierto bastante. Ahora deberías tener la habilidad de realizar algunas manipulaciones de DOM bastante pesadas, así que hazlo, encadena tus métodos y crea un verdadero caos en la página. Por ahora, querrá colocar sus scripts en el pie de página para dar tiempo al resto de la página para cargar. La próxima semana abordaremos el tema de hacer que jQuery solo haga cosas cuando todo se haya cargado correctamente con los eventos, y el curioso caso de funciones anónimas.
Si acaba de tropezar con esta publicación, probablemente sea un desarrollador web de algún tipo y desee consultar todos nuestros artículos de WordPress y de blogs, o incluso nuestra página Mejores plugins de WordPress.