Identificarse Crear Cuenta
Cargando
  1. Home
  2. Tutoriales
  3. Desarrollo
  4. JavaScript
  5. Filtros en selectores con Jquery y CSS3 II



Filtros en selectores con Jquery y CSS3 II

Los selectores son elementos que provienen de la lógica de css y permiten identifican objetos de la estructura de una web, aquellos que componen el código html o xhtml ejemplo div, p, span, etc.


dic 27 2014 19:00
Profesional

De tu interés 👌

Soluciones EXPRESS en YouTube a un Play. Únete!
Estos elementos o selectores pueden ser manipulados con Jquery y css para crear efectos y obtener contenido, ocultarlo o añadirlo y aplicarle algún efecto facilitando el trabajo de los programadores. Algunos selectores son mas conocidos por el código css por ejemplo:

IDENTIFICADORES 
Son elemento de más alta jerarquía y definen parámetros generales para los elementos de un bloque se definen como #id normalmente se aplican a listas o bloques.

<style>
#parrafo {
color: green;
font-size:20px;
}
</style>

<div  id="parrafo">
	 <p> Este es el selector id párrafo </p>
</div>
<p> Párrafo sin selector</p>


JQuery-selectores.jpg


Podemos ver como el párrafo dentro del bloque es afectado por el identificador pero no es afectado el que esta fuera.

CLASES 
Son elementos de jerarquía menor y se utilizan para elementos individuales o para definir clases dentro de una identificar como por ejemplo:

<style>
#parrafo {
font-size:20px;
}

#parrafo .parraforojo {
color: red;
}
.parrafoazul {
		    color:blue;
}
</style>



<div  id="parrafo">
<p class="parraforojo"> Este es el selector id párrafo </p>
</div>
<p class="parrafoazul"> Párrafo azul con p</p>
<div class="parrafoazul"> Párrafo azul con div</div>
<div class="parrafoarojo"> Párrafo rojo con div</div>

JQuery-selectores2.jpg


Aquí podemos apreciar que el clase .parraforojo define el color del párrafo pero depende el tamaño que define el identificador de mayor jerarquía #parrafo.

Mientras que la clase independiente .parrafoazul puede aplicarse elemento p que no depende de nadie incluso podemos aplicarlo a otros elementos como div, pero si intentamos aplicar la clase parraforojo en forma independiente del identificador #parrafo veremos que no funciona ya que no esta cumpliendo la jerarquía que le impone su identificador #parrrafo.

Existen muchos selectores que podemos utilizar aquí veremos algunos

Selector par (even) e impar (odd) 
Este selector se aplica a una matriz de elementos que utilizan la misma clase y se puede afectar a los elementos pares o impares, por ejemplo coloreamos el fondo de una lista de párrafos.

JQuery-selectores3.jpg 


<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   
    <style>
    p {
					    padding:5px;
					    margin:0px;
		      }
   
    </style>
    <script>
								   $(document).ready(function(){
											   $('p:even').css('background-color','#f8f8f8');
											   $('p:odd').css('background-color','#9ACD32');
											   $('li:odd').css('background-color','#9ACD32');
								   });
	    </script>

		    <body>
					   
					    <h3>PÁRRAFOS</h3>
					    <p class="lista">El usuario 1 ha dejado un mensaje</p>
					    <p class="lista">El usuario 2 ha dejado un mensaje</p>
					    <p class="lista">El usuario 3 ha dejado un mensaje</p>
					    <p class="lista">El usuario 4 ha dejado un mensaje</p>
					   
					    <br><br>
					   
					    <h3>LISTA UL</h3>
					   
		    		    <ul>
					    <li class="lista">El usuario 1 ha dejado un mensaje</li>
					    <li class="lista">El usuario 2 ha dejado un mensaje</li>
					    <li class="lista">El usuario 3 ha dejado un mensaje</li>
					    <li class="lista">El usuario 4 ha dejado un mensaje</li>
					    </ul>
		    </body>


SELECTOR PRIMERO (First) E ÚLTIMO (Last)  
Estos selectores nos permiten manipular el primero y el ultimo elemento de una lista determinada, por ejemplo establecemos la lista en color gris, el primer elemento en verde y el ultimo elemento en azul.

JQuery-selectores4.jpg 


<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   
    <style>
    li {
					    padding:5px;
					    margin:0px;
		      }
   
    </style>
    <script>
								   $(document).ready(function(){  
											   $('li').css('background-color','#dddddd');					 
											   $('li:first').css('background-color','#9ACD32');
											   $('li:last').css('background-color','#6495ED');
								   });
	    </script>

		    <body>
		   
					    <h3>LISTA UL</h3>
					   
					    <ul>
					    <li class="lista">El usuario 1 ha dejado un mensaje</li>
					    <li class="lista">El usuario 2 ha dejado un mensaje</li>
					    <li class="lista">El usuario 3 ha dejado un mensaje</li>
					    <li class="lista">El usuario 4 ha dejado un mensaje</li>
					    </ul>
		    </body>

SELECTOR FOCUS 
El foco sobre un elemento se activa al hacer clic sobre un elemento y se desactiva al hacer clic en otra zona de la web o en otro elemento. Veremos un ejemplo con un formulario de login, creamos la clase .focologin y luego la aplicamos sobre el identificador del formulario #login para afectar a todos los elementos que contiene. También podemos aplicarlo a una capa o bloque div y colocar el formulario dentro del bloque.

JQuery-selectores5.jpg 


<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   
    <style>
  .focologin {
    background: #90EE90;
  }
  </style>
   
		    <body>
					   
					   
					   
					    <h3>FORMULARIO </h3>
					    <form id="login">
					    Usuario: <input type="text" name="usuario">
Clave: <input type="password" name="clave">
<input type="submit" value="Login">
					   
					    </form>
					   
					    <script>
$( "#login" ).delegate( "*", "focus blur", function() {
  var elem = $( this );
  setTimeout(function() {
    elem.toggleClass( "focologin", elem.is( ":focus" ) );
  }, 0 );
});
</script>
					   
		    </body>


Asignar o cambiar un estilo css a un elemento con AddClass 
Si queremos asignar un estilo css dinámicamente o que cambiar según alguna condición establecida utilizaremos AddClass. En este caso tenemos una clase .botonverde y a los input tipo text le asignamos la clase .cajatexto desde Jquery. El input tipo password no se ve afectada y el botón submit tampoco ya que no les hemos asignado ninguna clase css.

<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   
    <style>
  .botonverde {
    background: #90EE90;
    border: solid 2px blue;
  }
  .cajatexto {
    background: #FFFF00;
    border: solid 2px #000000;
  }
  </style>
   
		    <body>
											  
					    <h3>FORMULARIO REGISTRO</h3>
					    <form id="registrarse">
					    Nombre: <input type="text" name="nombre"><br>
					    Domicilio: <input type="text" name="domicilio"><br>
					    Tel&eacute;fono: <input type="text" name="telefono"><br>
Email: <input type="password" name="email"><br>
<input type="submit" value="Enviar">
					     <input type="button" value="Cancelar">
					    </form>
					   
					    <script>
 $( ":button" ).addClass( "botonverde" );

  $( ":text" ).addClass( "cajatexto" );
</script>

					   
		    </body>

JQuery-selectores6.jpg


SELECTOR EQUALS O IGUAL 
Este selector permite identificar un elemento de una matriz de elementos según la posición en que se encuentra por ejemplo una celda de una tabla, debemos tener en cuenta que los elementos se enumeran como los índices de una matriz comenzando por 0,1,2,etc

JQuery-selectores7.jpg 


<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<body>
<table border="1">
		    <tr>
<th>Titulo A</th>
<th>Titulo B</th>
<th>Titulo C</th>
</tr>
<tr>
<td>Celda 0</td>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr
<td>Celda 3</td>
<td>Celda 4</td>
<td>Celda 5</td>
</tr>
</table>
<script>
$( "td:eq( 0 )" ).css( "color", "yellow" );
$( "td:eq( 0 )" ).css( "background", "Green" );
$( "td:eq( 4 )" ).css( "color", "white" );
$( "td:eq( 4 )" ).css( "background", "blue" );
</script>
</body>
</html>


Continuando con las tablas y la aplicación de selectores, veremos como crear un diseño de fondo de forma de alternada en los colores de filas de una tabla, similar a lo aplicado anteriormente con párrafos y listas. No añadimos tanto css ni diseño como para que se aprecie mejor el efecto basicamente.

JQuery-selectores8.jpg 


<html>
    <head>
					    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
table { font-size:12px; }
</style>
</head>
<body>
<table border="1" width="500">
		    <h2>CALENDARIO DE CURSOS</h2>
<tr>
    <td >Horarios</td>
    <td ><span ><strong>LUNES</strong></span></td>
    <td ><span ><strong>MARTES</strong></span></td>
    <td ><span ><strong>MIERCOLES</strong></span></td>
    <td ><span ><strong>JUEVES</strong></span></td>
    <td ><span ><strong>VIERNES</strong></span></td>
  </tr>
  <tr>
    <td >10:00 - 12:00</td>
    <td >Desarrollo web / CSS</td>
    <td >Desarrollo web / JQUERY</td>
    <td >Programaci&oacute;n web / PHP</td>
	  <td >Desarrollo web / JQUERY</td>
	   <td >Programaci&oacute;n  / JAVA</td>
	 </tr>
  <tr>
    <td >21:00 - 22:00</td>
  <td >Bases de datos / MYSQL</td>
    <td >Desarrollo web / JQUERY</td>
    <td >Programaci&oacute;n  / JAVA</td>
    <td >Programaci&oacute;n web / PHP</td>
    <td >&nbsp;</td>
  </tr>
  <tr>
    <td >22:00 - 23:00</td>
	 <td >Programaci&oacute;n web / PHP</td>
    <td >Desarrollo  web / CSS</td>
  <td >Programaci&oacute;n  / JAVA</td>
    <td >&nbsp;</td>
    <td >&nbsp;</td>
  </tr>

</table>
  <script>
					    $(document).ready(function(){
    $("tr:odd").css("background-color", "#F8f8f8"); // filas impares
    $("tr:even").css("background-color", "#8FAE70"); // filas pares
});
</script>

</body>

SELECTOR nth-child 
Continuando con el ejemplo anterior podemos utilizar como complemento el selector nth-child similar al selector eq, pero la diferencia es que con nth-child, se puede indicar posiciones en forma de operación aritmética. Se utiliza para seleccionar uno o varios elementos pero con la condición de que sea el hijo enésimo de su padre. Este selector es útil para seleccionar el segundo párrafo de un bloque o el tercer elemento de una lista, etc. Los elementos no se toman como una matriz sino por orden primero, segundo, etc

Por ejemplo si en el script anterior le añadimos
<script>
$( "td:nth-child(2n+1)" ).css("background-color", "red");
</script>
Se seleccionaran las columnas impares en este caso

JQuery-selectores9.jpg


Otros ejemplos de utilización practica de este selector serian
  • Columnas Impares nth-child(2n+1)
  • Columnas Pares nth-child(2n)
  • Primer y cuarta columna nth-child(3n+1)

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X
Identificarse

Formulario para iniciar sesión, si necesitas una cuenta Regístrate!

  He olvidado mi contraseña
IDENTIFICARSE
  Realizar Pregunta
¿Sigues sin solución a tu pregunta? Realiza una nueva: Crear Pregunta