Arthusu BLOG: jquery

Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

viernes, 5 de junio de 2015

[Parte 10]jQuery

jQuery - Efectos

jQuery ofrece una interfaz simple trivial para hacer diferentes tipos de efectos asombrosos. jQuery nos permite metodos para aplicar efectos rapidamente con la configuracion minima. Este tutorial cubre todos los metodos importantes de jQuery para crear efectos visuales.

Mostrar y ocultar elementos

Los comandos para mostrar y ocultar elementos son bastante lo que se espera. show() para mostrar los elementos en un conjunto envuelto y hide() para ocultarlos.

Sintaxis

Aqui esta la sintaxis para el metodo show():

[selector].show(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

La siguiente sintaxis es para el metodo hide():

[selector].hide(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Considere el siguiente archivo HTML como un pequeño codigo jQuery:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("#show").click(function(){
           $(".midiv").show(1000);
       });
       $("#hide").click(function(){
           $(".midiv").hide(1000);
       });
    });
    </script>
    <style type="text/css">
       .midiv{
           margin:10px;
           padding: 12px;
           border:2px solid #666;
           width: 100px;
           height: 100px;
       }
    </style>
</head>
<body>
    <div class="midiv">
       Este es un CUADRADO
    </div>
    <input type="button" id="hide" value="Ocultar" />
    <input type="button" id="show" value="Mostrar" />
</body>
</html>

Alternar los elementos

jQuery ofrece metodos para cambiar el estado de la visualizacion de los elementos entre mostradas u ocultas. Si el elemento se muestra al principio, se oculta. Si se oculta, se mostrará.

Sintaxis

Aqui se muestra la sintaxis para el metodo toggle():

[selector].toggle(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Podemos animar a cualquier elemento como un simple <div> que contiene una imagen.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".clic").click(function(event){
            $(".target").toggle('slow',function(){
                $(".log").text('Transicion completa');
            });
        });
    });
    </script>
    <style type="text/css">
        .clic{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="clic">
        Dame clic
    </div>
    <div class="target">
        <img src="imgs/jquery.jpg" alt="jQuery" />
        <div class="log"></div>
    </div>
</body>
</html>

jQuery Metodos para efectos

Han visto el concepto basico de los efectos en jQuery. La siguiente tabla enumera todos los metodos importantes para crear diferentes tipos de efectos:

+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| Metodos                                    | Descripcion                                                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| animate(params,[duration,easing,callback]) | Una funcion para hacer animaciones.                                                                     |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeIn(speed,[callback])                   | Desaparece hacia adentro en todos los elementos que coincidan                                           |
|                                            | ajustando su opacidad y disparar un callback opcional despues de                                        |
|                                            | terminar.                                                                                               |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeOut(speed,[callback])                  | Desaparece hacia afuera en todos los elementos que coincidan, si su opacidad                            |
|                                            | es ajustado a 0, display se muestra en "none", dispara una funcion despues de terminar.                 |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeTo(speed,opacity,[callback])           | Le asigna una opacidad especifica a todos los elementos que coincidan y dispara un callback             |
|                                            | opcional despues de terminar la transicion.                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide()                                     | Esconde cada uno de los elementos que coincidan si son mostrados.                                       |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide(speed,[callback])                     | Oculta todos los elementos coincidentes con una elegante animacion y dispara un callback                |
|                                            | opcional despues de terminar la transicion.                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show()                                     | Muestra cada uno de los elementos que coincidan si estan ocultos.                                       |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show(speed,[callback])                     | Muestra todos los elementos que coincidan con una elegante animacion y dispara un callback              |
|                                            | opcional despues de terminar.                                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideDown(speed,[callback])                | Muestra todos los elementos que coincidan ajustandose en altura, dispara un callback opcional           |
|                                            | despues de terminar.                                                                                    |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideToggle(speed,[callback])              | Alterna la visibilidad de todos los elementos que coincidan ajustandose en altura, dispara un           |
|                                            | callback opcional despues de terminar.                                                                  |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideUp(speed,[callback])                  | Oculta todos los elementos que coincidan ajustandose en altura, dispara un callback                     |
|                                            | opcional despues de terminar.                                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| stop([clearQueue,gotoEnd])                 | Detiene todas las animaciones ejecutandose en los elementos especificados.                              |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle()                                   | Alterna la visibilidad de todos los elementos que coincidan.                                            |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle(switch)                             | Alterna la visibilidad de todos los elementos que coincidan basados en el switch (true - muestra todos  |
|                                            | los elementos, false - esconde todos los elementos)                                                     |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| jQuery.fx.off                              | Desabilita globalmente todas las animaciones.                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+

Traduccion por arthusu desde TutorialsPoint

domingo, 31 de mayo de 2015

[Parte 9]jQuery

jQuery - AJAX

AJAX es un acronimo que significa Asynchronous JavaScript and XML y esta tecnologia nos ayuda a cargar datos desde el servidor sin una actualizacion de la pagina del navegador.

jQuery es una gran herramienta que proporciona un rico conjunto de metodos AJAX para desarrollar aplicaciones web.

Cargando datos simples

Es muy facil cargar todos los datos estaticos o dinamicos utilizando AJAX en jQuery. jQuery proporciona el metodo load() para hacer esto - sintaxis:

[selector].load(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor al que se envia la solicitud. Podria ser un CGI, ASP, JSP, PHP o script que genera datos de forma dinamica o fuera de una base de datos.

data - Este parametro opcional representa un objeto cuyas propiedades son serializadas en parametros adecuadamente codificadas para ser pasado a la peticion. Si se especifica, la solicitud se realiza mediante el metodo POST. Si se omite, se utiliza el metodo GET.

callback - Una funcion callback se invoca despues de que los datos de respuesta se han cargado en el conjunto de elementos. El primer parametro pasado a esta funcion es el texto de respuesta recibido desde el servidor y el segundo parametro es el codigo de estado.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $('#stage').load('archivos/resultado.html')
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.html</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>

Aqui load() inicia una peticion AJAX al archivo archivos/resultado.html especificado. Despues de cargar este archivo, todo el contenido es rellena en el interior del <div> con el id="stage", suponiendo que nuestro archivo HTML tiene una sola linea:

<h1>Este es el resultado</h1>

Obtener datos JSON

Habria una situacion en la que el servidor devolveria una cadena JSON en su peticion. jQuery tiene una funcion de utilidad getJSON() analiza la cadena JSON devuelta y hace que la cadena resultante este disponible para ser llamada en la funcion como primer parametro para tomar nuevas medidas. Sintaxis: Esta el la sencilla sintaxis del metodo getJSON():

[selector].getJSON(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor en contacto a traves del metodo GET.

data - Un objeto cuyas propiedades sirven como pares nombre/valor se utilizan para la construccion de una cadena de consulta que se adjunta en la direccion URL, o una cadena de consulta con formato preformateada y codificada.

callback - Una funcion se invoca cuando la solicitud es completada. El valor de los datos resultantes de la digestion del cuerpo de la respuesta como una cadena JSON es pasada como primer parametro a esta devolucion de llamada y el estado de respuesta como segundo. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $.getJSON('archivos/resultado.json',function(jd){
                $('#stage').html('<p>Nombre: ' + jd.name + '</p>');
                $('#stage').append('<p>Edad: ' + jd.age + '</p>');
                $('#stage').append('<p>Sexo: ' + jd.sex + '</p>');
            })
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.json</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>

Aqui el metodo de utilidad getJSON() inicia una peticion AJAX al archivo resultado.json especificado. Despues de cargar este archivo, todo el contenido se pasa a la funcion callback que finalmente se rellena en el interior del <div> con el id="stage". Suponiendo que nuestro archivo resultado.json contiene lo siguiente:

{
"name": "arthusu",
"age" : "21",
"sex": "Masculino"
}

Pasar los datos al servidor

Muchas veces se recogen el usuario y contraseña que se pasan al servidor para su posterior procesamiento. Usando jQuery AJAX hace que sea demasiado facil pasar los datos recogidos en el servidor usando el parametro data de cualquier metodo AJAX disponible. Ejemplo: Este ejemplo demuestra como a traves de un input se ingresa el nombre de usuario y es enviado a un script del servidor web que envia el resultado de regreso y es impreso.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("#driver").click(function(event){
           var name = $("#name").val();
           $("#stage").load('archivos/resultado.php',{"name":name});
       })
    });
    </script>
</head>
<body>
    <p>Escriba su nombre y de clic en el boton:</p>
    <input type="text" id="name" size="40" /><br />
    <div id="stage" style="background-color:#cc0;">
       Etapa:
    </div>
    <input type="button" id="driver" value="Mostrar Resultado" />
</body>
</html>

Aqui esta el codigo escrito en resultado.php:

<?php
    if($_REQUEST['name']){
       $name = $_REQUEST['name'];
       echo "Bievenido " . $name;
    }
?>

Ahora puede introducir cualquier texto en el campo de entrada dado y luego hacer clic en el boton "Mostrar Resultado" para ver lo que se ha introducido en el campo de entrada.

Metodos jQuery AJAX

Ustedes han visto el concepto basico de AJAX usando jQuery. La siguiente tabla abajo enumera todos los metodos importantes jQuery AJAX que se puede utilizar en funcion de su necesidad de programacion.

+-------------------------------------------+--------------------------------------------------------------------------------------+
| Metodos                                   | Descripcion                                                                          |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajax(options)                      | Carga una pagina remota mediante una peticion HTTP.                                  |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajaxSetup(options)                 | Ajusta las peticiones globales de peticiones AJAX.                                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.get(url,[data],[callback],[type])  | Carga una pagina remota mediante una peticion HTTP GET.                              |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getJSON(url,[data],[callback])     | Carga datos JSON utilizando una peticion HTTP GET.                                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getScript(url,[callback])          | Carga y ejecuta un archivo javascript utilizando una peticion HTTP GET.              |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.post(url,[data],[callback],[type]) | Carga una pagina remota mediante una solicitud HTTP POST.                            |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| load(url,[data],[callback])               | Carga el HTML desde un archivo remoto y lo inyecta dentro del DOM.                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serialize()                               | Serializa un conjunto de elementos de entrada en una cadena de datos.                |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serializeArray()                          | Serializa todos los formularios y elementos del forumario como el metodo serialize() |
|                                           | pero devuelve una estructura de datos JSON para que trabaje con ellos.               |
+-------------------------------------------+--------------------------------------------------------------------------------------+

Eventos de jQuery AJAX

Puede llamar a varios metodos de jQuery durante el ciclo de vida de progreso de llamada AJAX. Basado en diferentes eventos/etapas, los siguientes metodos estan disponibles:

+------------------------+----------------------------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                                        |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxComplete(callback) | Fija una funcion para ejecutarse cada vez que se finalize una peticion AJAX.                       |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStart(callback)    | Fija una funcion para ejecutarse cada vez que inicia una peticion AJAX y no hay ya ninguno activo. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxError(callback)    | Fija una funcion a ejecutar cuando falla una peticion AJAX.                                        |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSend(callback)     | Fija una funcion para ser ejecutada antes de enviar una peticion AJAX.                             |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStop(callback)     | Fija una funcion que se ejecuta cada vez que han terminado todas las peticiones AJAX.              |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSuccess(callback)  | Fija una funcion para ejecutarse cada vez que una peticion AJAX finaliza correctamente.            |
+------------------------+----------------------------------------------------------------------------------------------------+

Este texto fue sacado desde tutorialspoint solo es una traduccion, espero que les sea de utilidad.

sábado, 23 de mayo de 2015

[Parte 8]jQuery

jQuery manejando eventos

Tenemos la capacidad crear paginas web dinamicas utilizando eventos. Los eventos son acciones que pueden ser detectadas por su sitio web. Los siguientes son ejemplos de eventos:

* Un clic del raton
* Una pagina web cargada
* Poniendo el raton sobre un elemento
* Envio de un formulario HTML
* Una combinacion de teclas del teclado
* etc

Cuando se activan estos eventos a continuacion, puede utilizar una funcion personalizada para hacer casi todo lo que quieras con el evento. Estas funciones personalizadas llaman al manejador de eventos.

Uniendo los controladores de eventos

Usando el modelo de eventos de jQuery, podemos establecer los controlares de eventos de elementos DOM con el metodo bind() de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("div").bind('click',function( event ){
           alert('Hola tu!');
       });
    });
    </script>
    <style type="text/css">
       .div{
           margin:10px;
           padding: 12px;
           border:2px solid #666;
           width: 60px;
       }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;">UNO</div>
    <div class="div" style="background-color:green;">DOS</div>
    <div class="div" style="background-color:red;">TRES</div>
</body>
</html>

Este codigo hara que el elemento div responda al evento click, cuando el usuario hace click en el interior de ese div a partir de entonces, se mostrará una alerta.

La sintaxis completa del comando bind() es:

selector.bind(eventType[,eventData],handler)

A continuacion se presenta la descripcion de los parametros:

* eventType - Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit.

* eventData - Este es un parametro opcional es un mapa de datos que se pasará al controlador de eventos.

* handler - Una funcion para ejecutar cada vez que el evento se dispare.

Eliminacion de controlares de eventos

Por lo general, una vez que se establece un controlador de eventos, permanece en efecto para el resto de la vida de la pagina. Puede haber una necesidad cuando se desee eliminar el controlador de eventos de la pagina.

jQuery proporciona el comando unbind() para eliminar un controlador de eventos. La sintaxis de unbind() es la siguiente:

selector.unbind(eventType,handler)

selector.unbind(eventType)

La siguiente es la descripcion de los parametros:

* eventType - Una cadena que contiene un tipo de evento Javascript, tales como hacer click o submit.

* handler - Si se proporciona, identifica un listener especifico que es para ser eliminado.

Ejemplo: http://api.jquery.com/unbind/

Tipos de eventos

Los siguientes eventos multiplataforma son recomendados que se pueden hacer bind() usando jQuery:

+----------------+-----------------------------------------------------------------------+
| Tipo de evento | Descripcion                                                           |
+----------------+-----------------------------------------------------------------------+
| blur           | se produce cuando el elemento pierde el foco.                         |
+----------------+-----------------------------------------------------------------------+
| change         | se produce cuando el elemento cambia.                                 |
+----------------+-----------------------------------------------------------------------+
| click          | se produce cuando hace un click con el raton.                         |
+----------------+-----------------------------------------------------------------------+
| dblclick       | se produce cuando hace doble click con el raton.                      |
+----------------+-----------------------------------------------------------------------+
| error          | se produce cuando hay un error en la carga y descarga,etc.            |
+----------------+-----------------------------------------------------------------------+
| focus          | se produce cuando el elemento recibe el foco.                         |
+----------------+-----------------------------------------------------------------------+
| keydown        | se produce cuando se presiona la tecla.                               |
+----------------+-----------------------------------------------------------------------+
| keypress       | se produce cuando se pulsa la tecla y luego se libera.                |
+----------------+-----------------------------------------------------------------------+
| keyup          | se produce cuando se suelta la tecla                                  |
+----------------+-----------------------------------------------------------------------+
| load           | se produce cuando se carga el documento                               |
+----------------+-----------------------------------------------------------------------+
| mousedown      | se produce cuando se presiona el boton del raton.                     |
+----------------+-----------------------------------------------------------------------+
| mouseenter     | se produce cuando el raton entra en una region de un elemento.        |
+----------------+-----------------------------------------------------------------------+
| mouseleave     | se produce cuando el raton sale de una region de un elemento.         |
+----------------+-----------------------------------------------------------------------+
| mousemove      | se produce cuando el puntero del raton se mueve.                      |
+----------------+-----------------------------------------------------------------------+
| mouseout       | se produce cuando el puntero del raton se mueve fuera de un elemento. |
+----------------+-----------------------------------------------------------------------+
| mouseover      | se produce cuando el puntero del raton se mueve sobre un elemento.    |
+----------------+-----------------------------------------------------------------------+
| mouseup        | se produce cuando se suelta el boton del raton.                       |
+----------------+-----------------------------------------------------------------------+
| resize         | se produce cuando se cambia el tamaño de la ventana.                  |
+----------------+-----------------------------------------------------------------------+
| scroll         | se produce cuando se desplaza la ventana.                             |
+----------------+-----------------------------------------------------------------------+
| select         | se produce cuando se selecciona un texto                              |
+----------------+-----------------------------------------------------------------------+
| submit         | se produce cuando el formulario es enviado                            |
+----------------+-----------------------------------------------------------------------+
| unload         |                                                                       |
+----------------+-----------------------------------------------------------------------+

El objeto de event

La funcion de devolucion de llamada toma un unico parametro, cuando el controlador se llama el objeto de evento Javascript sera pasado a traves de él. El objeto de evento (event) es a menudo innecesario y el parametro se omite, como contexto suficiente suele estar disponible cuando el controlador esta obligado a saber exactamente lo que hay que hacer cuando se activa el controlador (handler), sin embargo hay ciertos atributos que usted necesita para acceder.

Atributos del objeto event

Las siguientes propiedades/atributos de event estan disponibles para su acceso seguro de forma independiente de la plataforma:

+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Propiedad     | Descripcion                                                                                                                                                          |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| altKey        | Establece en true si se pulsa la tecla ALT cuando se activa el evento, false en caso contrario. La tecla ALT                                                         |
|               | se marca como opcion en la mayoria de los teclados MAC.                                                                                                              |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| ctrlKey       | Se establece en true si se pulsa la tecla CTRL cuando se activa el evento, falso en caso contrario.                                                                  |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| data          | El valor, en su caso, pasa como segundo parametro el comando bind()  cuando se establece el manejador.                                                               |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| keyCode       | Para eventos keyup y keydown, esto devuelve la tecla que se presiono.                                                                                                |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| metaKey       | Se establece en true si se pulsa la tecla META cuando se activa el evento, false en caso contrario. La tecla META                                                    |
|               | es la tecla CTRL en PC y tecla COMMAND en MAC.                                                                                                                       |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| pageX         | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pagina.                                                         |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| pageY         | Para eventos de raton, especifica la coordenada vertical del evento relativo desde le origen de la pagina.                                                           |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| relatedTarget | Para algunos eventos de raton, identifica el elemento hacia la izquierda o dentro cuando se activa el elemento. Ejemplo: https://api.jquery.com/event.relatedTarget/ |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| screenX       | Para eventos de raton, especifica la coordenada horizontal del evento relativo desde el origen de la pantalla.                                                       |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| screenY       | Para eventos de raton, especifica la coordenada vertical del evento relativo desde el origen de la pantalla.                                                         |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| shiftKey      | Se establece en true si se pulsa la tecla SHIFT cuando se activa el evento, false en caso contrario.                                                                 |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| target        | Identifica el elemento para el que se activa el evento.                                                                                                              |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| timeStamp     | El tiempo marcado (en milisegundos) cuando se creo el evento.                                                                                                        |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| type          | Para todos los eventos, especifica el tipo de evento que se activa (por ejemplo hacer clic).                                                                         |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| which         | Para eventos de teclado, especifica el codigo numerico de la tecla que causo el evento, y para los eventos de raton, especifica que se presiona el boton             |
|               | (1 a la izquierda, 2 en el medio, 3 a la derecha).                                                                                                                   |
+---------------+----------------------------------------------------------------------------------------------------------------------------------------------------------------------+

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").bind('click',function( event ){
            alert('Tipo de evento es: ' + event.type);
            alert('PageX: ' + event.pageX);
            alert('PageY: ' + event.pageY);
            alert('Target: ' + event.target.innerHTML);
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;">UNO</div>
    <div class="div" style="background-color:green;">DOS</div>
    <div class="div" style="background-color:red;">TRES</div>
</body>
</html>

Los metodos del objeto event

La siguiente es una lista de metodos que pueden ser llamados en un objeto event.

+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| Metodo                          | Descripcion                                                                                                                |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| preventDefault()                | Evita que el navegador ejecute una accion predeterminada                                                                   |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isDefaultPrevented()            | Devuelve si event.preventDefault() alguna vez fue llamado en este objeto de event.                                         |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| stopPropagation()               | Detiene el burbujeo de un evento para elementos primarios, evitando cualquier controlador padre ser notificado del evento. |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isPropagationStopped()          | Devuelve si event.stopPropagation() alguna vez fue llamado en este objeto event.                                           |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| stopImmediatePropagation()      | Detiene el resto de los controladores de ser ejecutados.                                                                   |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+
| isImmediatePropagationStopped() | Devuelve si event.stopImmediatePropagation() alguna vez fue llamado en este objeto event.                                  |
+---------------------------------+----------------------------------------------------------------------------------------------------------------------------+

Metodos de manipulacion de eventos

La siguiente tabla enumera metodos relacionados con eventos importantes:

+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| Metodo                                        | Descripcion                                                                                           |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| bind(type,[data]),fn                          | Enlaza un controlador de uno o mas eventos  (como hacer clic) para cada elemento coincidente.         |
|                                               | Tambien se pueden enlazar eventos personalizados.                                                     |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| off(events[,selector][,handler(eventObject)]) | Esto hace lo contrario de live, elimina un evento atado en live.                                      |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| hover(over,out)                               | Simula que se asoma por ejemplo moviendo el mouse fuera o dentro del objeto.                          |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| on(events[,selector][,data],handler)          | Enlaza un controlador a un evento (como clic) para los actuales - y futuros - elementos coincidentes. |
|                                               | Tambien se pueden enlazar elementos personalizados.                                                   |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| one(type[,data],fn)                           | Enlaza un controlador de uno o mas eventos que se ejecutaran una vez por cada elemento coincidente.   |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| ready(fn)                                     | Se une una funcion a ejecutar cuando el DOM este listo para ser atravesado y manipulado.              |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| trigger(event,[data])                         | Activar un evento en cada elemento coincidente.                                                       |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| triggerHandler(event,[data])                  | Dispara todos los controladores de eventos ligados a un elemento.                                     |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+
| unbind([type],[fn])                           | Esto hace lo contrario de bind, elimina eventos enlazados de cada uno de los elementos coincidentes.  |
+-----------------------------------------------+-------------------------------------------------------------------------------------------------------+

Eventos metodos Helper

jQuery tambien proporciona un conjunto de funciones auxiliares para eventos que se pueden utilizar ya sea para activar (trigger) un evento u obligar (bind) cualquier tipo de evento mencionado anteriormente.

Metodos de activacion

A continuacion se presenta un ejemplo que desencadena el evento blur en todos los parrafos.

$("p").blur();

Binding metodos

A continuacion se presenta un ejemplo donde se enlaza (bind) un evento cuando hacen click en todo el div.

$("div").click(function(){
// hacer algo aqui
});

Aqui esta una lista completa de todos los metodos de ayuda de apoyo proporcionados por jQuery:

+----------------+----------------------------------------------------------------------------+
| Metodo         | Descripcion                                                                |
+----------------+----------------------------------------------------------------------------+
| blur()         | Dispara un evento de desenfoque a cada elemento coincidente.               |
+----------------+----------------------------------------------------------------------------+
| blur(fn)       | Enlaza una funcion al evento desenfoque a cada elemento coincidente.       |
+----------------+----------------------------------------------------------------------------+
| change()       | Dispara el evento de cambio de cada elemento coincidente.                  |
+----------------+----------------------------------------------------------------------------+
| change(fn)     | Enlaza una funcion para el evento de cambio de cada elemento coincidente.  |
+----------------+----------------------------------------------------------------------------+
| click()        | Dispara el evento de cada elemento coincidente.                            |
+----------------+----------------------------------------------------------------------------+
| click(fn)      | Enlaza una funcion para el evento click de cada elemento coincidente.      |
+----------------+----------------------------------------------------------------------------+
| dblclick()     | Dispara el evento dblclick de cada elemento coincidente.                   |
+----------------+----------------------------------------------------------------------------+
| dblclick(fn)   | Enlaza una funcion para el evento dblclick de cada elemento coincidente.   |
+----------------+----------------------------------------------------------------------------+
| error()        | Dispara el evento de error de cada elemento coincidente.                   |
+----------------+----------------------------------------------------------------------------+
| error(fn)      | Enlaza una funcion para el evento error de cada elemento coincidente.      |
+----------------+----------------------------------------------------------------------------+
| focus()        | Dispara el evento enfoque de cada elemento coincidente.                    |
+----------------+----------------------------------------------------------------------------+
| focus(fn)      | Enlaza una funcion para el evento focus de cada elemento coincidente.      |
+----------------+----------------------------------------------------------------------------+
| keydown()      | Dispara el evento keydown de cada elemento coincidente.                    |
+----------------+----------------------------------------------------------------------------+
| keydown(fn)    | Enlaza una funcion al evento keydown de cada elemento coincidente.         |
+----------------+----------------------------------------------------------------------------+
| keypress()     | Dispara el evento keypress de cada elemento coincidente.                   |
+----------------+----------------------------------------------------------------------------+
| keypress(fn)   | Enlaza una funcion al evento keypress de cada elemento coincidente.        |
+----------------+----------------------------------------------------------------------------+
| keyup()        | Dispara el evento keyup de cada elemento coincidente.                      |
+----------------+----------------------------------------------------------------------------+
| keyup(fn)      | Enlaza una funcion al evento keyup de cada elemento coincidente.           |
+----------------+----------------------------------------------------------------------------+
| load(fn)       | Enlaza una funcion para el evento load de cada elemento coincidente.       |
+----------------+----------------------------------------------------------------------------+
| mousedown(fn)  | Enlaza una funcion para el evento mousdown de cada elemento coincidente.   |
+----------------+----------------------------------------------------------------------------+
| mouseenter(fn) | Enlaza una funcion para el evento mouseenter de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mouseleave(fn) | Enlaza una funcion para el evento mouseleave de cada elemento coincidente. |
+----------------+----------------------------------------------------------------------------+
| mousemove(fn)  | Enlaza una funcion para el evento mousemove de cada elemento coincidente.  |
+----------------+----------------------------------------------------------------------------+
| mouseout(fn)   | Enlaza una funcion para el evento mouseout de cada elemento coincidente.   |
+----------------+----------------------------------------------------------------------------+
| mouseover(fn)  | Enlaza una funcion para el evento mouseover de cada elemento coincidente.  |
+----------------+----------------------------------------------------------------------------+
| mouseup(fn)    | Enlaza una funcion para el evento mouseup de cada elemento coincidente.    |
+----------------+----------------------------------------------------------------------------+
| resize(fn)     | Enlaza una funcion para el evento resize de cada elemento coincidente.     |
+----------------+----------------------------------------------------------------------------+
| scroll(fn)     | Enlaza una funcion para el evento scroll de cada elemento coincidente.     |
+----------------+----------------------------------------------------------------------------+
| select()       | Dispara el evento select de cada elemento coincidente.                     |
+----------------+----------------------------------------------------------------------------+
| select(fn)     | Enlaza una funcion para el evento select de cada elemento coincidente.     |
+----------------+----------------------------------------------------------------------------+
| submit()       | Dispara el evento submit de cada elemento coincidente.                     |
+----------------+----------------------------------------------------------------------------+
| submit(fn)     | Enlaza una funcion para el evento submit de cada elemento coincidente.     |
+----------------+----------------------------------------------------------------------------+
| unload(fn)     | Enlaza una funcion para el evento unload de cada elemento coincidente.     |
+----------------+----------------------------------------------------------------------------+

Fuente: http://www.tutorialspoint.com

miércoles, 13 de mayo de 2015

[Parte 7]jQuery

jQuery - Manipulacion del DOM

jQuery proporciona metodos para manipular el DOM de forma eficiente. No es necesario escribir gran codigo para modificar el valor del atributo de cualquier elemento o para extraer el codigo HTML de un parrafo o div.

jQuery proporciona metodos tales como .attr(), .html() y .val() que actuan como getters (captadores) recuperan informacion de los elementos DOM para su uso posterior.

Manipulacion de contenido

El metodo html() obtiene el contenido html (innerHTML) del primer elemento que coincida. Esta es la sintaxis del metodo:

selector.html()

Ejemplo:

El siguiente es un ejemplo que hace uso de los metodos .html() y .text(val). Aqui html() recupera el contenido HTML del objeto y luego .text(val) fija el valor del objeto con el parametro pasado.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            var content = $(this).html();
            $("#result").text( content );
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>

Reemplazando elementos del DOM

Usted puede reemplazar un elemento del DOM o varios elementos del DOM completamente con el HTML especificado. El metodo replaceWith(content) sirve para este proposito muy bien. Aqui esta la sintaxis del metodo:

selector.replaceWith(content)

En lugar de content usted utilizara lo que realmente quiere reemplazar en los elementos originales. Esto podria ser HTML o texto simple.

Ejemplo

A continuacion se presentara un ejemplo que reemplazara el elemento division con <h1>jQuery es genial!</h1>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).replaceWith("<h1>jQuery es genial!</h1>");
        });
    });
    </script>
    <style type="text/css">
        #division {
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div id="division" style="background-color:yellow;">Este es un cuadrado amarillo!!!</div>
</body>
</html>

Eliminando elementos del DOM

Puede haber una situacion en la que le gustaria eliminar uno o mas elementos del DOM desde el documento. jQuery proporciona dos metodos para manejar esta situacion.
El metodo empty() elimina todos los nodos secundarios del conjunto de elementos coincidentes donde el metodo remove(expr) elimina todos los elementos coincidentes del DOM. Aqui esta la sintaxis de los metodos:

selector.remove([expr])

selector.empty()

Puede pasar un parametro opcional expr para filtrar el conjunto de elementos que desea eliminar.

Ejemplo

A continuacion se presenta un ejemplo donde se estaran eliminando los elementos tan pronto como se le hagan clic sobre ellos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("div").click(function(){
            $(this).remove();
        });
    });
    </script>
    <style type="text/css">
        .div{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 60px;
        }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>

Insertando elementos en el DOM

Puede haber una situacion en la que le gustaria insertar nuevos elementos ya sea uno o varios en su documento. jQuery proporciona varios metodos para insertar elementos en varios lugares.
El metodo after(content) inserta contenido despues de cada uno de los elementos coincidentes, el metodo before(content) inserta contenido antes de cada uno de los elementos coincidentes. La siguiente es la sintaxis del metodo:

selector.after(content)

selector.before(content)

El contenido a insertar podria ser HTML o texto simple.

Ejemplo

A continuacion se presenta un ejemplo en el <div> los elementos se insertan justo antes del elemento que le des clic.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
       $("div").click(function(){
           $(this).before('<div class="div"></div>');
       });
    });
    </script>
    <style type="text/css">
       .div{
           margin:10px;
           padding: 12px;
           border:2px solid #666;
           width: 60px;
       }
    </style>
</head>
<body>
    <p>Da clic al cuadrado de abajo:</p>
    <span id="result"></span>
    <div class="div" style="background-color:yellow;"></div>
    <div class="div" style="background-color:green;"></div>
    <div class="div" style="background-color:red;"></div>
</body>
</html>

Metodos de manipulacion del DOM

La siguiente tabla enumera una lista de metodos que se puede utilizar para manipular los elementos del DOM.

+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                                                                          |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| after(content)         | insertar contenido despues de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| append(content)        | Agrega contenido en el interior de cada elemento coincidente.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| appendTo(selector)     | Agrega todos los elementos coincidentes a otro, especificado, conjunto de elementos.                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| before(content)        | inserta el contenido antes de cada uno de los elementos coincidentes.                                                                |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone(bool)            | Clonar elementos DOM coincidentes, y todos sus controladores de eventos, y seleccionar los clones.                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| clone()                | Clona los elementos DOM coincidentes y selecciona sus clones.                                                                        |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| empty()                | Quita todos los elementos secundarios del conjunto de elementos que coincidan.                                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html(val)              | Establece el contenido html de cada elemento coincidente.                                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| html()                 | Obtener el contenido html (innerHTML) del primer elemento coincidente.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertAfter(selector)  | Inserta todos los elementos coincidentes despues de otros, especificados, conjunto de elementos.                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| insertBefore(selector) | Inserta todos los elementos coincidentes antes de otros, especificados, conjunto de elementos.                                       |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prepend(content)       | Antepone el contenido en el interior de cada elemento coincidente.                                                                   |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| prependTo(content)     | Anteponer todos los elementos coincidentes a otro, conjunto de elementos.                                                            |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| remove(expr)           | Elimina todos los elementos coincidentes del DOM.                                                                                    |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceAll(selector)   | Reemplaza todos los elementos coincidentes por el selector especificado con los elementos coincidentes.                              |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| replaceWith(content)   | Reemplaza todos los elementos coincidentes con el HTML especificado o elementos del DOM.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text(val)              | Establece el contenido de texto de todos los elementos coincidentes.                                                                 |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| text()                 | Obtener el contenido de texto combinado de todos los elementos coincidentes.                                                         |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(elem)             | Envuelve cada elemento coincidente con el elemento especificado.                                                                     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrap(html)             | Envuelve cada elemento coincidente con el contenido HTML especificado.                                                               |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(elem)          | Envuelve todos los elementos en el conjunto combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapAll(html)          | Envuelve todos los elementos en el conjutno combinado en un unico elemento de envoltura.                                             |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(elem)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con un elemento DOM.     |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+
| wrapInner(html)        | Envuelve todos los contenidos hijos interiores de cada elemento coincidente (incluyendo los nodos de texto) con una estructura HTML. |
+------------------------+--------------------------------------------------------------------------------------------------------------------------------------+

Fuente: http://www.tutorialspoint.com

miércoles, 6 de mayo de 2015

[jQuery] Mostrando imagen de carga al enviar un formulario

Buenas quiza a muchos les ha pasado que quisieran agregar una imagen al enviar un formulario, esto para que el usuario no se desespere tanto. Bueno esto es algo muy basico pero igual lo mostraré, para ello usaremos dos metodos de jQuery:

* show() - Muestra en bloque el selector que le indiques
* hide() - No muestra el selector que le indiques

Hay mejor documentacion sobre ellos en documentacion de la API de jQUery.

Ejemplo en vivo: http://jsfiddle.net/ojj1226b/

Digamos que tenemos un formulario como el siguiente:

<form action="" method="post">
    <h3>Formulario</h3>
    <input type="text" name="campo1" /><br />
    <button type="submit" name="enviar">
</form>

El cual enviamos por medio de PHP, pues queremos que cada vez que se procese el formulario muestre una imagen mientras se procesa... para ello crearemos un DIV en este caso lo llamaré loading.

El cual contiene la siguiente estructura:

<div id="loading">
<img src="img/ajax-loader.gif" height="19" width="40">
</div>

Donde ajax-loader.gif es una imagen que usaremos, les recomiendo esta pagina: http://www.ajaxload.info/ con la cual pueden generar algunas imagen con transparencia en el fondo.

Por ultimo el codigo jQuery seria el siguiente:

$(document).ready(function(){
$('#loading').hide();
$('form').submit(function(){
    $('#loading').show();
});
});

Y listo con eso podriamos mostrar una imagen. Se que es algo basico pero es algo que se utiliza mucho.

miércoles, 8 de abril de 2015

[Parte 6]jQuery

jQuery - Metodos CSS

La libreria jQuery soporta casi todos los selectores incluidos en Cascade Style Sheet (CSS) las especificaciones de la 1 a la 3 como se indica en el sitio de la World Wide Web Consortium. Con el uso de la libreria jQuery puede mejorar sus sitios web sin tener que preocuparse acerca de los navegadores y sus versiones, siempre que los navegadores tengan habilitado javascript. La mayoria de los metodos jQuery CSS no modifican el contenido del objeto y se utilizan para aplicar las propiedades CSS en los elementos DOM.

Aplicar propiedades CSS

Es muy facil aplicar cualquier propiedad CSS utilizando el metodo de jQuery css(propiedadNombre, propiedadValor), aqui esta la sintaxis del metodo:

selector.css(propiedadNombre, propiedadValor);

Aqui puede pasar propiedadNombre como una cadena javascript y en funcion de su valor, propiedadValor podria ser una cadena o un entero.

Ejemplo:

A continuacion se presenta un ejemplo que añade color de fuente para el segundo elemento de la lista.

<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(1).css("color","red");
         });
   </script>
</head>
<body>
<div>
     <ul>
        <li>Elemento 1 de la lista</li>
        <li>Elemento 2 de la lista</li>
        <li>Elemento 3 de la lista</li>
        <li>Elemento 4 de la lista</li>
        <li>Elemento 5 de la lista</li>
        <li>Elemento 6 de la lista</li>
     </ul>
</div>
</body>
</html>

Aplicar multiples propiedades de CSS

Puede aplicar multiples propiedades CSS utilizando un unico metodo css de jQuery css({clave:valor,clave:valor,clave:valor...}). Puede aplicar tantas propiedades como desee en una sola llamada. Aqui es la sintaxis del metodo:

selector.css({clave:valor,clave:valor,claveN:valorN})

Aqui puede pasar la clave y el valor como se describio anteriormente. Ejemplo: A continuacion se presenta un ejemplo que añade un color de la fuente, asi como el color de fondo al segundo elemento de la lista.

<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(1).css({"color":"red","background-color":"green"});
         });
   </script>
</head>
<body>
<div>
     <ul>
        <li>Elemento 1 de la lista</li>
        <li>Elemento 2 de la lista</li>
        <li>Elemento 3 de la lista</li>
        <li>Elemento 4 de la lista</li>
        <li>Elemento 5 de la lista</li>
        <li>Elemento 6 de la lista</li>
     </ul>
</div>
</body>
</html>

Estableciendo el ancho y alto de un elemento

Los metodos width(val) y height(val) pueden utilizarse para establecer la anchura y altura, respectivamente de cualquier elemento, ejemplo: A continuacion se presenta un ejemplo sencillo que define la anchura del primer elemento de division en la que el resto de los elementos su ancho ha sido establecido por la hoja de estilos css.

<html>
<head>
<title>El ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("div:first").width(100);
            $("div:first").css("background-color","blue");
         });
   </script>
   <style type="text/css">
      div{
         width: 70px;
         height: 50px;
         float: left;
         margin: 5px;
         background: red;
         cursor: pointer;
      }
   </style>
</head>
<body>
        <div></div>
        <div>d</div>
        <div>d</div>
        <div>d</div>
        <div>d</div>
</body>
</html>

jQuery metodos CSS

Siguiendo la lista de la tabla de abajo de todos los elementos de todos los elementos que pueden utilizar para jugar con las propiedades CSS.

+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| Metodo                  | Descripcion                                                                                                             |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(nombre)             | Devuelve una propiedad de estilo en el primer elemento que coincida.                                                    |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(nombre,valor)       | Establece una sola propiedad de estilo a un valor en todos los elementos coincidentes.                                  |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| css(propiedades)        | Establece un objeto clave/valor como propiedades de estilo a todos los elementos coincidentes.                          |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| height(valor)           | Ajusta la altura CSS de cada elemento que coincida.                                                                     |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| height()                | Obtiene el actual computado, pixel, altura del primer elemento coincidente.                                             |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| innerHeight( )          | Obtiene la altura interior (excluye el border e incluye el padding) para el primer elemento que coincide.               |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| innerWidth( )           | Obtiene la anchura interior (excluye el border e incluye el padding) para el primer elemento que coincide.              |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| offset( )               | Obtiene el desplazamiento del primer elemento coincidente actual en pixeles, en relacion con el documento.              |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| offsetParent( )         | Devuelve una coleccion jQuery con el padre posicionado del primer elemento coincidente.                                 |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| outerHeight( [margen] ) | Obtiene la altura exterior (incluye el border y padding por defecto) para el primer elemento coincidente.               |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| outerWidth( [margen] )  | Obtiene el ancho exterior (incluye el border y padding por defecto) para el primer elemento coincidente.                |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| position( )             | Obtiene la posicion superior e izquierda de un elemento con respecto a su offsetParent()                                |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollLeft( valor )     | Cuando un valor es pasado, al desplazarse hacia la izquierda se establece el valor de todos los elementos coincidentes. |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollLeft( )           | Obtiene el desplazamiento izquierdo del primer elemento coincidente.                                                    |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollTop( valor )      | Cuando un valor es pasado, al desplazarse hacia la arriba se establece el valor de todos los elementos coincidentes.    |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| scrollTop( )            | Obtiene el desplazamiento superior del primer elemento coincidente.                                                     |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| width( valor )          | Ajusta el ancho CSS de cada elemento coincidente.                                                                       |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+
| width( )                | Obtiene el actual computado, pixel, ancho del primer elemento coincidente.                                              |
+-------------------------+-------------------------------------------------------------------------------------------------------------------------+