viernes, 31 de octubre de 2014

Efecto de tip simple en jQuery con los eventos mouseenter y mouseleave - II

Veamos el código completo de una página que implementa este mecanismo para producir tips en jQuery.

<html>
<head>
<title>Trabajando con eventos - Tip simple</title>
<style type="text/css">
.tip{
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
}
</style>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#elemento1").mouseenter(function(e){
$("#tip1").css("left", e.pageX + 5);
$("#tip1").css("top", e.pageY + 5);
$("#tip1").css("display", "block");
});
$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});
$("#elemento2").mouseenter(function(e){
$("#tip2").css("left", e.pageX + 5);
$("#tip2").css("top", e.pageY + 5);
$("#tip2").css("display", "block");
});
$("#elemento2").mouseleave(function(e){
$("#tip2").css("display", "none");
});
})
</script>
</head>
<body>
<h1>Trabajando con eventos en jQuery</h1>
<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de
este "elemento1".</div>
<p>
Este texto es para poner <a id="elemento2" href="#">otro elemento con tip</a>.
</p>
<div class="tip" id="tip1">Esto es para explicar algo sobre el elemento1</div>
<div class="tip" id="tip2">Explico mejor este otro elemento con tip!!</div>
</body>
</html>

Ahora podemos ver el ejercicio en marcha. Con esto estamos aprendiendo un poco más sobre eventos en jQuery. Hemos visto un par de aplicaciones interesantes de eventos de ratón, concretamente mouseenter y mouseleave Pero aun nos quedan bastantes cosas por ver que dejaremos para próximos artículos. 
Nota: Tenemos un video titulado "Videotutorial: manejo de eventos al detalle en jQuery" que os puede ayudar con esto de los eventos.

jueves, 30 de octubre de 2014

Efecto de tip simple en jQuery con los eventos mouseenter y mouseleave - I

En el artículo anterior mostramos cómo averiguar la posición del ratón al hacer clic en un elemento. Así que ahora vamos a utilizar esos conocimientos para hacer un sencillo ejemplo de eventos donde crearemos un típico efecto de tip. 
Para realizar este efecto tendremos dos elementos, el primero será un elemento visible en todo momento y el segundo será un elemento oculto, el tip, que se mostrará sólo al pasar el ratón sobre el primer elemento. Para realizar cosas cuando el ratón entra y sale de un elemento, utilizaremos los manejadores de eventos de jQuery mouseenter y mouseleave, que se producen al entrar con el ratón sobre un elemento y al salir del elemento respectivamente. 
Así pues, los eventos mouseenter y mouseleave los tendremos que crear sobre el elemento que permanece siempre visible, mostrando y ocultando la capa que contiene el tip. 
Veamos antes que nada el HTML que tendremos, con el elemento visible y su tip.

<div id="elemento1" style="background-color: #ccccff; padding: 5px;">Pasa el ratón por encima de
este "elemento1".</div>
<div class="tip" id="tip1">Esto es para explicar algo sobre el elemento1</div>
Además, al tip le hemos aplicado estilos por medio de CSS:
background-color: #ffcc99;
padding: 10px;
display: none;
position: absolute;
Los estilos importantes aquí son display: none; (para que el elemento esté oculto inicialmente) y position: absolute; (para que lo podamos posicionar libremente por la página y sin afectar a otros elementos). Veamos ahora el código del evento mouseenter:

$("#elemento1").mouseenter(function(evento){
$("#tip1").css("left", evento.pageX + 5);
$("#tip1").css("top", evento.pageY + 5);
$("#tip1").css("display", "block");
});

Simplemente cambiamos las propiedades de CSS "left" y "top" de la capa del tip, asignando valores a través de evento.pageX y evento.pageY, las propiedades del objeto evento que nos dan la posición del ratón. Con esto situamos la capa del tip en un lugar próximo a donde estaba el ratón. Luego se cambia el atributo de CSS display de la capa del tip, al valor "block", que sirve para que ese elemento se vea en la página. Ahora veamos el evento mouseleave, para realizar acciones cuando sacamos el ratón de encima de un elemento.

$("#elemento1").mouseleave(function(e){
$("#tip1").css("display", "none");
});


Simplemente cambiamos la propiedad CSS display del tip, para el valor "none", que hace que esa capa desaparezca de la página.

miércoles, 29 de octubre de 2014

Eventos de ratón en jQuery mouseenter y mouseleave

En este artículo de DesarrolloWeb.com veremos un ejemplo de página sencilla que utiliza eventos de ratón, para la construcción de un sistema de tip muy simple, es decir, construiremos una serie de áreas "calientes" en la página, sobre las que situando el ratón por encima, aparecerá un mensaje explicativo que tenemos en otra capa. 
Como ya debemos de conocer, si hemos leído hasta este punto el Manual de jQuery, existen diversos eventos que se invocan al realizar acciones con el ratón, como clics, movimiento del puntero o posicionar el puntero sobre ciertos elementos. 
En este artículo utilizaremos mouseenter y mouseleave, que son los eventos más interesantes y útiles si queremos detectar el momento en el que entramos con el puntero del ratón sobre un elemento o salimos de su superficie. 
Además, utilizaremos el objeto evento, que recibe la función con la que implementamos el manejador del evento, que tiene diversos datos útiles sobre el evento que se acaba de ejecutar. En este artículo mostraremos cómo averiguar la posición del ratón en el momento de producirse el evento, que podemos extraer con las propiedades pageX y pageY del objeto evento. 
Nota: Para el que llegue aquí sin haber leído otras informaciones sobre eventos en jQuery, le recomendamos comenzar la lectura por el artículo de Eventos en jQuery.

lunes, 27 de octubre de 2014

Averiguar la posición del ratón al hacer clic

En el objeto evento, entre otras muchas cosas, existen dos propiedades que nos informarán sobre la posición del ratón al producirse ese evento: 
• pageX: que nos informa sobre el número de píxeles desde el lateral izquierdo de la página. 
• pageY: con el número de píxeles desde la parte de arriba de la página. 
Veamos el siguiente ejemplo:

$("#mielemento").click(function(e){
$("#mielemento").html("X: " + e.pageX + " - Y: " + e.pageY)
});

Al hacer clic en el elemento con id="mielemento" se mostrarán las coordenadas X e Y del lugar de la página donde se hizo clic. Las coordenadas se mostrarán como texto en la propia capa sobre la que se ha hecho clic. Se puede ver una página con este código en funcionamiento. Este código se puede modificar fácilmente para que se muestre las coordenadas del ratón al hacer clic en la página, independientemente de donde se haga clic y no sólo en un elemento en concreto

$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});

Como se puede ver, se ha indicado el evento "click" sobre el objeto document, que existe en Javascript y que hace referencia a todo el documento que se está visualizando. El código completo de una página que define este evento y utiliza las mencionadas propiedades del objeto evento es el siguiente.

<html>
<head>
<title>Trabajando con el objeto evento</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).click(function(e){
alert("X: " + e.pageX + " - Y: " + e.pageY)
});
})
</script>
</head>
<body>
<h1>Trabajando con el objeto evento</h1>
Haz clic en cualquier parte de la página...
</body>
</html>

Podemos ver el ejemplo en funcionamiento en una página aparte. Nota: en los ejemplos anteriores hemos visto cómo calcular la posición del ratón al hacer clic. Sin embargo, nosotros podemos calcular la posición del ratón al producirse cualquier evento, ya que el objeto evento de jQuery está disponible para cualquier evento. Por ejemplo, con este código mostramos la posición del ratón al moverlo por la página, mostrando las coordenadas en el texto de los titulares h1 que pueda haber en la página:

$(document).mousemove(function(e){
$("h1").html("X: " + e.pageX + " - Y: " + e.pageY)
});

Si lo deseas, puedes ver el script en marcha aquí. Con las nociones que tenemos en este momento sobre el objeto evento podremos continuar con las explicaciones sobre eventos, en las que utilizaremos varios aspectos de este objeto. Así pues, puedes continuar esta lectura aprendiendo acerca de los Eventos de ratón.

domingo, 26 de octubre de 2014

Introducción Objeto evento en jQuery

Vamos a hacer un inciso en el Manual de jQuery para dar una breve introducción al objeto evento en jQuery y ofrecer un ejemplo bastante práctico, para saber cuál es la posición del ratón al producirse un evento. Digo inciso porque no vamos a explicar todo lo que podremos encontrarnos en el objeto evento, sino que vamos a dar algunas nociones que deberemos conocer para poder acompañar los siguientes artículos sobre eventos. En breve crearemos un artículo que explique todas las propiedades y métodos de este importante objeto de jQuery. 
Lo cierto es que lo que vamos a explicar ahora ya lo habíamos adelantado brevemente en otros artículos anteriores en los que comenzamos a ver los eventos de jQuery. Como ya hemos empezado a utilizar el objeto de evento, no debería resultarnos del todo extraño, pero tenemos muchas otras cosas que comentar. 
Lo que ya hemos visto es que, al definir un evento con jQuery, tenemos que escribir una función con el código a ejecutar cuando se produzca el evento. Esa función recibe un parámetro, que es el objeto evento, que podemos utilizar dentro de la función del evento y que contiene diversas utilidades que pueden ser esenciales a la hora de codificar el evento. 
Como cualquier otro objeto, el mencionado objeto de evento contiene diversas propiedades y métodos, los cuales detallaremos uno por uno más adelante. Sin embargo, cabe decir que nosotros ya hemos utilizado uno de los métodos en bastantes ejemplos a lo largo de este manual. Se trata del método preventDefault() del objeto evento, que sirve para prevenir (no realizar) el comportamiento por defecto de ese evento que estamos codificando. 
El ejemplo que hemos realizado varias veces sobre preventDefault() es cuando definíamos un evento clic sobre un enlace. Cuando se hace clic sobre un enlace, el navegador se mueve a la dirección del href de ese enlace y con preventDefault() podemos evitar ese comportamiento por defecto de los enlaces. A continuación vamos a ver un ejemplo distinto de uso de las propiedades del objeto evento.

sábado, 25 de octubre de 2014

Manejadores de eventos en jQuery - II

2) Eventos relacionados con el teclado 

A continuación se muestran los eventos que pueden modelizarse como respuesta a la pulsación de teclas del teclado. 
keydown() Este evento se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presión o se mantiene. Se produce una única vez en el momento exacto de la presión. 
keypress() Este evento ocurre cuando se digita un carácter, o se presiona otro tipo de tecla. Es como el evento keypress de Javascript, por lo que se entiende que keypress() se ejecuta una vez, como respuesta a una pulsación e inmediata liberación de la tecla, o varias veces si se pulsa una tecla y se mantiene pulsada. 
keyup() El evento keyup se ejecuta en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que teníamos pulsada. Nota: a través del objeto evento, que reciben las funciones que indiquemos como parámetro de estos métodos, podemos saber qué tecla se está pulsando, aparte de otras muchas informaciones. 

3) Eventos combinados teclado o ratón 

Ahora mostramos varios eventos que pueden producirse tanto por el ratón como por el teclado, es decir, como resultado de una acción con el ratón o como resultado de presionar teclas en el teclado. focusin() Evento que se produce cuando el elemento gana el foco de la aplicación, que puede producirse al hacer clic sobre un elemento o al presionar el tabulador y situar el foco en ese elemento. focusout() Ocurre cuando el elemento pierde el foco de la aplicación, que puede ocurrir cuando el foco está en ese elemento y pulsamos el tabulador, o nos movemos a otro elemento con el ratón. focus() Sirve para definir acciones cuando se produce el evento focus de Javascript, cuando el elemento gana el foco de la aplicación. Esta enumeración de los tipos de manejadores de eventos se completa con ejemplos y explicaciones adicionales en los siguientes artículos del Manual de jQuery.

viernes, 24 de octubre de 2014

Manejadores de eventos en jQuery - I

En el capítulo anterior realizamos una primera introducción a los eventos en jQuery, que no resultaba mucho más que un simple repaso a todo lo que hemos visto hasta el momento en el Manual de jQuery que venimos publicando en DesarrolloWeb.com. Ahora veremos un listado completo de todos los eventos que podremos realizar con este framework Javascript. Con jQuery podemos implementar todos los eventos que existen en Javascript, y alguno un poco más evolucionado, para los que hay una función propia para cada uno. Lo cierto es que la documentación de jQuery, en la sección de eventos, mantiene una lista de los posibles métodos para crear eventos, aunque están mezclados con otra serie de propiedades y métodos relacionados con eventos. He aquí un resumen de los tipos de eventos con sus funciones: 

1) Eventos relacionados con el ratón 

A continuación podemos ver una lista de los eventos que se pueden definir en jQuery que tienen que ver con el ratón. Es decir, cómo definir eventos cuando el usuario realiza diferentes acciones con el ratón sobre los elementos de la página. 
click() Sirve para generar un evento cuando se produce un clic en un elemento de la página. 
dblclick() Para generar un evento cuando se produce un doble clic sobre un elemento. 
hover() Esta función en realidad sirve para manejar dos eventos, cuando el ratón entra y sale de encima de un elemento. Por tanto espera recibir dos funciones en vez de una que se envía a la mayoría de los eventos. 
mousedown() Para generar un evento cuando el usuario hace clic, en el momento que presiona el botón e independientemente de si lo suelta o no. Sirve tanto para el botón derecho como el izquierdo del ratón. 
mouseup() Para generar un evento cuando el usuario ha hecho clic y luego suelta un botón del ratón. El evento mouseup se produce sólo en el momento de soltar el botón. 
mouseenter() Este evento se produce al situar el ratón encima de un elemento de la página. 
mouseleave() Este se desata cuando el ratón sale de encima de un elemento de la página. mousemove() Evento que se produce al mover el ratón sobre un elemento de la página. 
mouseout() Este evento sirve para lo mismo que el evento mouseout de JavaScript. Se desata cuando el usuario sale con el ratón de la superficie de un elemento. 
mouseover() Sirve para lo mismo que el evento mouseover de Javascript. Se produce cuando el ratón está sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratón sobre el elemento, sin necesidad de haber salido. 
toggle() Sirve para indicar dos o más funciones para ejecutar cosas cuando el usuario realiza clics, con la particularidad que esas funciones se van alternando a medida que el usuario hace clics.

jueves, 23 de octubre de 2014

Ejemplo de evento dblclick - II

Eso es todo, aunque para completar esta información, puedes encontrar a continuación el código completo de este ejemplo de uso de eventos en jQuery.

<html>
<head>
<title>Trabajando con eventos</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
var numClics = 0;
var numDobleClics = 0;
$(document).ready(function(){
$("#micapa").dblclick(function(e){
numDobleClics++;
$("#mensaje").html("Doble Clic " + numDobleClics);
});
$("#micapa").click(function(e){
numClics++;
$("#mensaje").html("Clic " + numClics);
});
})
</script>
</head>
<body>
<h1>Trabajando con eventos en jQuery</h1>
<div id="micapa" style="padding: 10px; background-color: #ffcc99; width: 150px; float:
left;">Hazme dobleclick</div>
<div id="mensaje" style="padding: 10px; margin-left: 180px;">Aquí voy a colocar mensajes para que
los leas...</div>
</body>
</html>

Quizás quieras ver funcionando de este ejemplo de evento clic y doble-clic. 
En este artículo sólo hemos conocido los manejadores de eventos clic y doble-clic, pero hay muchos más. En el próximo artículo presentaremos un listado de los tipos de manejadores de eventos disponibles en jQuery.

miércoles, 22 de octubre de 2014

Ejemplo de evento dblclick - I

El evento doble-clic se produce cuando se realizan dos clic seguidos sobre un mismo elemento. Todos conocemos lo que es un doble clic, por lo que no necesitamos muchas más explicaciones, no obstante, tenemos que saber que cuando se produce un evento doble-clic al mismo tiempo se están produciendo eventos clic (uno por cada uno de los 2 clic del doble-clic). Para aclarar este asunto hemos hecho el siguiente ejemplo. Tenemos una capa, en la que se puede hacer doble-clic, pero que también tiene definido un evento clic. Entonces, al hacer un doble clic podremos comprobar que se producen dos eventos clic y después un doble-clic. 
Este es el código HTML con el que vamos a trabajar:

<div id="micapa" style="padding: 10px; background-color: #ffcc99; width: 150px; float: left;">Hazme
dobleclick</div>
<div id="mensaje" style="padding: 10px; margin-left: 180px;">Aquí voy a colocar mensajes para que
los leas...</div>

Para poder saber cuántos clics y dobles clic que se realizan, vamos a crear un par de variables Javascript para contarlos.

var numClics = 0;
var numDobleClics = 0;

Ahora veamos la programación del evento clic:
$("#micapa").click(function(e){
numClics++;
$("#mensaje").html("Clic " + numClics);
})

Con $("#micapa") obtenemos el objeto jQuery de la capa donde hay que hacer clic. Con el método click() sobre ese objeto jQuery creamos el evento clic y la función que pasamos como parámetro contiene el código a ejecutar cuando se hace clic. Se trata simplemente acumular 1 en la variable que cuenta los clics y luego se muestra un texto en la capa de los mensajes. La programación del evento para el doble clic se puede ver a continuación:

$("#micapa").dblclick(function(e){
numDobleClics++;
$("#mensaje").html("Doble Clic " + numDobleClics);
});


Como se puede ver, es un código muy similar al anterior. Simplemente que se define el evento con el método dblclick(). En el código del evento acumulamos esta vez 1 en la variable que cuenta el número de dobles clic. 
Luego en el mensaje mostramos el número de doble-clic. Con ello, al hacer clic o doble-clic se mostrará el mensaje para ver la cuenta de clics y dobles clic realizados y podremos comprobar que siempre se producen dos clics antes de cualquier doble clic.

lunes, 20 de octubre de 2014

Eventos en jQuery

Los eventos son una parte fundamental en el desarrollo de aplicaciones enriquecidas del lado del cliente. Aprendemos todo sobre los eventos en jQuery.

Eventos en jQuery 

Una introducción al trabajo con eventos en el framework Javascript jQuery. Los eventos son uno de los elementos más importantes en el desarrollo de aplicaciones web enriquecidas del lado del cliente, puesto que sirven para realizar acciones en la página a medida que el usuario realiza cosas con la página. Es decir, son la base para crear la interacción con el usuario, algo tan importante en las páginas que usan jQuery. 
Así pues, merece la pena estudiar los eventos a fondo, algo que haremos a lo largo de éste y varios siguientes artículos del Manual de jQuery. No obstante, cabe decir que, a lo largo del presente manual, hemos ya trabajado en repetidas ocasiones con eventos, ya que es complicado realizar ejemplos en páginas web que no tengan aunque sea una mínima interacción con el cliente. Casi siempre nos hemos limitado al evento clic, pero hay mucho más. 
Comenzaremos por refrescar lo que ya deberíamos saber sobre los eventos, que aprendimos en uno de los primeros artículos del presente manual: Pasos para utilizar jQuery en tu página web. 
Nota: Puedes ver el videotutorial Introducción a los eventos en jQuery para que te sea más sencillo todo. A la vista de este código que trabaja con eventos podemos entender un poco mejor cómo funcionan en jQuery:

$(".mienlace").click(function(mievento){
mievento.preventDefault();
alert("Has hecho clicnComo he hecho preventDefault, no te llevaré al href");
});


1. El evento se define sobre todos los elementos de un objeto jQuery. En este ejemplo se define sobre el objeto jQuery obtenido al invocar el selector ".mienlace"), que devolvería todos los elementos que tienen el atributo class como "mienlace". Por tanto definiré un evento sobre un número variable de elementos de la página que concuerden con ese selector. 
2. El tipo de evento se define a partir de una función click() o similares. Existen diferentes tipos de funciones que implementan cada uno de los eventos normales, como dblclick(), focus(), keydown(), etc. 
3. Como parámetro en la función click() o similares tenemos que enviar una función, con el código que pretendemos ejecutar cuando se produzca el evento en cuestión. 
4. La función que enviamos por parámetro con el código del evento, en este caso la función a ejecutar al hacer clic, tiene a su vez otro parámetro que es el propio evento que estamos manejando. En el código anterior tenemos la variable "mievento", que es el evento que se está ejecutando y a través de esa variable tenemos acceso a varias propiedades y métodos para personalizar aun más nuestros eventos. 
5. Como decimos, existen diversos tipos de propiedades y métodos sobre el evento que recibo por parámetro. En este caso utilizamos mievento.preventDefault() para evitar el comportamiento por defecto de un enlace. Como sabemos, al pulsar un enlace el navegador nos lleva al href definido en la etiqueta A correspondiente, algo que evitamos al invocar a preventDefault() sobre nuestro evento. Convenía explicar todos estos puntos, aunque probablemente ya los conocíamos, si es que hemos seguido con atención este Manual de jQuery. Es importante que el lector tenga en mente esta estructura de trabajo con eventos para poder asimilar fácilmente los nuevos conocimientos. Si lo deseamos, podemos ver el anterior script en marcha en una página aparte. 
En el ejemplo anterior vimos cómo realizar un evento clic, pero claro que no es el único evento que podemos aplicar a una web. En el próximo artículo veremos un listado de los tipos de evento disponibles en jQuery, pero antes de eso vamos a ver un ejemplo adicional sobre eventos, en el que vamos a incorporar el evento dblclick que aun no habíamos visto.

domingo, 19 de octubre de 2014

Ejemplo completo sobre los métodos de dimensiones y posición de elementos

Las dos funciones anteriores las podemos ver en marcha en un ejemplo que hemos creado para poder explicar mejor todos los métodos comentados en este artículo de DesarrolloWeb.com. En el ejemplo simplemente se realizan las acciones para averiguar las posiciones y dimensiones de un par de elementos de la página. Además, tenemos un par de botones para alterar el CSS de los elementos dinámicamente y así volver a ver sus posiciones y dimensiones y comprobar cómo han cambiado. Realmente no sirve de mucho el ejemplo, pero al menos esperamos que resultará bastante didáctico. Podemos verlo en marcha en una página aparte. Ahora el código de este ejemplo, que no debería resultar muy complicado si hemos seguido el manual de jQuery hasta este punto.

<html>
<head>
<title>Funciones CSS en jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script type="application/x-javascript">
function dimensionCapa(capa){
capa = $(capa);
var dimensiones = "";
dimensiones += "Dimensiones internas: " + capa.innerWidth() + "x" + capa.innerHeight();
dimensiones += "\nDimensiones externas: " + capa.outerWidth() + "x" + capa.outerHeight();
alert(dimensiones);
}
function posicionCapa(capa){
capa = $(capa);
var posicion = "";
posicion += "Posición relativo al documento:\nLEFT: " + capa.offset().left + "\nTOP:" +
capa.offset().top;
posicion += "\n\nPosición si no tuviera margen:\nLEFT: " + capa.position().left + "\nTOP:" +
capa.position().top;
alert(posicion);
}
$(document).ready(function(){
$("#botondimensiones").click(function(){
dimensionCapa("#capa1");
});
$("#botonposicion").click(function(){
posicionCapa("#capa1");
});
$("#botontamano").click(function(){
$("#capa1").css("width", 200);
});
$("#botonmargen").click(function(){
$("#capa1").css("margin", 20);
});
$("#botondimensionesc2").click(function(){
dimensionCapa("#capa2");
});
$("#botonposicionc2").click(function(){
posicionCapa("#capa2");
});
});
</script>
</head>
<body>
<h1>Funciones CSS en jQuery de dimensiones y posición</h1>
<p>Probando funciones de localización de elementos en la página...</p>
<div id="capa1" style="padding: 24px; background-color: #ffccdd; float: left; border: 2px dotted
#666;">
<h2>capa1:</h2>
Voy a crear esta capa para ver lo que mide y donde está posicionada.
</div>
<br style="clear: both;">
<div style="margin: 10px;">
<button id="botondimensiones" type="button">Dimensiones de capa1</button>
<button id="botonposicion" type="button">Posicion de capa1</button>
<button id="botontamano" type="button">Cambiar tamaño capa1</button>
<button id="botonmargen" type="button">Cambiar margen capa1</button>
</div>
<div style="margin: 10px;">
<button id="botondimensionesc2" type="button">Dimensiones de capa2</button>
<button id="botonposicionc2" type="button">Posicion de capa2</button>
</div>
<br>
Desplaza la página hacia abajo para ver la capa2...
<br>
<br>
...
<br>
<div id="capa2" style="background-color:#ccc; border-bottom: 5px solid #999; margin-left: 10px;">
Esta capa está muy hacia abajo!!
</div>
</body>
</html>

sábado, 18 de octubre de 2014

Función para mostrar la posición de un elemento

Ahora vamos a hacer una función similar a la anterior para mostrar un ejemplo de uso de las funciones position() y offset(). Esta función recibe un selector y muestra la localización de este elemento, tal como me la devuelven los métodos position() y offset().

function posicionCapa(capa){
capa = $(capa);
var posicion = "";
posicion += "Posición relativo al documento:\nLEFT: " + capa.offset().left + "\nTOP:" +
capa.offset().top;
posicion += "\n\nPosición si no tuviera margen:\nLEFT: " + capa.position().left + "\nTOP:" +
capa.position().top;
alert(posicion);
}

Si invocamos esta función sobre un elemento cualquiera que no tenga margen, las dos posiciones devueltas por position() y offset() serán las mismas, pero si aplicamos un margen a ese elemento, el elemento cambiará de lugar en la página y entonces el valor de offset() también cambirá, pero no el de position().

viernes, 17 de octubre de 2014

Función que muestra las dimensiones de un elemento

Por hacer unas pruebas con estos métodos, vamos a comenzar creando una función que muestra en una caja de alerta las dimensiones de un elemento cuyo selector se envíe por parámetro. A la función enviaremos el selector y luego con jQuery mostraremos sus valores de anchura y altura, tanto de la parte interior del elemento (innerWidth e innerHeight), como del elemento completo con su borde (outerWidth y outerHeight).

function dimensionCapa(capa){
capa = $(capa);
var dimensiones = "";
dimensiones += "Dimensiones internas: " + capa.innerWidth() + "x" + capa.innerHeight();
dimensiones += "\nDimensiones externas: " + capa.outerWidth() + "x" + capa.outerHeight();
alert(dimensiones);
}

Como decíamos, las dimensiones externas toman en cuenta el borde del elemento, si es que tiene, y las dimensiones internas no toman en cuenta el posible borde.

jueves, 16 de octubre de 2014

Funciones CSS de jQuery para conocer el tamaño y posición de elementos

Seguimos viendo funciones CSS del framework Javascript jQuery, en este caso las que sirven para conocer el tamaño y posición de los elementos en la página. Entre las clasificaciones de funciones jQuery que existen diversas que sirven para controlar los atributos de CSS de los elementos de la página, ya sea para acceder a los valores actuales de los atributos CSS o para alterarlos. En artículos anteriores del Manual de jQuery pudimos conocer varias de estas funciones, por ejemplo en el artículo de Añadir y quitar clases CSS sobre elementos. En este artículo vamos a ver otras de las funciones que pone a nuestra disposición jQuery para acceder a la posición de los elementos en la página y a sus dimensiones. Estas funciones, aunque estaría mejor llamarles métodos (ya que pertenecen al objeto jQuery), son meramente informativas, para saber dónde están posicionados los elementos dentro del documento y sus medidas internas y externas. Lo veremos con detalle en breve, pero antes quiero señalar para los despistados que si queremos alterar las propiedades CSS de un elemento de la página con jQuery recordemos que está disponible el método css(), que hemos visto anteriormente en repetidas ocasiones a lo largo de este manual, enviándole como primer parámetro el nombre del atributo CSS a alterar y como segundo parámetro el valor del mismo. Ahora voy a dar un listado de los métodos nuevos que vamos a ver en este artículo, comenzando por los que sirven para conocer las dimensiones de un elemento. 
Métodos innerWidth() e innerHeight(): Reciben un objeto jQuery y devuelven las dimensiones internas del primer elemento que haya en dicho objeto jQuery, esto es, la anchura y altura respectivamente del elemento contando el padding del elemento pero no el borde. 
Métodos outerWidth() e outerHeight(): Reciben un objeto jQuery y devuelven las dimensiones externas del primer elemento de dicho objeto jQuery recibido por parámetro, esto es, la anchura y altura respectivamente del elemento contando el padding del elemento y su borde. 

Nota: Como podremos imaginarnos, si un elemento no tiene borde los valores de innerWidth e outerWidth serán exactamente los mismos, así como los valores de innerHeight y outerHeight. 

Métodos offset() y position(): Ambos métodos devuelven la posición de un elemento en la página. Reciben un objeto jQuery y devuelven la localización del primer elemento que haya en ese objeto jQuery. La posición siempre se indica como valor de retorno del método por medio de un objeto que tiene dos atributos, "top" y "left", indicando los píxeles que está separado de la esquina superior izquerda del documento. La diferencia entre estos dos métodos es que offset() indica la posición del elemento real, teniendo en cuenta los márgenes del elemento, lo que suele ser más útil. Por su parte, position() indica la posición donde habría sido posicionado el elemento si no tuviera márgenes, lo que a menudo no es la posición real.

miércoles, 15 de octubre de 2014

Eliminar un atributo de uno o varios elementos con removeAttr()

Para acabar vamos a ver otro método distinto de los objetos jQuery, que sirve para borrar un atributo. Este sencillo método, llamado removeAttr(), simplemente recibe una cadena con el nombre del atributo que queremos eliminar y lo borra del elemento. Es decir, no es que se asigne un nuevo valor a un atributo, como ocurría con el método attr(), sino que ese atributo se borra por completo de la etiqueta, con lo cual no existirá en ningún caso, tomando el valor por defecto, si es que existe, que tenga configurado el navegador. 
Para mostrarlo vamos a hacer un ejemplo en el que tenemos una celda de una tabla con nowrap, con lo que el texto de esa celda aparece todo en la misma línea. Luego quitamos el atributo y veremos que el texto de la celda se partirá en varias líneas. Esto lo hacemos simplemente enviando el valor "noWrap" al método removeAttr(). El código de este ejemplo es el siguiente.

<html>
<head>
<title>método removeAttr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#boton").click(function(i){
$("td").removeAttr("noWrap");
});
});
</script>
</head>
<body>
<table width="50">
<tr>
<td nowrap>
Esta celda tiene un nowrap, con lo que todo el texto se muestra en la misma línea!
Pero realmente la tabla mide 50 pixeles de anchura, luego tendrían que aparece varias líneas!
</td>
</tr>
</table>
<input type="Button" id="boton" value="Quitar nowrap">
</body>
</html>
Un detalle es que en la línea que se hace la llamada al método removeAttr("noWrap"), el nombre del atributo "noWrap" tiene que estar escrito con la "W" mayúscula para que funcione en Explorer.

martes, 14 de octubre de 2014

Método attr() de jQuery, otros usos y removeAttr()

Un uso adicional del método attr() de jQuery, para modificar atributos con el valor devuelto de una función y borrar atributos de elementos de la página con removeAttr(). 
En el artículo anterior del Manual de jQuery ya comenzamos a explicar el método attr(), que pertenece al paquete de funciones para modificación de atributos de cualquiera de los elementos de una página web. En esta ocasión nos detendremos un uso adicionale del método attr(), que seguro nos resultarán útiles para mantener el control dinámico de los atributos de las etiquetas HTML, con sus correspondientes ejemplos. Este uso que nos faltaba por ver nos servirá cuando tenemos que asignar el valor de un atributo con la respuesta de una función Javascript. Además veremos también en este artículo otro método relacionado que sirve para eliminar por completo un atributo de cualquier elemento de la página, el método removeAttr(). 

Asignar un valor de atributo procesado por una función 

Podemos también enviar una función para procesar el valor que queremos asignar a un atributo. Para ello enviamos a attr() dos parámetros, el primero con el nombre del atributo y el segundo con la función que debe devolver el valor a asignar a dicho atributo. Para ilustrar este uso de attr() mostraremos un ejemplo en el que desde jQuery accedemos a los elementos INPUT de la página que tienen la clase CSS "fecha" y le insertamos como texto a mostrar la fecha de hoy. Para obtener el día actual necesitamos procesar cierto código Javascript y para ello crearemos una función que devuelve la cadena de texto con la fecha.

$('input.fecha').attr("value", function(indiceArray){
//indiceArray tiene el índice de este elemento en el objeto jQuery
var f = new Date();
return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
});
Para que se asimile mejor el uso de jQuery en una página, mostramos el código completo de este ejemplo.
<html>
<head>
<title>método attr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('input.fecha').attr("value", function(indiceArray){
//indiceArray tiene el índice de este elemento en el objeto jQuery
var f = new Date();
return f.getDate() + "/" + (f.getMonth() +1) + "/" + f.getFullYear();
});
});
</script>
</head>
<body>
<form>
<input type="text" class="fecha">
<input type="text" class="nofecha">
<input type="text" class="fecha">
</form>
</body>
</html>

lunes, 13 de octubre de 2014

Modificar varios valores de atributos a la vez

También podemos utilizar el método attr() pasando un objeto con pares atributo/valor. Esto sirve para modificar de una sola vez varios atributos sobre los elementos que haya en un objeto jQuery y si esos atributos no existían, simplemente los crea con los valores enviados en el objeto. A estas alturas ya debemos saber crear variables con notación objeto, pero voy a dejar un ejemplo para que se pueda ver perfectamente este uso del método. Imaginar que tenemos varios enlaces en la página, y que queremos modificar sus atributos, para todos los enlaces a la vez.

$('a').attr({
'title': 'Title modificado por jQuery',
'href': 'http://www.desarrolloweb.com',
'style': 'color: #f80'
});

A partir de la ejecución de la sentencia anterior todos los title de los enlaces tendrán el valor "Title modificado por jQuery". Las URLs a las que enlazarán los link serán siempre la home de Desarrollo Web y además se les creará un estilo CSS para que sean de color naranja. Podemos ver una página aparte con este ejemplo en marcha. En el siguiente artículo veremos un ejemplo más elaborado sobre la modificación de atributos de elementos a través de la función attr(), en el que para obtener el valor del atributo a modificar utilizamos una función que pasamos también como parámetro a attr(). Además, para los interesados en aprender en vídeo puede accederse a las funciones de Attibutes en el Videotutorial de jQuery.

domingo, 12 de octubre de 2014

Modificar un atributo

Ahora vamos a ver un uso de attr() en el que no leemos el atributo, sino que lo modificamos. En este caso la función recibe dos cadenas de texto, la primera con el nombre del atributo y la segunda con el nuevo valor que queremos asignar. Por ejemplo:

$('li').attr("type", "square");
Esto haría que todos los elementos de lista tengan un bullet de tipo cuadrado.

sábado, 11 de octubre de 2014

Lectura de un atributo

El primer uso de attr() es para recuperar el valor de un atributo. En este caso, el método debe recibir una cadena con el nombre del atributo que queremos recuperar. 
Ahora podríamos acceder a lo que hay escrito en el campo de texto de la siguiente manera:

$("#campotexto").attr("value")

Pero atención, en el caso que invoquemos el método attr sobre un objeto jQuery que contenga varios elementos a la vez, attr() en este caso devolvería el valor del atributo del primero de los elementos que haya en el objeto jQuery. Además, en caso que el elemento no tenga definido ese atributo al que se pretenda acceder, devolvería undefined.
Veamos un ejemplo, también simple, pero un poco más elaborado. Tenemos varios enlaces en la página, con este código HTML:

<a href="http://www.elpais.com" title="Diario El País">El País</a>
<br>
<a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open Office</a>
Si hacemos algo como esto:
$("a").attr("title")
Obtendremos el valor del atributo title del primero de los enlaces. Como tenemos tres enlaces en la página, $("a") nos devolvería un objeto jQuery que contiene esos tres enlaces, pues recordar, que attr("title") devuelve el valor del atributo "title" del primero de los elementos del objeto jQuery. Ahora bien, si quisiéramos obtener el valor del atributo "title" de todos los elementos, tendríamos que hacer un recorrido a cada uno de los enlaces con el método each del core de jQuery http://www.desarrolloweb.com/articulos/core-each-jquery.html. Veamos un ejemplo de una página completa que hace ese recorrido con each para recuperar todos los valores de los atributos title de los enlaces que haya en la página:
<html>
<head>
<title>método attr</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").each(function(i){
var titulo = $(this).attr("title");
alert("Atributo title del enlace " + i + ": " + titulo);
});
});
</script>
</head>
<body>
<a id="enlace1" href="http://www.elpais.com" title="Diario El País">El País</a>
<br>
<a href="http://www.mozilla.org" title="Fundación Mozilla">Mozilla Fundation</a>
<br>
<a href="http://es.openoffice.org/" title="Siute de programas de oficina">Open Office</a>
</body>
</html>

viernes, 10 de octubre de 2014

Métodos de Attributes en jQuery

Exploramos diferentes métodos que existen en este framework Javascript para acceder y modificar los atributos del DOM, es decir, de los objetos o elementos que forman parte de una página web.

Acceder y modificar atributos HTML desde jQuery 

En jQuery existe una función llamada attr() que sirve para recuperar y alterar atributos de los elementos de la página. 
En este Manual de jQuery estamos recorriendo poco a poco la documentación del popular framework Javascript, para ofrecer a los lectores de DesarrolloWeb.com explicaciones detalladas de las clases y métodos disponibles. 
Le ha llegado el turno al método attr() que sirve para trabajar con los atributos de los elementos de la página. Este método, como muchos otros en jQuery tiene diferentes usos, dependiendo de los parámetros que le pasemos, pero siempre sirve para trabajar con los atributos HTML, como pueden ser title, height, width, href, value, etc. El uso es bien simple. Dado un objeto jQuery, invocando el método attr() sobre él, podemos acceder a sus atributos, para recuperar sus valores, modificarlos o eliminarlos. Veremos los distintos usos conforme los parámetros que le pasemos. 
Pero antes de empezar, vale la pena comentar que la información que encontraréis en este artículo se complementa con el siguiente texto, en el que veremos otros usos de la función attr().

jueves, 9 de octubre de 2014

Probando los selectores jQuery de Jerarquía

Hemos hecho un rápido script que prueba los selectores de jerarquía que están disponibles en jQuery. Es una simple página que tiene una serie de elementos y un script para seleccionar y alterar su estilo. Los elementos los vamos seleccionando con diversos tipos de selectores de Jerarquía que hemos visto en este artículo de DesarrolloWeb.com. El ejemplo tendría el siguiente código:

<html>
<head>
<title>Probando </title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//selectores ancestor descendant
$("p i").css("color", "#66F");
$("table.mitabla td").css("background-color", "#55ff00");
//selectores parent > child
$("p.parraforojo > b").css("color", "red");
$(".mitd > *").css("border", "1px solid #ff9900");
//selectores prev + next
$("i + b").css("font-size", "40px");
$(".elemlista + li").css("opacity", 0.2);
//selectores prev ~ siblings
$("#a2 ~ div.clase").css("font-size", "180%");
$("#miparrafo ~ table").css("border", "3px dotted #dd6600");
});
</script>
</head>
<body>
<p class="parraforojo">
<i>Hola</i> <b>esto</b> es un <b>párrafo</b> rojo <i>donde</i> he <b>puesto</b> unas <b>negritas</b>
</p>
<p class="parraforojo">Otro <b>con</b> clase class="parraforojo" <span class="unspan"><b>(esto está
dentro de unspan B, no depende directamente -no child- del párrafo)</b></span></p>
<p>Hola <b>esto</b> es otro <b>párrafo </b>para <i>poner</i> otras <b>negritas</b></p>
<p>hola!!!</p>
<table border=1>
<tr>
<td><i>Tabla cualquiera</i></td>
<td>Esta tabla <b>no tiene</b> class de <b>CSS</b></td>
</tr>
</table>
<p id="miparrafo">Este es el párrafo con id="miparrafo"</p>
<table class="mitabla" border=1>
<tr>
<td colspan=2>Esta tabla tiene una <b>clase CSS</b></td>
</tr>
<tr>
<td><i>class="mitabla"</i></td>
<td class="mitd">Y este <b>td</b> le he puesto <i>class="mitd"</i> <span>Una cosa<span>otra
cosa</span></span></td>
</tr>
</table>
<p><b>Párrafo</b> que tiene alguna <b>negrita</b> e <span class="algo"><i>itálica</i></span> para
seleccionar</p>
<div>
<div id="a1">hola</div> <div id="a2">dos</div> <div id="a3">3</div> <span>Cuatro (no es un div)???
</span> <div id="a4" class="clase">Cuatro de verdad</div>
</div>
<ul>
<li>Elem 1</li>
<li class="elemlista">Elem 2</li>
<li>Elem 3</li>
<li>Elem 4</li>
<li class="elemlista">Elem 5</li>
<li class="elemlista">Elem 6</li>
<li>Elem 7</li>
</ul>
</body>
</html>

miércoles, 8 de octubre de 2014

Selectores de Jerarquía en jQuery - II

Selector prev + next:

Con este selector conseguimos acceder a las elementos que están después de otros, es decir, a las etiquetas que
concuerdan con el selector "next", que se abren después de cerrar las etiquetas que concuerdan con el selector
"prev".
$("p.parraforojo + p") //Esto selecciona los párrafos que están después de cualquier párrafo que
tenga la clase "parraforojo"
$("i + b") //selecciona todas las negritas (etiqueta B) que hay después de una itálica (etiqueta I)

Selector prev ~ siblings:

Selecciona los elementos hermanos que hay a continuación de los elementos que concuerden con el selector "prev", que son
del tipo que se especifica con el selector "siblings". Los elementos hermanos son los que están en el mismo contenedor y se
encuentran en el mismo nivel de jerarquía.
$("#miparrafo ~ table") //selecciona los elementos TABLE que son hermanos del elemento con
id="miparrafo"
$("#a2 ~ div.clase") //selecciona los elementos hermanos del que tiene el id="a2" que sean etiquetas
DIV con la class="clase".

martes, 7 de octubre de 2014

Selectores de Jerarquía en jQuery - I

En los últimos artículos del Manual de jQuery hemos hablado sobre los selectores. Como ya dijimos, sirven para seleccionar elementos de la página con los que queremos trabajar desde Javascript por medio del framework. En concreto vimos los selectores básicos, con los que podremos resolver la mayoría de nuestras necesidades en cuanto a selección de elementos. 
No obstante, en jQuery existen varios otros tipos de selectores, junto con algunos filtros, que hacen todavía más potente el framework de cara a acceder a las etiquetas o elementos que deseamos seleccionar. Vamos a ver en este artículo qué son los selectores de jerarquía y algunos ejemplos de uso. Sabemos que la página está compuesta por etiquetas HTML que se meten unas dentro de otras, formando una jerarquía de etiquetas o de elementos. 
Los selectores de Jerarquía permiten utilizar la propia estructura de la página para acceder a unos elementos dados, que se seleccionan a través de la jerarquía existente de etiquetas en la página. Dentro de éstos, existen a su vez varias posibilidades, que hacen uso de criterios de descendencia, ascendencia, siguiente, anterior, etc. Selector ancestor descendant: Sirve para seleccionar elementos de la página que son descendientes de otro y que además se corresponden con un selector dado. Para este selector se indican dos datos, separados por un espacio. Primero el selector para definir el elemento o elementos antecesores y el segundo selector para definir el tipo de elementos que se tienen que seleccionar de entre los descendientes.

$("p b") //selecciona todas las etiquetas B que hay dentro de las etiquetas P
$("p.parraforojo i") //selecciona todas las etiquetas I que hay dentro de los párrafos con clase
"parraforojo".
$("table.mitabla td") //selecciona todas las etiquetas TD que hay en las tablas que tienen
class="mitabla"


Selector parent > child: Con el selectorr parent > child podemos acceder a elementos que sean hijos directos de otros. Para ello indicamos un selector como "parent" y un selector como "child". Nos seleccionará todos los elementos que son hijos directos de parent y que concuerdan con el selector child.

$("p > b") //selecciona todas las etiquetas B que son hijas directas de los párrafos.
$("#capa > *") //selecciona todas las etiquetas que son hijas directas del elemento con id="capa"
Nota: la diferencia entre "ancestor descendant" y "parent > child" es que este último sólo selecciona los hijos directos. Por ejemplo, en el
HTML siguiente:
<p><b>Párrafo</b> que tiene alguna <b>negrita</b> e <span
class="algo"><i>itálica</i></span> para seleccionar</p>
$("p > b") seleccionaría los mismos elementos que $("p b"), porque en este caso todas las etiquetas B son hijas directas de P.
Pero en el caso de la itálica (etiqueta I), que está metida dentro del párrafo, pero dentro también de un span, $("p i") seleccionaría la etiqueta I
por ser descendiente de P, pero $("p > i") no seleccionaría la etiqueta I, por no ser hija directa de P.

lunes, 6 de octubre de 2014

Código completo del ejemplo de selectores

Escribimos aquí para acabar el código completo de este ejemplo de trabajo con selectores.
<html>
<head>
<title>Título de la página</title>
<style type="text/css">
.rojo{
color: #cc0000;
}
.verde{
color: #00cc00;
}
.azul{
color: #0000cc;
}
.fondogris{
background-color: #cccccc;
}
body{
font-family: verdana, arial, helvetica;
}
div{
margin-bottom: 4px;
}
</style>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#boton").click(function(evento){
var selectorEscrito = $("#camposelector").attr("value");
if (selectorEscrito==""){
alert("Escribe algo en el campo de texto")
}else{
elementosSeleccionados = $(selectorEscrito);
elementosSeleccionados.fadeOut("slow", function(){
elementosSeleccionados.fadeIn("slow");
});
}
});
});
</script>
</head>
<body>
<h1>Selectores en jQuery</h1>
<p>En esta página hay varias etiquetas. Ahora con este formulario puedes escribir un selector, para
seleccionar algunas con jQuery, y luego pulsar el botón para ver qué elementos de la página has
seleccionado.</p>
<form>
Selector: <input type="Text" name="camposelector" id="camposelector">
<input type="button" id="boton" value="Ver qué elementos seleccionas">
</form>
<p id="p1" class="rojo">Este es un párrafo con id="p1" y class="rojo"</p>
<p id="p2" class="verde">Este es un párrafo con id="p2" y class="verde" y aquí <i>meto una
itálica</i></p>
<p id="p3" class="rojo fondogris">Este es un párrafo con id="p3" y class="rojo fondogris" (es decir,
este elemento tiene aplicadas las clases "rojo" y "fondogris"</p>
<p id="p4">Este es un párrafo con id="p4", sin class</p>
<p>Este es un párrafo con sin id ni class</p>
<div id="div1">Esto es una división con id="div1"</div>
<div id="div2" class="rojo">Esto es una división con id="div2" y class="rojo" y aqui <b>meto una
negrita</b></div>
<div id="div3" class="verde fondogris">Esto es una división con id="div3" y class="verde
fondogris"</div>
<div>Esto es una división sin id ni class</div>
<div class="azul">Esto es una división sin id, con class="azul"</div>
<b>Esto es una etiqueta b</b>
<i>Esto es una etiqueta i</i>
</body>
</html>
Dejamos de nuevo el enlace para ver este ejemplo en marcha y practicar con los selectores de jQuery.

domingo, 5 de octubre de 2014

Ejemplo para practicar con selectores en jQuery - II

Con document.ready() indicamos una función a invocar cuando la página está lista para recibir acciones de programación que modifiquen su estructura. 
Con $("#boton").click() indicamos una función a ejecutar cuando se hace clic sobre el botón. var selectorEscrito = $("#camposelector").attr("value"); 
Nos sirve para acceder al atributo value del campo de texto, es decir, a lo que haya escrito dentro. Si no hay nada escrito en el campo, muestro un mensaje de alerta, porque en este caso el selector cadena vacía no sería valido y recibiríamos un mensaje de error. 
Si había algo en el campo, pues selecciono con jQuery los elementos de la página que corresponden con el selector escrito en el campo de texto. 
Eso se hace con la línea: elementosSeleccionados = $(selectorEscrito); 
Luego, sobre el elemento o elementos seleccionados, invoco el método fadeOut(), que sirve para ocultar elementos de la página. 
A fadeOut() le paso dos parámetros, uno es la velocidad con la que tiene que hacer el efecto y otro es una función callback, a ejecutar sólo en el momento que el efecto haya concluido. 
es con la línea: elementosSeleccionados.fadeOut("slow", function(){ Por último, en la función callback realizamos una llamada al método fadeIn() sobre el mismo objeto jQuery resultado de aplicar el selector anterior, que sirve para que los elementos ocultados se muestren de nuevo en la página. 
Esto último con la línea: elementosSeleccionados.fadeIn("slow"); En resumen, ocultando y mostrando luego los elementos de vuelta conseguimos ese parpadeo. 
Si nos resulta extraño este código, recordamos que en el Manual de jQuery de desarrolloweb.com ya hemos publicado varios artículos que aclaran los puntos tratados en este ejemplo, como los efectos rápidos o las funciones callback.

sábado, 4 de octubre de 2014

Ejemplo para practicar con selectores en jQuery - I

En el artículo anterior explicamos lo que eran los selectores de jQuery y los tipos de selectores básicos. Ahora, para que podamos ver por la práctica cómo funcionan cada uno de los selectores, hemos creado un ejemplo donde podremos escribir varios selectores y ver cómo funcionan, es decir, qué elementos de la página se consigue seleccionar con cada uno. En este ejemplo tenemos una página que tiene varias etiquetas y un formulario. En el formulario hay un campo de texto y un botón. En el campo de texto podemos escribir cualquier selector y pulsando luego el botón, mediante jQuery, hacemos que parpadeen los elementos que concuerdan con ese selector. El ejemplo puede verse en una página aparte. 

  Aclaración: Por cierto, comento una cosa que resulta para la mayoría debe resultar obvia, pero quizás alguien pueda cometer el error. En los ejemplos del artículo anterior, escribíamos los selectores entre comillas, porque un selector es una cadena de caracteres. Pero en este caso, en la página del ejemplo, en el campo de texto hay que escribir los selectores sin las comillas. Si ponemos las comillas en realidad sería como intentar hacer un selector que incluyese el carácter comillas ". Esto es porque en el propio campo de texto cualquier cosa que escribamos ya es una cadena de caracteres de por si. 

Para hacer este ejemplo tenemos que utilizar varios métodos y funciones jQuery de los cuales, casi todos, ya hemos hablado a lo largo del manual. Veamos el formulario que hemos creado en la página:

<form>
Selector: <input type="Text" name="camposelector" id="camposelector">
<input type="button" id="boton" value="Ver qué elementos seleccionas">
</form>
Como se puede ver, tiene un campo INPUT de texto al que le hemos puesto un identificador para
referirnos a él mediante jQuery. Fijarse también el INPUT para hacer un botón, al que también le
pusimos un identificador.
Ahora veamos el código Javascript empleado:
$(document).ready(function(){
$("#boton").click(function(evento){
var selectorEscrito = $("#camposelector").attr("value");
if (selectorEscrito==""){
alert("Escribe algo en el campo de texto")
}else{
elementosSeleccionados = $(selectorEscrito);
elementosSeleccionados.fadeOut("slow", function(){
elementosSeleccionados.fadeIn("slow");
});
}
});
});

viernes, 3 de octubre de 2014

Conclusión sobre los selectores

Hasta este punto hemos visto los selectores básicos de jQuery, que nos servirán para hacer la mayoría de nuestros ejemplos y resolver también la mayor parte de las necesidades de selección de elementos que nos podamos encontrar en ejemplos reales. Sin embargo, el framevork Javascript incluye una buena gama de selectores adicionales que pueden venirnos bien en algunos casos más concretos y que dejamos para próximos artículos. 
Nota: Si todavía no lias quedado muy claro, podéis pasaros por el Videotutorial sobre los selectores en iQiierv Ahora, os recomendamos seguir el aprendizaje con el siguiente artículo, en el que pondremos en práctica los selectores que hemos conocido hasta el momento: Ejemplo para practicar con selectores de iQuerv.

jueves, 2 de octubre de 2014

Selectores básicos en jQuery

Los selectores, al menos los más básicos, son parecidos, o iguales, a los que se utilizan en CSS para seleccionar los elementos a los que se desean aplicar ciertos estilos. Como entiendo que todas las personas que intenten profundizar en el fiamework jQuery deben haber conocido CSS anteriormente, no habrá ningún problema con ellos. Selector de etiquetas: Simplemente indicamos la etiqueta a la que deseamos referirnos, es decir, la etiqueta que queremos seleccionar. Obtendremos con él todas las etiquetas de la página indicada en el selector. ffhl") //selecciona todos los encabezados de nivel 1 Selector por identificador: Sirven para seleccionar los elementos que tengan un identificador dado, que se asigna a las etiquetas a través del atributo id del HTML. Para utilizar este selector se indica primero el carácter "#" y luego el identificador de cuyo elemento se desee seleccionar.
f("#idelemento") //selecciona una etiqueta que tiene el atributo id="idelemento" Selector por clase: Podemos indicar el nombre de una clase (class de CSS) y seleccionar todos los elementos a los que se ha aplicado esta clase. Para ello, como en CSS, comenzamos colocando el carácter "."y luego el nombre de la clase que deseamos seleccionar. 
$(".iniciase") //selecciona todos los elementos que tienen el atributo class="iniciase" Selector por varias clases: Si lo deseamos, podemos indicar varias clases CSS, para obtener todos los elementos que tienen esas clases aplicadas: todas al mismo tiempo. Esto se consigue comenzando por un ".", igual que los selectores de clases, y luego otro "." para separar las distintas clases que queremos utilizar en el selector. 
$(".clasel.clase2") //selecciona los elementos que tienen class="clasel clase2" Selector asterisco "*": Nos sirve para seleccionar todos los elementos de la página. 
$("*") //selecciona todos los elementos que tiene la página Concatenar varios selectores distintos: Por último, podemos utilizar varios selectores, para obtener todas las etiquetas que cumplen uno de ellos. No hace falta que cumplan todos los selectores a la vez, sino con que uno de ellos concuerde es suficiente. 
Para ello colocamos todos los selectores que deseamos, separados por una coma ",". 
$("div,p") //selecciona todos los elementos división y párrafo 
$(".clasel,.clase2") //selecciona los elementos que tienen la clase "clase 1" o "clase2" $("#miid,.iniciase,ul) //selecciona el elemento con id="miid", los elementos con class="iniciase" y todas las listas UL

miércoles, 1 de octubre de 2014

Selectores de jQuery

Comenzamos a analizar en profundidad las diferentes maneras que tenemos en jQuery de seleccionar conjuntos de elementos de la página, a través de distintos tipos de selectores.

Selectores en jQuery 

Los selectores sirven para seleccionar elementos de la página a partir de una cadena de texto que le pasamos a la función jQuery. 
Como la propia palabra indica, los selectores son un mecanismo, disponible en jQuery, para seleccionar determinados elementos de la página. El selector no es más que una cadena de caracteres, creada bajo unas normas que veremos a continuación, con la que podemos referirnos a cualquiera o cualesquiera de los elementos que hay en una página. Todo en jQuery pasa por utilizar los selectores, para acceder a los elementos de la página que deseamos alterar dinámicamente con Javascript. 
Hasta en los ejemplos más básicos del Manual de jQuery se tienen que utilizar selectores para acceder a los elementos que deseamos alterar, así que inevitablemente, si has leído este manual hasta este artículo, los habrás utilizado ya. En mi opinión, una de las cosas que más potentes de jQuery son los selectores, al menos comparando este framework Javascript con otros que conozco. 
Veremos en este artículo cómo utilizarlos y aprovecharnos de su potencia. Para empezar, veamos un selector, para aclarar las ideas y refrescar la memoria. Cuando utilizamos la función jQuery (o función dólar) lo que pasamos como parámetro es el selector. 
La función jQuery devuelve justamente los elementos de la página que concuerdan con el selector enviado por parámetro. $("p"); En esa llamada a la función jQuery, estamos pasando por parámetro una cadena "p" y como decía, esa misma cadena es el selector. En este caso, "p" es un selector que sirve para seleccionar todas las etiquetas P de la página, es decir, los párrafos.