Intro Jquery

Temario
Qué es Jquery?
Características de Jquery
Sobre las versiones
Instalar Jquery
Acerca de Plugins

JQuery







Librería basada en JavaScript que se importa en el documento y está
lista para usar.
Multi navegador.
La más popular hoy en día.
Gran cantidad de pequeñas librerías montadas sobre JQuery.
Open Source.
Preparada para manejar:






Elementos del DOM
Eventos
Animaciones
AJAX

JQuery
Características de jQuery
-Acceder al documento HTML (DOM = Document Object Model)
-Modificar la apariencia de la pagina.
-Modificar el contenido de la pagina.
-Manejar eventos de los elementos de la pagina.
-Crear efectos visuales.
-Manipular estilos CSS (Cascading Style Sheets).
-Gran variedad de Plugins.

JQuery


Versiones:



para desarrollo: jquery-1.10.2.js (266KB)
para producción: jquery-1.10.2.min.js (93KB)



Incluir JQuery en nuestro código:



<script type="text/javascript" src="js/jquery1.8.2.min.js"></script>

JQuery
El objeto jQuery y la función $()
La forma básica de interactuar con la página es mediante la función $()
(un alias de jQuery()) que recibe como parámetro una expresión CSS o el
nombre de una etiqueta HTML.

jQuery() - $()
Ejemplo:



$('#divDatosUsuario');
$('.boton');

JavaScript


Para ejecutar código JavaScript cuando se carga la
página (sin JQuery)



HTML:



<html><head>
<script type="text/javascript"
src="js/miLibreria.js"></script>
</head>
<body onLoad=“javascript: func()”> …
</body></html>



JavaScript:











var func = function() {
alert(“hola”);
}

JQuery


Para ejecutar código JavaScript cuando se carga la página
(con JQuery)



HTML:





<html><head>
<script type="text/javascript" src="js/jquery1.10.2.min.js"></script>
</head>
<body onLoad=“javascript: func()”> …
</body></html>



Javascript:




$(document).ready(function() {
});



a

alert(“hola”);

JQuery – Como funciona?





$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});



$ - Es el objeto JQuery (alias) que define la librería. A
partir de $ podemos seleccionar elementos del HTML.
“a” – Es un selector (igual que CSS) que selecciona todos
los elementos A de HTML.
click() – Indica que se va a capturar el evento click del
elemento seleccionado.
$(this) – Me selecciono a mi mismo, en este caso es
$(“a”).
hide() – Es un efecto.







JQuery




Para leer o modificar un atributo de un elemento HTML
var imageSource = $(„img‟).attr(„src‟);
$(„img‟).attr({src: „images/cover2.jpg‟, alt:
„cover2‟});




Para eliminar un atributo
$(„img‟).removeAttr(„height‟);




Para cambiar el contenido de elementos HTML
var strongContent = $(„strong‟).html();
var pContent = $(„p‟).html();





$(„strong‟).html(pContent);
$(„p‟).html(strongContent);

JQuery - Eventos
.bind() - Event Handler Attachment
.blur() - Form Events, Forms
.change() - Form Events, Forms
.click() - Mouse Events
.dblclick() - Mouse Events
.delegate() - Event Handler
Attachment
event.currentTarget - Event Object
event.data - Event Object
event.delegateTarget - Event Object
event.isDefaultPrevented() - Event
Object
event.isImmediatePropagationStopped
() - Event Object
event.isPropagationStopped() Event Object
event.namespace - Event Object
event.pageX - Event Object
event.pageY - Event Object

event.preventDefault() - Event
Object
event.relatedTarget - Event Object
event.result - Event Object
event.stopImmediatePropagation() Event Object
event.stopPropagation() - Event
Object
event.target - Event Object
event.timeStamp - Event Object
event.type - Event Object
event.which - Event Object
.focus() - Form Events, Forms
.focusin() - Keyboard
Events, Mouse Events
.focusout() - Keyboard
Events, Mouse Events
.hover() - Mouse Events
.keydown() - Keyboard Events

JQuery - Eventos
.keypress() - Keyboard Events
.keyup() - Keyboard Events
.mousedown() - Mouse Events
.mouseenter() - Mouse Events
.mouseleave() -Mouse Events
.mousemove() - Mouse Events
.mouseout() - Mouse Events
.mouseover() - Mouse Events
.mouseup() - Mouse Events
.off() - Event Handler Attachment
.on() - Event Handler Attachment
.one() - Event Handler Attachment
jQuery.proxy() - Event Handler
Attachment, Utilities
.ready() - Document Loading
.resize() - Browser Events
.scroll() - Browser Events
.select() - Form Events, Forms
.submit() - Form Events, Forms

.trigger() - Event Handler
Attachment
.triggerHandler() - Event Handler
Attachment
.unbind() - Event Handler
Attachment
.undelegate() - Event Handler
Attachment

JQuery – Efectos básicos










show( ) Ret: jQuery
show( speed, callback ) Ret: jQuery
hide( ) Returns: jQuery
hide( speed, callback ) Ret: jQuery
toggle( )
Returns: jQuery
toggle( switch ) Ret: jQuery
elements).
toggle( speed, callback )
Ret: jQuery

JQuery – Ef. deslizamiento




slideDown( speed, callback ) Ret: jQuery
slideUp( speed, callback ) Ret: jQuery
slideToggle( speed, callback )
Ret: jQuery

JQuery – Ef. ocultamiento
 fadeIn(

speed, callback )
Ret: jQuery
 fadeOut( speed, callback )
Ret: jQuery
 fadeTo( speed, opacity, callback )
Ret:
jQuery

Intro Jquery

Más contenido relacionado

Similar a Intro Jquery (20)

Último (20)

Intro Jquery