Bienvenidos sean a este post, hoy continuaremos con la funcion selector y el CSS.
En el post anterior vimos algunas opciones de como utilizar a la funcion selector y el css, ya sea desde elegir elementos de la pagina hasta algunas condiciones particulares, hoy veremos algunas otras formas de manejar al selector pero para ello debemos crear primero un nuevo directorio y dentro un nuevo archivo con el nombre de personal.html y le agregaremos el siguiente codigo:
personal.html
<html>
<head>
<link rel="stylesheet" href="estilo.css" type="text/css" />
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="codigo.js"></script>
<title>Pagina de jQuery</title>
</head>
<body>
<h2>Listado de juegos</h2>
<table>
<tr>
<td>Uncharted 2</td>
<td>Accion</td>
<td>2009</td>
</tr>
<tr>
<td>Enslaved: Odyssey to the West</td>
<td>Accion</td>
<td>2010</td>
</tr>
<tr>
<td>God of War</td>
<td>Accion</td>
<td>2018</td>
</tr>
<tr>
<td>Gears of War</td>
<td>Accion</td>
<td>2006</td>
</tr>
<tr>
<td>Sonic</td>
<td>Plataformas</td>
<td>1991</td>
</tr>
<tr>
<td>Super Mario World</td>
<td>Plataformas</td>
<td>1990</td>
</tr>
<tr>
<td>Earthworm Jim</td>
<td>Plataformas</td>
<td>1994</td>
</tr>
</table>
<h2>Listado de juegos de Sonic (16 bits)</h2>
<table>
<tr>
<td>Sonic</td>
<td>Accion</td>
<td>1991</td>
</tr>
<tr>
<td>Sonic 2</td>
<td>Accion</td>
<td>1992</td>
</tr>
<tr>
<td>Sonic Spinball</td>
<td>Accion</td>
<td>1993</td>
</tr>
<tr>
<td>Sonic 3</td>
<td>Accion</td>
<td>1994</td>
</tr>
<tr>
<td>Sonic & Knuckles</td>
<td>Accion</td>
<td>1994</td>
</tr>
</table>
</body>
</html>
Esta es una pagina simple donde principalmente creamos dos tablas, una con varios videojuegos con algunos datos de ellos y otra con un listado de los juegos de Sonic en 16 bits unicamente, tambien agregamos la libreria de jQuuery desde el sitio, seguido de un tag script que usara a codigo.js donde ingresaremos las lineas de codigo que iremos viendo y anteriormente creamos un link para un archivo donde almacenaremos las clases CSS que aplicaremos en la pagina, nuestro siguiente paso sera justamente crearlo, para ello en el mismo directorio del archivo HTML crearemos un archivo con el nombre estilo.css y le agregaremos el siguiente codigo:
estilo.css
tr
{
background-color: #fff;
}
.alt
{
background-color: #ccc;
}Aqui definiremos una clase que se aplicara a todos los elementos tr de las tablas y otra llamada alt que modificara el color de fondo cuando la apliquemos, nuestro siguiente paso sera crear en el mismo dirctorio de estos dos archivos un nuevo archivo con el nombre de codigo.js y le agregaremos este primer codigo:
codigo.js
$(document).ready(function()
{
$('tr:even').addClass('alt');
});Aqui le pediremos que busque los elementos tr de la tabla y le aplique la clase alt pero con una particularidad, el uso del :even, esta trabaja en conjunto con otra llamada :odd, estas trabajan con la numeracion de base cero de Javascript, por lo tanto contara el total de elementos que le asignamos, para este caso la fila de la tabla, las contara y si el total es par toma la primer fila como cero considerandola como par (even) y la siguiente como impar (odd) y asi ira alternando hasta el final, en cambio si el total de elementos es impar considera al primer elemento como impar, guarden el archivo y si abren la pagina se debera ver de la siguiente manera
Nota: Prueben de cambiar el :even por :odd para ver como modifica su aspecto.
Todo muy bien en la primera tabla porque nos marco en gris la primera fila pero en la segunda tabla vemos que no y nosotros queremos que sea de la misma forma, para ello debemos modificar el codigo de codigo.js de la siguiente manera:
$(document).ready(function()
{
$('tr:nth-child(odd)').addClass('alt');
});Observen que usamos a :nth-child en lugar de aplicar directamente las funciones anteriores, esta nos toma el total de filas relativo a cada tabla y no el total del documento, con lo cual tomara la consideracion en base a cada tabla, y como argumento pasamos a even u odd, en el caso anterior usamos even porque el total era par pero ahora cada tabla es impar por lo tanto debemos usar a odd, si lo guardan y actualizan veremos el siguiente resultado
Igualmente tengan en cuenta que esto debera ajustarse a sus necesidades pero es bueno que tenemos dos alternativas para trabajar asi, volvamos al archivo estilo.css y agreguemos la siguiente clase:
.resaltar
{
font-weight: bold;
font-style: italic;
}Esta sera una clase simple donde «resaltaremos» alli donde la apliquemos, ahora vamos a nuestro archivo codigo.js y modifiquemos el codigo de la siguiente manera:
$(document).ready(function()
{
$('tr:nth-child(odd)').addClass('alt');
$('td:contains(War)').addClass('resaltar');
});Aqui agregamos una nueva linea donde a la columna le aplicamos la funcion contains para que verifique las columnas que contienen el argumento informado, War en esta ocasion, y en todas las que cumpla aplicara la clase que agregamos, guarden el archivo y recarguen la pagina para ver la nueva salida
Observen como nos aplico la clase a unicamente donde encontro la palabra informada, esto mismo ocurriria si reemplazan la columna (td) por la fila (tr) pero lo aplicara a toda la fila, vamos a hablar sobre el siguiente tema.
Nota: La funcion :contains es case-sensitive, si no respectan las mayusculas y minusculas no lo encontrara, pueden probar de cambiar la palabra War por war y ver el resultado.
Para ir finalizando vamos a hablar sobre el ultimo tema como es el selector y los formularios, no solamente podemos ubicar elementos por su posicion sino que tambien nos posibilita elementos de forma sencilla, a continuacion les dejo unos encargados de seleccionar elementos de un formulario:
- :input, este coincide con input, textarea, select y elementos de button
- :button, coincide con los elementos de button y elementos de input con un atributo type igual a button
- :enabled, aqui coincide con los elementos del form que esten activos (enabled)
- :disabled, idem al anterior pero para los desactivados (disabled)
- :checked, coincide con los radios y checkboxes que esta chequeados (checked)
- :selected, ese coincide con los elementos Option seleccionados
Al igual que sucede con otros selectores a estos podemos combinarlos para hacerlo mas especificos, supongamos que deseamos seleccinar todos los elementos de tipo radio chequeados:
$('input[type="radio"*:checked')Ahora por ejemplo si deseamos seleccionar las input de passwords y las input de texto desactivadas debemos usar lo isguiente:
$('input[type="password"], input[type="text"]:disabled')Como pueden ver podemos usar los selectores personalizados mezclados con CSS para hacer un mejor listado de coincidencias pero esto es solo la superficie de este tema y de ella hablaremos mas adelante, por ultimo les dejo los codigos que creamos en este post
En resumen, hoy hemos visto selectores personalizados, una version mejorada de lo visto con CSS, hemos hecho otro codigo para poder trabajarlo de mejor forma, hemos visto como aplicar clases a elementos y contenido y por ultimo hemos visto muy superficialmente como trabajar con formularios, espero les haya sido util 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 