Bienvenido sean a este post, hoy seguiremos con el selector.
En el post anterior vimos de forma basica como es la funcion selector pero hoy veremos mas a fondo como trabaja con el CSS, una buena caracteristica de la libreria jQuery es su compatibilidad con el CSS del 1 al 3 establecido por el World Wide Web Consortium, lo cual le da mayor libertad a los desarrolladores sin preocuparse por el navegador del cliente siempre y cuando este activo el Javascript.
Para entender el concepto vamos a analizarlo a traves de un ejemplo, para ello primero crearemos una pagina HTML con el nombre de estilo.html y le agregaremos el siguiente codigo:
estilo.html
<html>
<head>
<title>jQuery con CSS</title>
</head>
<body>
<ul id="lista-juegos">
<li>Accion
<ul>
<li><a href="/uncharted2/">Uncharted 2</a></li>
<li>Enslaved: Odyssey to the West</li>
<li>God Of War</li>
<li>Gears Of War</li>
</ul>
</li>
<li>Plataformas
<ul>
<li><a href="sonic.pdf">Sonic</a></li>
<li>Super Mario World</li>
<li>Earthworm Jim</li>
</ul>
</li>
<li>Deportes
<ul>
<li>PES(<a href="mailto:pes@konami.co.jp">email</a>)
<ul>
<li>2018</li>
<li>2020</li>
</ul>
<li><a href="https://www.ea.com/es-es/games/fifa/fifa-23">FIFA 23</a></li>
<li>Need For Speed</li>
</ul>
</li>
</ul>
</body>
</html>
En este caso tenemos un simple listado de algunos videojuegos asignados a sus respectivos generos, con algunos sublistados, links y capacidad de enviar un email, si lo abren con un navegador se vera de la siguiente forma
Ya tenemos nuestra pagina de base, lo siguiente sera implementar un archivo CSS para trabajar con los distintos estilos, para ello al lado del archivo anterior generen otro archivo con el nombre de estilo.css y simplemente agreguen este codigo:
estilo.css
.horizontal
{
float: left;
list-style: none;
margin: 10px;
}Una clase estandar para usar en nuestra pagina, nuestro siguiente paso sera cargar este archivo en nuestro codigo y para ello deben agregar la siguiente linea dentro del bloque establecido por <head>:
<link rel="stylesheet" href="estilo.css" type="text/css" />
Con esto ya tendremos acceso a nuestros estilos, lo siguiente sera habilitar a jQuery y para ello en <head> nuevamente agregaremos este segmento:
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
E inmediatamente despues agregaremos esta linea:
<script src="estilo.js"></script>
Y este sera el encargado de nuestros codigos de jQuery, con esto ya tendriamos resuelto nuestro codigo HTML, veamos como quedo:
estilo.html
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<title>jQuery con CSS</title>
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="estilo.js"></script>
</head>
<body>
<ul id="lista-juegos">
<li>Accion
<ul>
<li><a href="/uncharted2/">Uncharted 2</a></li>
<li>Enslaved: Odyssey to the West</li>
<li>God Of War</li>
<li>Gears Of War</li>
</ul>
</li>
<li>Plataformas
<ul>
<li><a href="sonic">Sonic.pdf</a></li>
<li>Super Mario World</li>
<li>Earthworm Jim</li>
</ul>
</li>
<li>Deportes
<ul>
<li>PES(<a href="mailto:pes@konami.co.jp">email</a>)
<ul>
<li>2018</li>
<li>2020</li>
</ul>
<li><a href="https://www.ea.com/es-es/games/fifa/fifa-23">FIFA 23</a></li>
<li>Need For Speed</li>
</ul>
</li>
</ul>
</body>
</html>
A partir de aqui trabajaremos con los archivos estilo.css y estilo.js para modificar nuestra pagina, nuestro primer paso sera crear junto a los otros archivos uno nuevo llamado estilo.js y le agregaremos el siguiente codigo:
estilo.js
$(document).ready(function() {
$('#lista-juegos > li').addClass("horizontal");
});Este sera nuestro primer codigo sobre la pagina, como ya hablamos en otros posts anteriores el selector selecciona al documento (la pagina) y el ready es para esperar a que la pagina se haya terminado de cargar cuando esto haya ocurrido usaremos una funcion anonima donde le aplicaremos la clase horizontal al elemento en selector, aqui tenemos una particularidad porque le pasamos el id del elemento a seleccionar pero junto al combinador de hijos o child combinator seguido del elemento child, en este caso el <li>, esto hara que la clase se aplique unicamente a ellos, si lo guardan y refrescan el archivo HTML tendran una salida como la siguiente
Continuemos, la clase horizontal se la aplicamos a los niveles superiores lo cual afecto a todos los elementos pero que sucede si queremos aplicar unicamente una clase a los elementos inferiores? bueno para eso debemos hacer otra modificacion en el archivo estilo.css y le agregaremos el siguiente segmento:
.sub-nivel
{
background: #ccc;
}Esta será otra clase donde estableceremos un nuevo color de fondo, nuestro siguiente paso sera ir al archivo estilo.js y tomaremos la funcion existente y la modificaremos de la siguiente manera:
$(document).ready(function() {
$('#lista-juegos > li').addClass("horizontal");
$('#lista-juegos li:not(.horizontal)').addClass("sub-nivel");
});En este caso agregamos una nueva linea donde en lugar de usar el operador comentado anteriormente le pasamos el id a buscar seguido del elemento y por medio de not le decimos que seleccione el elemento que no posea la clase horizontal, en caso de ser asi le agregamos la nueva clase, el resto sigue haciendo lo mismo que antes, guarden el archivo y refresquen la pagina, ahora deberia verse de la siguiente manera
Ahora vamos a aplicar un estilo a nuestros links pero para ello debemos descargar primero los siguientes archivos:
Descarguen el archivo, exraigan los archivos en el mismo directorio que los otros tres archivos, una vez realizado continuemos con la modificacion del archivo estilo.css agregando las siguientes clases:
a
{
color: #00c;
}
a.mailto
{
background: url(email.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink
{
background: url(pdf.png) no-repeat right top;
padding-right: 18px;
}
a.fifalink
{
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}El primero sera para establecer el color de los links en el documento, este sera uno general, luego agregaremos tres clases, la primera sera para aplicar al link mailto, en ella pondremos como imagen de fondo el archivo email.png que descargamos anteriormente, le diremos que no se debe repetir e ira a la derecha arriba y por ultimo le agregaremos una separacion de relleno de 18 pixeles, la siguiente clase es similar al anterior pero usaremos el archivo pdf.png y lo usaremos para el link del pdf, el resto es exactamente lo mismo, por ultimo creamos una nueva clase para el link del fifa, donde estableceremos un color de fondo, el ancho del relleno y por ultimo como debe hacer el borde, de 1 pixel, solido y de color negro, con esto tenemos nuestras clases establecidas, antes de conitinuar debemos mencionar un tema como es buscar un atributo por medio de un selector, para ello debemos usar la siguiente sintaxis:
$(elemento[atributo])Por ejemplo si quisieramos saber el origen de una imagen debemos hacerlo de la siguiente manera:
$(img[src])Es muy simple de usar como se ve en el ejemplo, con esto comentado continuemos con el post y lo siguiente sera trabajar con el archivo estilo.js donde modificaremos el codigo existente por el siguiente:
$(document).ready(function() {
$('#lista-juegos > li').addClass("horizontal");
$('#lista-juegos li:not(.horizontal)').addClass("sub-nivel");
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
});Del codigo anterior agregamos dos lineas para agregar una clase a sus respectivos elementos, pasemos a hablar sobre la primera:
$('a[href^="mailto:"]').addClass('mailto');Aqui usamos la busqueda por atributo y sera el href de un anchor pero a esta seleccion le pediremos mediante el operador ^= que debe buscar en el inicio del valor que contenga el atributo, lo siguiente es el valor que buscara y en este caso es «mailto:«, la forma que tiene HTML de indicar que es una direccion de correo, por esta razon le agregaremos la clase mailto, vamos a ver la segunda linea nueva:
$('a[href$=".pdf"]').addClass('pdflink');Esto es muy similar a la primera linea pero la unica diferencia es el operador para buscar contenido, en este caso usamos a $=, el cual buscara en el final del valor del atributo, para esta ocasion buscaremos la extension de un archivo de tipo pdf, si coincide procede a agregar la clase pdflink, el resto como dijimos sigue trabajando como antes, guarden el archivo y carguen la pagina para ver los nuevos cambios
Observen que ahora al lado de los links de Sonic y de email tenemos las imagenes que se agregan mediante sus clases respectivas, pero todavia nos queda una modificacion mas, para ello deben volver al archivo estilo.js y modifcaremos el codigo de la siguiente manera:
$(document).ready(function() {
$('#lista-juegos > li').addClass("horizontal");
$('#lista-juegos li:not(.horizontal)').addClass("sub-nivel");
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="fifa"]').addClass('fifalink');
});Aqui solo agregamos una linea con respecto a lo anterior, en ella volvemos a realizar la seleccion por atributo pero con una particularidad, primero le decimos que busque si href comienza con http, tal como hicimos con mailto, y luego le pedimos que verifique si href contiene la palabra fifa, para ello usamos el operador *=, si es verdad que se cumplen estas «condiciones» procedemos a agregar la clase fifalink, guarden el archivo y recarguen la pagina para ver como trabaja esta modificacion
Vean como de una forma muy simple le aplicamos la clase a un link particular si afectar a los otros que se encuentran en la pagina, antes de finalizar les dejo todos los archivos que generamos y utilizamos en este post
En resumen. hoy hemos visto como usar a la funcion selector en conjunto con css, como se hace, un ejemplo practico donde vivimos algunas acciones basicas que podemos trabajar con Jquery y css, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 