3D Technology

Noticias

Manual jQuery-Métodos Transversales

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

Los selectores de jQuery que hemos explorado hasta ahora nos permiten seleccionar un conjunto de elementos como navegar a través y hacia abajo del árbol DOM y filtrar los resultados. Si esta fuera la única manera de seleccionar los elementos, nuestras opciones serían bastante limitadas. Hay muchas ocasiones en la que la selección de un elemento padre es esencial, aquí es donde los métodos de jQuery para el recorrido del DOM entran en juego. Con estos métodos a nuestra disposición, podemos ir hacia arriba, abajo, y en todo el árbol DOM con facilidad.

Para navegar por esa estructura del DOM contamos con métodos como:

next()-Que nos permiten seleccionar el siguiente elemento.

$(document).ready(function() {

$('td:contains(Henry)').next().addClass('highlight');

});

Aplica la clase highlight a las celda siguiente a la que tiene el contenido Henry.

siblings()-Para seleccionar hermanos del elemento pasado como parámetro.

parent()-Selecciona el padre del parametro que se le pasa.

$(document).ready(function() {

$('td:contains(Henry)').parent().children().addClass('highlight');

});

Este comando lo que hace es que selecciona el padre de las celdas que contienen la palabra Henry, que en este caso seria <tr> y luego se seleccionan las filas con el método children().

Algunos de los métodos pueden combinarse de diferente forma para lograr expresiones de selección complejas. Por ejemplo, la línea que utilizó por primera vez para agregar la clase alt, $ ('tr: odd').addClass ('alt'), podría ser reescrito con el método filter () de la siguiente manera:

$('tr').filter(':odd').addClass('alt');

filter() en particular, tiene un enorme poder, ya que puede tener una función como argumento. La función o argumento nos permite crear filtros complejas que permiten seleccionar a que elementos deben de aplicarse la clase alt.

Encadenamiento

En jQuery es posible con una sola linea de código seleccionar varios elementos del DOM y realizarle cambios. El ejemplo de encadenamiento es el siguiente:

$('td:contains(Henry)') // Busca todas las celdas que tienen Henry

.parent() // Selecciona su padre

.find('td:eq(1)') // busca la segunda celda

.addClass('highlight') // Aplica la clase "highlight"

.end() // Regresa a la celda inicial que tiene la palabra henry

.find('td:eq(2)') // Busca la tercera celda

.addClass('highlight'); // Aplica la clase "highlight"

El objetivo del ejemplo anterior es simplemente demostrar la gran flexibilidad que permite el encadenamiento en jQuery.

Manual jQuery-Selectores Personalizados

Posted by edukt on , under :even, :odd, selectores jQuery | 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 de atributos

Posted by edukt on , under | comentarios (0)

Los selectores de atributos, son un subgrupo particularmente útil de los selectores CSS. Ellos nos permiten especificar un elemento de las propiedades HTML, como atributos de título de un vínculo o un atributo alt de una imagen. Por ejemplo, para seleccionar todas las imágenes que tienen un atributo "alt", escribimos lo siguiente:

$('img[alt]')

Los selectores de atributos aceptar una sintaxis de comodín inspirada en las expresiones regulares para identificar el valor al principio (^) o final ($) de una cadena.

Ellos también pueden tener un asterisco (*) para indicar el valor en una posición arbitraria dentro de una cadena o un signo de exclamación para indicar un valor negado.

Volviendo al ejemplo anterior queremos tener diferentes estilos para cada enlace pare ello cambiamos un poco el body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Bienvenido a esta Web</title>

</head>

<body>

<li>Manuales

<ul>

<li><a href="manual.pdf">Introducción a jQuery</a></li>

<li><a href="manual2.pdf">Efectos en jQuery</a></li>

</ul>

</li>

<li>Sitios

<ul>

<li><a href="http//jquery.com">Sitio Oficial jQuery</a></li>

<li><a href="mailto:edukt2011@gmail.com">Blog sobre jQuery</a></li>

</ul>

</li>

</ul>

</body>

</html>

Lo primero es definir los estilos en la hoja de estilo. Creamos un estilo para los enlaces y uno para los que tengan pdf,link y mailto.

@charset "utf-8";

/* CSS Document */

.horizontal {

float: left;

list-style: none;

margin: 10px;

}

.sub-nivel {

background-color:#CCCCCC;

}

a {

color: #00c;

}

a.mailto {

background: url(images/mail.png) no-repeat right top;

padding-right: 18px;

}

a.pdflink {

background: url(images/pdf.png) no-repeat right top;

padding-right: 18px;

}

a.bloglink {

background-color: #fff;

padding: 2px;

border: 1px solid #000;

}

Luego escribimos el código jQuery que permitirá buscar explesiones en una cadena.Para agregar una clase para todos los enlaces de correo electrónico, se construye un selector que busca todos los elementos de anclaje (a) con un atributo href ([title) que comienza con mailto: (^ = mailto:]), de la siguiente manera:

$(document).ready(function() {

$('a[href^=mailto:]').addClass('mailto');

});

Para agregar una clase para todos los enlaces a los archivos PDF, se utiliza el signo de dólar en lugar del símbolo de intercalación. Esto se debe a que estamos seleccionando los enlaces con un atributo href que termina con pdf.:

$(document).ready(function() {

$('a[href$=.pdf]').addClass('pdflink');

});

Los selectores de atributos se pueden combinar también. Podemos, por ejemplo, añadir unbloglink clase para todos los enlaces con un valor de href que tanto empieza por httpy contiene blog en cualquier lugar:

$(document).ready(function() {

$('a[href^=http][href*=blog]').addClass('bloglink');

});

El archivo ejemplo.js queda de la siguiente manera:

$(document).ready(function() {

$('#item-seleccionado > li').addClass('horizontal');

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

});

$(document).ready(function() {

$('a[href^=mailto:]').addClass('mailto');

$('a[href$=.pdf]').addClass('pdflink');

$('a[href^=http][href*=blog]').addClass('bloglink');

});

Manual jQuery-Selectores jQuery

Posted by edukt on , under factory, filtros jQuery, selectores jQuery | 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>

</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.

Manual jQuery-Primer Ejemplo jQuery

Posted by edukt on jueves, 9 de diciembre de 2010 , under | comentarios (0)

Hola Mundo en jQuery

Para el primer ejemplo jQuery necesitamos:

1-Incluir una referencia a la librería

2-Manejar un evento que responda cuando la página se cargo en el navegador.

3-Desplegar una alerta que indique que el manejador de eventos se llamó y que jQuery está funcionando.

Lo primero es incluir una referencia al archivo .css y a los archivos JavaScript en la cabecera de nuestro archivo HTML.

Es importante que la etiqueta de secuencia de comandos para la biblioteca jQuery se coloque antes de la etiqueta para nuestros scripts personalizados, de lo contrario, el Framework de jQuery no estará disponible cuando nuestro código intenta hacer referencia a ella.

El archivo estilo.css contiene el siguiente código:

@charset "utf-8";
/* CSS Document */

body {
font: 62.5% Arial, Verdana, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
.poema {
margin: 0 2em;
}
.highlight {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
margin: 0.5em 0;
background-color: #ffc;
}

El archivo JavaScript que se encarga de seleccionar la clase poema-estrofa y le aplica el estilo.highlight es ejemplo.js que tiene el siguiente código:

$(document).ready(function() {
$('.poema-estrofa').addClass('highlight');
});

El mecanismo tradicional para el control JavaScript es llamar el código desde los manejadores de eventos. Muchos manejadores están disponibles para iniciar eventos, como clics del mouse y pulsaciones de teclas. Si no tuviéramos jQuery disponible para nuestro uso, sería necesario contar con el manejador de evento onload, que se activa después que la página junto con todas sus imágenes, se han cargado. Para disparar el código del evento onload, debemos colocar el código dentro de una función:

function PoemaEstrofa()
{
$('.poema-estrofa').addClass('highlight')
};

Luego se deberia hacer referencia a nuestra función desde el body. Esto hace que nuestro código se ejecute después de que la página se ha cargado completamente.Hay inconvenientes con este enfoque. Si se quiere aplicar este efecto hay que realizar modificaciones en los body de cada una de las páginas, aumentando la posibilidad de error y complicando los flujos de trabajo paralelos para los diseñadores y programadores.

jQuery elimina este problema debido a que nos permite programar las llamadas a funciones del DOM sin esperar a que las imágenes se carguen por medio del contructor $ (document). ready (). Con nuestra función definida, podemos escribir:

Esta técnica no requiere ninguna modificación de HTML. En cambio, el comportamiento se une por completo desde el archivo JavaScript.

Utilizando funciones anónimas, podemos escribir el código tal como se presenta :

$(document).ready(function() {
$('.poema-estrofa').addClass('highlight');
});

Mediante el uso de la palabra clave function sin un nombre, se define una función exactamente donde se necesita, y no antes. Las estrofas poema están en cursiva y encerrados en cajas, según lo especificado por

la hoja de estilo estilo.css, debido a la inserción de la clase highlight por medio del código JavaScript.

Ahora tenemos una idea de por qué un desarrollador podría optar por utilizar un Framework de JavaScript en lugar de escribir todo el código desde cero, incluso para las tareas más básicas. También hemos visto algunas de las formas en las que sobresale jQuery como Framework, y por qué podríamos optar por otras opciones.

Manual jQuery-Descargar jQuery

Posted by edukt on , under | comentarios (0)

El sitio web oficial de jQuery (http://jquery.com/) es siempre la información más actualizada de los recursos para el código y noticias relacionadas con la libreria. Para empezar, necesitamos una copia de jQuery, que se puede descargar desde la página principal del sitio.

Varias versiones de jQuery pueden estar disponibles en cualquier momento dado, el más apropiado para nosotros como desarrolladores de sitios será la última versión sin comprimir. Esto puede ser reemplazado por una versión comprimida en entornos de producción.

Al dar clic en download nos envia a Google Code para descargar la última versión de la libreria.

No se requiere instalación. Para usar jQuery, sólo tenemos que colocarlo en nuestro sitio en un lugar público junto con la página. JavaScript es un lenguaje interpretado, no hay ninguna compilación o fase de construcción de que preocuparse.

Hay que recordar que para la inclusión de la libreria necesitamos un archivo HTML e incluirla como un archivo JavaScript.

Manuales jquery

Posted by edukt on , under jquery form, jquery select, manuales jquery, menu jquery, tutoriales jquery | comentarios (0)

En los siguientes enlaces se puede descargar manuales de jquery que nos enseñan como crear desde un menú jquery hasta un jquery plugin.

Manual de JQuery creado por desarrolloweb.com

http://www.scribd.com/doc/36784059/Manual-Jquery

Tutoriales Oficiales en Inglés:

Cómo trabajar en jQuery de John Resig.
Una introducción básica a jQuery y los conceptos que usted necesita saber para usarlo.

Introducción a jQuery por Jörn Zaefferer
Pasa a través de los conceptos básicos de jQuery, hasta llegar a la creación de plugins jquery.

JQuery para diseñadores de Mark Panay
Ejemplos de la escritura discreto JavaScript para añadir un comportamiento simple de una página web.

Ejemplos de jQuery en vivo por Cody Lindley
Una demostración interactiva de los fundamentos detrás de jQuery.

Manuales jquery en español:

Cómo crear un menú de pestañas elegante en jQuery publicado por Web.Ontuts
Cómo validar un formulario utilizando PHP y Javascript (jQuery) publicado por Web.Ontuts
Cómo crear un Menú Contextual en Javascript mediante jQuery publicado por Web.Ontuts
Cómo crear un Plugin para jQuery publicado por Web.Ontuts
Mejorando las cajas de búsqueda mediante jQuery publicado por Web.Ontuts
JSONP, llamadas entre dominios (incluye plugin para jQuery) publicado por Web.Ontuts
JavaScript fácil y rápido con jQuery
Eventos en jQuery
Conceptos esenciales de la librería JQuery Además incluye una variedad de ejercicios en el sitio los cuales puedes: probarlos, modificarlos y ver los resultados inmediatamente.
Introducción a jQuery

Haciendo Tablas Cebra Facilmente by Jack Born
Esta es una traducció del artí "Zebra Striping Made Easy" de Jack Born. Pequeño tutorial a través de ejemplos sencillos de código para hacer tablas tipo cebr

Otros manuales:

Logo

Mi lista de blogs

Entradas populares

Manual jQuery-Métodos Transversales

Manual jQuery-Selectores Personalizados

Manual jQuery-Selectores de atributos

Manual jQuery-Selectores jQuery

Manual jQuery-Primer Ejemplo jQuery

Manual jQuery-Descargar jQuery

Manuales jquery

Twitter Updates

Categories

Proyectos

Contador

Actualizaciones

Visto en

Advertisement

Mi lista de blogs

Entradas populares

Twitter Updates

Categories

Proyectos

Contador

Actualizaciones

Visto en

Ser mi amigo

Advertisement