INTRODUCCION JQUERY

Qu es Jquery?
Jquery es una librera Javascript
Es un framework
Simplifica el cdigo

Caractersticas de jquery
Nos permite acceso rpido y directo a las distintas partes de una pagina ( DOM)
Unifica estndares CSS en distintos navegadores
Podemos cambiar estilos
Permite alterar contenidos con poco cdigo , insertar imagenes , ordenar listas , mover contenido,
Gestin interaccin con el usuario: eventos
Permite aadir animacin a una pagina
Simplifica el trabajo de Ajax
Facilita creacin de cdigo JavaScript

Tipos de frameworks de javascript

Jquery
Dojo
mootools
prototype

Descargar jquery
Desde www.jquery.com Descargar la ltima versin, te descargas un jquery-XX.min.js
Y situarlo en tu proyecto como otro archivo ms
En html
<link rel="stylesheet" href="martin.css" type="text/css"/> // Tu hoja de estilos
<script src="jquery.js" type="text/javascript"> </script> // La libreria que te bajas
<script src="martin.js" type="text/javascript"> </script> // Tu codigo javascript
NOTA: La librera jquery debe estar antes que tu archive js

Conceptos Bsicos de jQuery

$(document).ready()
No es posible interactuar de forma segura con el contenido de una pgina hasta que el documento no se
encuentre preparado para su manipulacin. jQuery permite detectar dicho estado a travs de la
declaracin $(document).ready() de forma tal que el bloque se ejecutar slo una vez que la pgina est
disponible.

El bloque $(document).ready()
$(document).ready(function() {
alert("bienvenido a mi pagina");
});
Existe una forma abreviada para $(document).ready() la cual podr encontrar algunas veces; sin
embargo, es recomendable no utilizarla en caso que este escribiendo cdigo para gente que no conoce
jQuery.
Forma abreviada para $(document).ready()
$(function() {
alert("bienvenido a mi pagina");
});
Adems es posible pasarle a $(document).ready() una funcin nombrada en lugar de una annima:
Pasar una funcin nombrada en lugar de una funcin annima
function miFuncion(){ alert("bienvenido a mi pagina");}
$(document).ready(function() {
miFuncion();
});

Seleccin de Elementos
El concepto ms bsico de jQuery es el de seleccionar algunos elementos y realizar acciones con
ellos. La biblioteca soporta gran parte de los selectores CSS3 y varios ms no estandarizados. En
http://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobre los
selectores de la biblioteca.

A continuacin se muestran algunas tcnicas comunes para la seleccin de elementos:

Seleccin de elementos en base a su ID

Seleccin de elementos en base al nombre de clase

Seleccin de elementos por su atributo

Seleccin de elementos en forma de selector CSS

Pseudo-selectores

<div id="caja1"> <p id="parrafo1">Hola </p> </div>

.centrar{
width:50%;
margin:0 auto;
border: solid 1px red;
}
$(document).ready(function() {
$('#caja1').addClass('centrar');
$('#parrafo1').css({'color':'blue'});
});
4

Primer ejemplo de jquery

Aplicacin de estilo a varias partes de un documento
Html
<div class="discurso-destacado"> </div>
CSS
.enfatizar {
font-style: italic;
border: 1px solid #888;
padding: 0.5em;
}
En TuXX.js
/* Encuentra todas las partes del documento cuya class es discurso-destacado y le aade la clase
enfatizar mediante el mtodo addClass */
$(document).ready(function() { // Esta funcin es como el onLoad en javascript
$('.discurso-destacado').addClass('enfatizar');
});

Hacer ms con menos codigo

Guardar Selecciones
Cada vez que se hace una seleccin, una gran cantidad de cdigo es ejecutado. jQuery no
guarda el resultado por si solo, por lo tanto, si va a realizar una seleccin que luego se har de
nuevo, deber guardar la seleccin en una variable.
Guardar selecciones en una variable

Una vez que la seleccin es guardada en la variable, se la puede utilizar en conjunto con
los mtodos de jQuery y el resultado ser igual que utilizando la seleccin original.

Obtenedores (Getters) & Establecedores (Setters)

jQuery sobrecarga sus mtodos, en otras palabras, el mtodo para establecer un valor posee el mismo
nombre que el mtodo para obtener un valor. Cuando un mtodo es utilizado para establecer un valor, es
llamado mtodo establecedor (en ingls setter). En cambio, cuando un mtodo es utilizado para obtener
(o leer) un valor, es llamado obtenedor (en ingls getter).
El mtodo html utilizado como establecedor
$('h1').html('hello world');
$('h1').text('hello world');

El mtodo html utilizado como obtenedor

var txt=$('h1').html();
var txt=$('h1'). text ();

Eventos

Introduccin
jQuery provee mtodos para asociar controladores de eventos (en ingls event handlers) a
selectores. Cuando un evento ocurre, la funcin provista es ejecutada. Dentro de la funcin, la palabra
clave this hace referencia al elemento en que el evento ocurre. Para ms detalles sobre los
eventos en jQuery, puede consultar http://api.jquery.com/category/events/.
La funcin del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para
determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de ste.
Para ms detalles sobre el objeto del evento,
visite http://api.jquery.com/category/events/event-object/.

Vincular Eventos a Elementos

jQuery ofrece mtodos para la mayora de los eventos entre ellos $.fn.click, $.fn.focus,
$.fn.blur, $.fn.change, etc. Estos ltimos son formas reducidas del mtodo $.fn.bind de jQuery. El
mtodo bind es til para vincular (en ingls binding) la misma funcin de controlador a mltiples
eventos, para cuando se desea proveer informacin al controlador de evento, cuando se est
trabajando con eventos personalizados o cuando se desea pasar un objeto a mltiples eventos y
controladores.
Vincular un evento utilizando un mtodo reducido

Vincular un evento utilizando el mtodo $.fn.bind method

Muy a menudo, elementos en una aplicacin estarn vinculados a mltiples eventos, cada uno con una
funcin diferente. En estos casos, es posible pasar un objeto dentro de $.fn.bind con uno o ms
pares de nombres claves/valores. Cada nombre clave ser el nombre del evento mientras que cada valor
ser la funcin a ejecutar cuando ocurra el evento.
Vincular mltiples eventos a un elemento

Otros cdigos en jquery

jQuery Event Basics: .click(), .focus(), .blur(), .change(), etc.
// Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
// Equivalent event setup using the `.on()` method
$( "p" ).on( "click", function() {
console.log( "click" );
});
// Binding multiple events with different handlers
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
$( document ).ready(function(){
$( "button.alert" ).on( "click", function() {
console.log( "A button with the alert class was clicked!" );
});
$( "button" ).addClass( "alert" ).appendTo( document.body );
});
// Preventing a link from being followed
$( "a" ).click(function( eventObject ) {
var $this = $( this );
if ( $this.attr( "href" ).match( /evil/ ) ) {
eventObject.preventDefault();
$this.addClass( "evil" );
}
});
$(document).ready(function() {
$('#alternador-largo').bind('click', function() {
$('body').removeClass('estrecho');
$('body').addClass('largo');
$(this).addClass('selected');
});
});

Otras funciones utiles

.toggle() Expandir y colapsar
.hover() destacar elementos
.stopPropagation() Limitar elementos que responden
.unbind() Eliminar gestor de eventos
.trigger() Ejecutar eventos sin evento

Mas sobreSelectores

Tipos de selectores
1- Selectores CSS
2- Selectores XPath
3- Selectores Personalizados

1 Selectores CSS

Con html
<div>
<ul id="obras-seleccionadas">
<li>Comedias
<ul>
<li><a href="http://www.mysite.com/asyoulikeit/">
Como Gustis</a></li>
<li>A buen fin no hay mal principio</li>
<li>Sueo de una noche de verano</li>
<li>Noche de Reyes</li>
</ul>
</li>
</ul>
</div>
// Doumento JavaScript
// Aadir una clase al nivel superior de los items de la lista.
$(document).ready(function() {
$('#obras-seleccionadas > li').addClass('horizontal');
$('#obras-seleccionadas li:not(.horizontal)').addClass('sub-level');
});

10

2 Selectores XPath

// Add a class to all mailto and pdf links on the page.

$(document).ready(function() {
$('a[@href^="mailto:"]').addClass('mailto');
$('a[@href$=".pdf"]').addClass('pdflink');
$('a[@href*="mysite.com"]').addClass('mysite');
});

11

3 Selectores Personalizados

Seleccionamos de todos los div que se les aplica la clase horizontal , el segundo div

12

jQuery. El mtodo .css

13

jQuery. Efectos. .hide, .show y .animate

$(document).ready(function() {
$('div.etiqueta').click(function() {
$('div.boton')
.fadeTo('slow',0.5)
.animate({left: 650}, 'slow')
.fadeTo('slow',1.0);
$('div.boton').css('backgroundColor','#f00');
});
});
$(document).ready(function() {
$('p:eq(1)').hide();
$('span.mas').click(function() {
$('p:eq(1)'). animate({height: 'show', width: 'show',
opacity: 'show'}, 'slow');
$(this).hide();
});
});

14

Manipulacin del DOM.

http://www.blogdellamas.vacau.com/curso_jquery/lecciones/lecc10_jquery_manipular_dom.html

Mas Informacin
jQuery. Introduccin
http://es.scribd.com/doc/44079513/presentacion-JQuery
TUTORIALES
http://www.javascriptya.com.ar/jquery/
http://www.blogdellamas.vacau.com/curso_jquery/indice_jquery.html
http://www.w3schools.com/jQuery/
http://learn.jquery.com/
http://jqfundamentals.com/
VIDEOTUTORIALES
http://www.oscar-gomez.net/categoria/curso-jquery
240 Plugins para jQuery
http://pixelcoblog.com/240-plugins-para-jquery/

15