Noticias

Entradas populares

  • Manual jQuery-Método .css()
    Método .css() En algunos casos se necesita aplicar estilos que son dificil de definir en hojas de estilo externas, en esas ocasiones podemo...
  • Skyscraper
    Es un simulador de construcción de edificios 3d en tiempo real, simula las características generales de construcción tales como creación de...
  • OpenMeetings-Descargar
    OpenMeetings es un software gratuito que permite crear instantáneamente una conferencia en la Web. Permite utilizar el micrófono o cáma...
Mostrando entradas con la etiqueta selectores jQuery. Mostrar todas las entradas
Mostrando entradas con la etiqueta selectores jQuery. Mostrar todas las entradas

Manual jQuery-Selectores Personalizados

Posted by edukt on lunes, 13 de diciembre de 2010 , under , , | comentarios (0)



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


































Manual jQuery-Selectores jQuery



 Posted by  edukt
        on  , under 
,
,

 |    
comentarios (0)








       

Para penetrar en el árbol del DOM jQuey utiliza:
  • Selectores CSS
    • 

  • Selectores XPath
    • 

  • Selectores personalizados
    • 

  • Método transversal del DOM
    • 

El DOM es simplemente una ordenación de la estructura en forma de árbol que describe la relación entre los componentes de una página utilizando el concepto padre-hijo. A continuación se presenta un ejemplo con la estructura en árbol del DOM 



<html>
<head>
<title>the title</title>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
</div>
</body>
</html>



Todos los elementos son descendientes de html por lo  tanto head y body son hijos directos de la etiqueta html, de igual  manera, el body contiene otros hijos y así sucesivamente con todos los  elementos.  





                                  
¿Cómo utilizar los selectores jQuery?



No importa el tipo de selectores, siempre es necesario comenzar con la función factory que elimina la necesidad de hacer loop en los diferentes elementos del DOM de nuestra página, la función realiza por sí misma el recorrido en todos los elementos con solo escribir $() y lo que pongamos entre paréntesis es almacenado como un objeto jQuery.



                                  
Dentro de esta función factory podemos poner cualquier cosa  algunos ejemplos son:



Selector    CSS                                JQuery                      
Etiqueta      p                                    $('p')            
ID              #algun-id                        $('#algun-id') 
Clase      .algunaclase                       $('.algunaclase') 



 $('p')                    Selecciona todo los párrafos el documento

 $('#some-id')         Selecciona todos los elementos que tiene como ID  algún-id 

$('.some-class')       Selecciona todos elementos que tienen como clase algunaclase




Todos los elementos son recorridos de forma automática e implícita utilizando $() que es un sinónimo o equivalente a escribir  jQuery (), este último comando es útil cuando se utiliza otros lenguajes que también utilizan el operador de $, en esos casos es mejor escribir explícitamente jQuery().



JQuery soporta la mayoría de selectores soportados por las especificaciones CSS de la 1 a la 3 como se puede ver en http://www.w3.org/Style/CSS/#specs. La ventaja de esto es que permite que se puedan construir sitios web sin preocuparse en cómo se visualizará la aplicación en otros navegadores como por ejemplo en el IE6 que no siguen algunos estándares.

 
Veremos un ejemplo del uso de selectores, comencemos estudiando el siguiente código  html de un menú que utiliza listas desordenas anidadas: 



<!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>Bienvenido a esta Web</title>

<!--Hoja de estilo-->


<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--Referencia a libreria jQuery-->


<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="ejemplo.js" type="text/javascript"></script>
</head>





<body>

  <ul id="item-seleccionado">

     <li>Manuales

      <ul>

             <li>Introducción a jQuery</li>

             < li>Efectos en jQuery</li>

       </ul>

    </li>

   <li>Sitios

        <ul>

              <li>Sitio Oficial jQuery</li>

            <li>Blog sobre jQuery</li>

       </ul>

   </li>

</ul>

</body>





</html>



                                  
Lo que pretendemos realizar es  poner  horizontalmente  las opciones primarias del menú.
                                  
Necesitamos crear un archivo llamado estilo.css como el siguiente:


 @charset "utf-8";
/* CSS Document */
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
.sub-nivel {
background-color:#CCCCCC;
}

 
La clase horizontal hace que un elemento flote  a la izquierda. Hasta aquí ninguna diferencia de trabajar con CSS y HTML , para aplicar dinámicamente y en pocas líneas aplicar este estilo a elementos del documento HTML.

Luego creamos el archivo JavaScript ejemplo.js que tiene el código jQuery:

  $(document).ready(function() {
$('#item-seleccionado > li').addClass('horizontal');
});

  




 A continuación explicamos este código: 








$(document).ready(function() {

}); 


 Estas lineas ejecutan todo lo que se encuentre dentro de las llaves cuando todos los elementos del DOM estén cargados por medio del método ready, como parámetro le pasamos una función anónima que nos permite no hacer referencia a una función en concreto.



 Ahora estudiemos la línea  $('#item-seleccionado > li').addClass('horizontal');




$('#item-seleccionado > li'): Indica un selector al cual le aplicaremos una clase. El signo > es un combinador que significa que le queremos aplicar la clase a los hijos del elementos que tiene el id ítem-seleccionado.


addClass('horizontal'): Agrega la clase horizontal del archivo CSS.



 Si a los demás elementos de la lista le queremos aplicar otra clase podemos utilizar el siguiente filtro: 



$('#item-seleccionado li:not(.horizontal)').addClass('sub-nivel');



 Lo que se indica en la linea anterior es que se le apliqué la clase sub-nivel  a todos los elementos que  son descendientes de ítem-seleccionado y que además no tengan aplicado la clase horizontal. Lo único que se hace es aplicarle un color de fondo y el resultado es el siguiente. 




 En el próximo post  veremos el tema de los SELECTORES XPath que es un tipo de lenguaje para identificar sus elementos y valores dentro de documentos XML similar a como CSS identifica elementos en HTML.