Home-theater-designers
La semana pasada, hablé sobre lo importante que es 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 a utilizar 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, tienes un conocimiento bastante bueno de HTML y CSS (¡y aquí tienes una útil guía gratuita de xHTML si no es así!).
Modelo de objetos de documento
jQuery tiene que ver con el recorrido y la manipulación del JUICIO - los D ocumento O objeto METRO odel. El DOM es una representación de árbol jerárquica de la página, construida por los navegadores después de leer todo el código HTML. En jQuery, usaremos terminología como padre , niños , y hermanos con bastante frecuencia, por lo que debería tener una idea de lo que esto significa en relación con el DOM.
Este simple diagrama dew3schoolsexplica los conceptos bastante bien. Debería poder ver que el padre del elemento es, mientras que el elemento tiene un inmediatohermano.
Para comenzar: agregar jQuery
La última versión de jQuery tiene 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 del 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 de forma inteligente solo cargará jQuery una vez, independientemente de cuántos complementos lo hayan solicitado.
Si agrega la siguiente línea a su functions.php tema, agregará otra solicitud para que se incluya. Wordpress sabrá que debe cargarlo siempre si su tema está activo.
cómo evitar que Chrome se actualice|_+_|
La segunda cosa a tener en cuenta es que cuando se agrega jQuery usando el método estándar, se cargará como $ . Todo lo que haga con jQuery estará precedido por este $, como por ejemplo:
|_+_|o
|_+_|
Sin embargo, cuando jQuery se carga a través de Wordpress, todo se hace usando la variable jQuery en lugar de $, por ejemplo:
|_+_|Aunque esto no es un gran problema al escribir su propio código, sí significa que cortar y pegar fragmentos de jQuery que encuentre en la web deberá traducirse para usar jQuery en lugar de $ - eso es todo.
Una forma de evitar esto es envolver el código de estilo $ que encuentre así:
|_+_|Esto toma el jQuery variable y la pasa a una función anónima como $ . 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, incluya todo dentro de las etiquetas, así:
|_+_|$('selector').método();
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, ¿verdad?
losselectorle dice a jQuery que busque cosas que coincidan con esta regla, y es lo mismo que los selectores de CSS (y luego algunos más en la parte superior). Entonces, al igual que en CSS, diseñarías todos los enlaces con
|_+_|Lo mismo se haría en jQuery como
|_+_|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ífico.
Por ejemplo, para encontrar todos los enlaces con la clase 'findme', usaría:
|_+_|No es necesario 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
|_+_|que coincidiría con todo con la clase Encuentrame , sea o no un enlace.
Para utilizar un elemento de ID con nombre, utilice 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.
cómo restablecer un google home mini|_+_|
Básicamente, si puedes hacerlo en CSS, jQuery también lo hará. De hecho, también puede utilizar algunos pseudo selectores de estilo CSS3 bastante complejos como: primero
|_+_|Que agarraría el párrafo de la página. También encuentras 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 podríamos encontrarlos:
|_+_|¿No es genial? Bueno, creo que lo es.
Su próximo puerto de escala debería ser el Documentación de la API de jQuery para selectores . Es una lista enorme de todos los diferentes tipos de selectores disponibles para usar, y nadie esperaría que los aprenda todos.
La siguiente parte de la ecuación esmétodo- qué hacer con esas cosas una vez que las haya encontrado todas, pero lo dejaremos para la próxima lección. Sin embargo, si desea comenzar a probar varios selectores ahora, le sugiero que se adhiera al siguiente método CSS. Esto requiere dos parámetros: un CSS nombre de la propiedad y una nueva valor asignar a esa propiedad. Entonces, para dar a todos los enlaces un color de fondo rojo, deberías hacer:
|_+_|¡Suficientemente simple! Si bien esto puede no ser de utilidad práctica, le permitirá ver fácilmente cualquier elemento ubicado usando sus selectores. Ahora continúe y seleccione: el DOM le espera.
Espero que este tutorial te haya sido útil; Intenté hacerlo lo más simple posible de entender. No dude en hacer cualquier pregunta que tenga o dejar comentarios, pero tenga en cuenta que ciertamente no soy un ninja jQuery de élite.
Cuota Cuota Pío Correo electrónico 5 consejos para potenciar sus máquinas Linux VirtualBox¿Cansado del bajo rendimiento que ofrecen las máquinas virtuales? Esto es lo que debe hacer para mejorar el rendimiento de VirtualBox.
Leer siguiente Temas relacionados- Cultura web
- Desarrollo web
- JavaScript
- Programación
- jQuery
James tiene una licenciatura en Inteligencia Artificial y está certificado por CompTIA A + y Network +. Cuando no está ocupado como editor de revisiones de hardware, disfruta de LEGO, la realidad virtual y los juegos de mesa. Antes de unirse a MakeUseOf, fue técnico de iluminación, profesor de inglés e ingeniero de centros de datos.
Más de James BruceSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse