Manual jQuery-Selectores Personalizados
lunes, 13 de diciembre de 2010
, Posted by edukt at 19:51
La sintaxis en los selectores personalizados es la misma que en las pseudo-clases de los selectores CSS, el selector inicia siempre con “:”. Por ejemplo, para seleccionar el segundo punto de un set completo de selectores div con la clase línea horizontal, se escribe lo siguiente:
$('div.horizontal:eq(1)')Existen dos selectores muy comunes que son: odd y :even , el selector odd se utiliza para seleccionar elementos impares y even para seleccionar elementos pares ,para ejemplificarlos realizaremos un ejemplo con la tabla siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Obras de Shakespeare</title>
<link rel="stylesheet" href="tabla1.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tabla1.js" type="text/javascript"> </script>
</head>
<body>
<div>
<h2>Tabla Shakespeare</h2>
<table>
<tr>
<td>Como Gustéis</td>
<td>Comedia</td>
<td>1601</td>
</tr>
<tr>
<td>A buen fin no hay mal principio</td>
<td>Comedia</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedia</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedia</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo y Julieta</td>
<td>Tragedia</td>
<td>1595</td>
</tr>
<tr>
<td>Enrique IV, Parte I</td>
<td>Historia</td>
<td>1596</td>
</tr>
<tr>
<td>Enrique V</td>
<td>Historia</td>
<td>1599</td>
</tr>
</table>
</div>
</body>
</html>Ahora podemos agregar un estilo a la hoja de estilos para todas las filas de la tabla, y el uso de una clase alt para las filas, incluso:
tr {
background-color: #cef;
}
.alt {
background-color: #ffc;
}
Por último, escribimos nuestro código jQuery, adjuntando la clase a la filas de la tabla con números pares (etiquetas <tr>):
$(document).ready(function() {
$('tr:odd').addClass('alt');
$('tr:even').addClass('tr');
});
El resultado es el siguiente:
Si queremos realizar la selección en base al contenido podemos utilizar el selector contains, la siguiente linea muestra como seleccionar las filas que contengan la palabra "Enrique" y a dichas filas se les aplica la clase highlight. Este selector es case sensitive por lo que hay que tener cuidado con las Mayúsculas y minúsculas
$('td:contains(Enrique)').addClass('highlight')
Es cierto que hay formas de lograr la creación de bandas en la fila y el texto resaltado sin
jQuery o la programación del lado del cliente, para el caso. Sin embargo, jQuery, junto con CSS, es una gran alternativa para este tipo de estilo en los casos en que el contenido se genera de forma dinámica y no tenemos acceso ni al código HTML o del lado del servidor.
Selectores de Formularios.
Seleccionan los elementos de entrada con un tipo de atributo igual al nombre del selector (con exclusión de los dos puntos).
Por ejemplo :text selecciona elemento de entrada con dicho atributo <input type="text"> esto también se aplica a Input, textarea, select, y elementos button.
Otros selectores de formulario son:
:button-Elementos de entrada que tienen atributos button
:enabled-Selecciona elementos de los formularios que están habilitados.
:disabled-Selecciona elementos de los formularios que están deshabilitados.
:checked-Botones de radio o casillas de verificación que están verificadas.
:selected-Opciones que están seleccionadas
Currently have 0 comentarios: