La semana pasada, hablé sobre lo importante que es jQuery Hacer que la web sea interactiva: una introducción a jQuery Hacer que la web sea interactiva: una introducción a jQuery jQuery es una biblioteca de secuencias de comandos del lado del cliente que casi todos los sitios web modernos usan: hace que los sitios web sean interactivos. No es la única biblioteca de Javascript, pero es la más desarrollada, más compatible y más utilizada ... 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 a usar jQuery en nuestros proyectos.

Diré esto ahora: no necesita aprender Javascript para usar jQuery. Probablemente sea mejor si piensa en jQuery como una evolución de Javascript, una mejor manera de hacerlo, que simplemente una biblioteca que agrega funcionalidad. Cualquier Javascript que necesite será recogido en el camino. Sin embargo, se supone que, como desarrollador web, tiene un conocimiento bastante bueno de HTML y CSS (¡y aquí encontrará una guía xHTML gratuita útil si no!).

Modelo de objeto de documento

jQuery se trata de atravesar y manipular el DOM - la redocumento Oobjeto METROodel El DOM es una representación jerárquica en árbol de la página, creada por navegadores después de leer todo el código HTML. En jQuery, usaremos terminología como padre, niños, y hermanos bastante a menudo, por lo que debe tener una idea de lo que esto significa en relación con el DOM.

Este diagrama simple de w3schools explica los conceptos bastante bien. Debería poder ver que el padre del elemento es, mientras que el elemento tiene un efecto inmediato

hermano.

Comenzando: Agregando jQuery

La última versión de jQuery es de aproximadamente 91 KB cuando se comprime, por lo que agrega aproximadamente el mismo peso de página que una pequeña fotografía o captura de pantalla. La forma más fácil de incluir jQuery en su proyecto es pegar una referencia a la versión alojada más reciente en la sección de encabezado de su sitio:

Sin embargo, tenga en cuenta que si está ejecutando WordPress, esto puede causar problemas porque ya tiene su propia copia de la biblioteca jQuery. Los complementos pueden solicitar que se cargue, y WordPress solo cargará jQuery de forma inteligente una vez, independientemente de cuántos complementos lo hayan solicitado.

Si agrega la siguiente línea a su funciones.php archivo de tema, agregará otra solicitud para que se incluya. WordPress sabrá siempre cargarlo si su tema está activo.

wp_enqueue_script ("jquery");

La segunda cosa a tener en cuenta es que cuando se agrega jQuery usando el método estándar, se cargará como PS. Todo lo que hagas con jQuery irá precedido de este $, como:

$ .ajax

o

$ ("# encabezado")

Sin embargo, cuando jQuery se carga a través de WordPress, todo se hace usando la variable jQuery en lugar de $, por ejemplo:

jQuery ("# ​​encabezado")

Aunque este no es un gran problema al escribir su propio código, significa que cortar y pegar fragmentos de jQuery que encuentre en la web deberá traducirse para usar jQuery en lugar de PS - eso es todo.

Una forma de evitar esto es envolver el código $ -style que encuentre así:

(función ($) // pegar $ código aquí) (jQuery);

Esto toma el jQuery variable y lo pasa a una función anónima como PS. Explicaré las funciones anónimas la próxima vez; por ahora, aprendamos la estructura básica de un poco de código jQuery.

Para agregar su código a una página HTML o PHP, encierre todo dentro de las etiquetas, así:

 // códigos de código jQuery aquí 

$ ('selector'). method ();

Eso es todo, en el título allá arriba. Esa es la estructura básica de una sola pieza de código jQuery para manipular el DOM. Fácil, cierto?

El selector le dice a jQuery que busque cosas que coincidan con esta regla,y es lo mismo que los selectores CSS (y luego algunos más en la parte superior). Entonces, al igual que en CSS, debe diseñar todos los enlaces con

una  

Lo mismo se haría en jQuery como

$ ('a')

Esto se puede hacer para cualquier elemento HTML: div, h1, span, lo que sea. También puede usar clases e ID de CSS para ser más específicos.

Por ejemplo, para encontrar todos los enlaces con la clase “Encuentrame”, usarías:

$ ('a.findme')

No necesita especificar el tipo de elemento cada vez, pero si lo hace, simplemente hace que la regla sea más específica. Podrías haber dicho

$ ('. findme')

que combinaría todo con la clase Encuentrame, si era o no un enlace.

Para usar un elemento de ID con nombre, use el # # firmar en su lugar. La diferencia clave aquí es que un selector de ID solo seleccionará un objeto, mientras que un selector de clase puede encontrar más de uno.

$ ('# algo')

Básicamente, si puedes hacerlo en CSS, jQuery también lo hará. De hecho, también puede usar algunos pseudo selectores de estilo CSS3 bastante complejos como: primero

$ ('cuerpo p: primero')

Lo cual agarraría el párrafo de la página. También encontrarás elementos con ciertos atributos. Considere este ejemplo; queremos encontrar todos los enlaces en la página que apuntan internamente a hacer uso de y resaltarlos de alguna manera. Así es como podemos encontrarlos:

$ ('a [href * = "makeuseof"]')

¿No es genial? Bueno creo que es.

Su próximo puerto de escala debe ser la documentación de la API jQuery para los selectores. Es una lista enorme de todos los diferentes tipos de selectores disponibles para usar, y nadie esperaría que los aprendas todos..

La siguiente parte de la ecuación es el método: qué hacer con esas cosas una vez que las haya encontrado, pero lo dejaremos para la próxima lección. Sin embargo, si desea comenzar a probar varios selectores ahora, le sugiero que siga el siguiente método css. Esto requiere dos parámetros: un CSS nombre de la propiedad, y un nuevo valor para asignar a esa propiedad. Entonces, para dar a todos los enlaces un color de fondo rojo, haría lo siguiente:

$ ('a'). css ('color de fondo', 'rojo');

¡Suficientemente simple! Si bien esto podría no ser de utilidad práctica, le permitirá ver fácilmente cualquier elemento ubicado utilizando sus selectores. Ahora ve y selecciona: el DOM te espera.

Espero que este tutorial te haya sido útil; He intentado que sea lo más simple y fácil de entender posible. Siéntase libre de hacer cualquier pregunta que tenga o dejar comentarios, pero tenga en cuenta que ciertamente no soy un jQuery ninja de élite.