UNIVERSIDAD AUTONOMA GABRIEL RENE MORENO

FACULTAD DE INGENIERIA EN CIENCIAS DE LA

COMPUTACION Y TELECOMUNICACIONES

EXPOSICION GRUPO #11

JQUERY

INTEGRANTES: AREVILCA CARLA ANAHI

PEREZ AÑEZ THALIA
VILLARTE CAUCOTA MANFRED RUBEN
DOCENTE: ING. EVANS BALCAZAR
MATERIA: TECNOLOGIA WEB
GRUPO: “SA”
FECHA: 16/11/2018

SANTA CRUZ – BOLIVIA

[Escriba aquí]

INDICE

1. INTRODUCCIÓN ......................................................................................................................... 2
2. ANTECEDENTES Y JUSTIFICACION .................................................................................. 2
2.1. ANTECEDENTES............................................................................................................... 2
2.2. JUSTIFICACION ............................................................................................................ 2
3. PROBLEMA .................................................................................................................................. 2
3.1. SITUACION PROBLEMATICA....................................................................................... 2
3.2. FORMULACION DEL PROBLEMA .................................................................................. 3
4. OBJETIVOS ................................................................................................................................ 3
4.1. OBJETIVO GENERAL ..................................................................................................... 3
4.2. OBJETIVOS ESPECIFICOS ......................................................................................... 3
5. METODOLOGIA ........................................................................................................................... 3
6. MARCO TEORICO ...................................................................................................................... 4
6.1 BREVE RESEÑA HISTÓRICA....................................................................................... 4
6.1.1 EVOLUCIÓN DE LAS VERSIONES...................................................................... 4
6.2 JQUERY ............................................................................................................................. 6
6.3 DIFERENCIAS ENTRE JAVASCRIPT Y JQUERY................................................... 6
6.4 ELEMENTOS ...................................................................................................................... 7
6.4.1 JQUERY SYNTAXIS ................................................................................................ 7
6.4.1.1 JQUERY SELECTORES Y EVENTOS................................................................ 7
6.4.1.2 JQUERY EFECTOS ............................................................................................. 11
6.4.1.3 JQUERY HTML .................................................................................................... 15
6.4.1.4 JQUERY TRAVERSING...................................................................................... 16
6.4.1.5 JQUERY AJAX .................................................................................................... 18
6.5 OTRAS CARACTERISTICAS ....................................................................................... 19
6.5.1.1.1. JQUERY MOBILE ............................................................................................. 19
7. DESARROLLO......................................................................................................................... 19
8. RESULTADOS......................................................................................................................... 20
9. VENTAJAS Y DESVENTAJAS DE JQUERY .................................................................... 20
7.1. VENTAJAS ......................................................................................................................... 20
7.1. DESVENTAJAS ............................................................................................................... 21
8. CONCLUSION ......................................................................................................................... 21
9. BIBLIOGRAFIA .................................................................................................................... 21

JQUERY 1
[Escriba aquí]

1. INTRODUCCIÓN

JQuery es una librería JavaScript open-source mantenida por la

fundación jquery.org., que funciona en múltiples navegadores, y que es compatible
con CSS3. Su objetivo principal es hacer la programación “scripting” mucho más
fácil y rápida del lado del cliente. Con jQuery se pueden producir páginas
dinámicas, así como animaciones parecidas a Flash en relativamente corto tiempo.

Su lema resume muy bien lo que nos aporta “write less, do more”, el punto
más fuerte de jQuery es que reduce el número de instrucciones que usaríamos con
JavaScript, y nos acorta esta sintaxis. La forma de interactuar con el DOM de
nuestro HTML es a través de la función $(), un alias de jQuery () escribe menos,
haz más. Entre sus características podemos destacar la facilidad para manipular
el contenido de un documento, la independencia del navegador para gestionar los
eventos, la enorme posibilidad que encontramos para añadir atractivos efectos y
transiciones y la facilidad en la utilización de la técnica AJAX.

2. ANTECEDENTES Y JUSTIFICACION

2.1. ANTECEDENTES

Debido a que la codificación en JavaScript era muy compleja, se llegó a

crear la librería jQuery, al igual que otras bibliotecas, ofrece una serie de
funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más
código, es decir, con las funciones propias de esta biblioteca se logran grandes
resultados en menos tiempo y espacio.

2.2. JUSTIFICACION

A través de este proyecto de investigación sobre jQuery, el principal

objetivo es dar a conocer más acerca de esta librería para que así sea más usada
por los diseñadores, ya que con la información que presentaremos y los ejemplos
se podrán dar cuenta que para cada proyecto hay un patrón indicado que les puede
permitir realizar un trabajo con menor complejidad y en menor tiempo.

3. PROBLEMA
3.1. SITUACION PROBLEMATICA

JQUERY 2
[Escriba aquí]

La Jquery surgió debido a que el formato de javascript era más complejo de

codificar, seguidamente se lanzó jquery el cual maneja el Dom y funciona en todos
los navegadores.

3.2. FORMULACION DEL PROBLEMA

Los usuarios reciben interfaces y animaciones con las cuales tienen que
interactuar muchas veces muy complicadas o muy sencillas las cuales no le permiten
realizar en óptimas condiciones el trabajo que tienen que realizar a través de
una interfaz, lo cual si un diseñador aplicara jquery el cual es una librería que
se puede descargar mediante la página que ya está predeterminado para un uso esto
beneficio tanto al diseñador en el tiempo que le va tomar realizarlo, como al
usuario quien va disfrutar de una interfaz a su comodidad con animaciones y
efectos .

4. OBJETIVOS
4.1. OBJETIVO GENERAL

Aprender sobre las características de jQuery, recordando su historia, evolución

entre sus anteriores versiones. Implementado un ejemplo, para su mejor
comprensión.

4.2. OBJETIVOS ESPECIFICOS

 Dar a conocer los principales métodos usados actualmente.

 Demostrar los beneficios que se pueden tener al utilizar jQuery.

5. METODOLOGIA

Método de análisis-síntesis: Este método es el que consiste en la separación y

estudio independiente de cada una de las partes de la investigación, es muy
usada en el mundo del derecho, donde estudian los expedientes en fragmentos
contestando cada una de las partes al final en una conclusión general.
Su proceso se puede expresar de la siguiente forma:
• Análisis: Separación de ideas o conceptos, lo que permite su comprensión
plena, se conoce como proceso cognoscitivo donde se aprecian todos los puntos
que los hacen coincidir o concordar.
• Síntesis: Es la reunión propia de cada una de las separaciones hechas con
anterioridad y es la reunión de estos dos procesos lo que permite entender la
concordancia de sus ideas.
• Clasificación: Esta nos lleva a poner en jerarquías cada una de las partes.

JQUERY 3
[Escriba aquí]

• Conclusión: La conclusión es el resultado final del estudio realizado con

anterioridad.
(A. 2014,06. Ejemplo de Metodología de la investigación. Revista
Ejemplode.com.)

6. MARCO TEORICO
6.1 BREVE RESEÑA HISTÓRICA

En 2006, era un desarrollador web trabajando en sus propios proyectos.

Estaba frustrado con lo difícil que era escribir JavaScript, que funcionara en
distintos navegadores y decidió escribir su propia biblioteca de JS para
arreglar su problema: jQuery.
El 16 de enero de 2006, John Resig acerca de su nueva biblioteca en un
BarCamp local, a un grupo pequeño de desarrolladores web locales y después
escribió acerca de eso en su blog. A muchos desarrolladores web les encantó la
sencillez y el poder de jQuery, y la biblioteca de John pronto creció en
popularidad.

En pocas palabras, este código revoluciona la forma en que puede obtener

javascript para interactuar con HTML. Realmente es un increíble conjunto de
códigos. Hoy, es la biblioteca más popular de JS en la web, y es mantenida
por , un equipo grande de voluntarios.

jQuery fue publicado por primera vez en enero del 2006 en “BarCamp NYC” por
John Resign. Soporte para AJAX fue agregado un mes después, y el modelo de
licenciamiento open source del MIT fue adoptado en mayo de ese mismo año.

Doce meses después, en septiembre del 2007, jQuery ya mostraba una nueva
interfaz de usuario y ya adquiría gran popularidad, y exactamente un año
después, en septiembre 2008, Microsoft y Nokia anunciaron su soporte. Microsoft
ha tratado de adoptar jQuery para usarlo en Visual Studio (integrándolo en el
Framework AJAX de ASP.NET), y Nokia lo ha integrado en la plataforma de
desarrollo de widgets.

6.1.1 EVOLUCIÓN DE LAS VERSIONES

Fase de desarrollo público: john Resig mencionó por primera vez una mejora en
la biblioteca "Behaviour" del prototipo en agosto de 2005. Este nuevo marco de
trabajo se lanzó formalmente como jQuery el 14 de enero, 2006.

jQuery 1.0 (agosto 2006): Ésta, la primera versión estable de la biblioteca,

ya disponía de soporte robusto para selectores CSS, manejadores de evento e
interacción AJAX.

JQUERY 4
[Escriba aquí]

jQuery 1.1 (enero 2007): Esta versión simplificaba la API considerablemente.

Muchos métodos rara vez utilizados se combinaron, reduciendo el número de
métodos a aprender y documentar.
jQuery 1.1.3 (julio 2007): Esta versión menor contenía importantes mejoras de
velocidad para el motor selector de jQuery. A partir de esta versión, el
rendimiento de jQuery se compararía favorablemente con las librerías JavaScript
semejantes como Prototype, Mootools, y Dojo.

jQuery 1.2 (septiembre 2007): La sintaxis XPath para seleccionar elementos se

eliminó en esta versión, ya que pasaba a ser redundante con la sintaxis CSS.
La personalización de efectos pasó a ser mucho más flexible en esta versión, y
el desarrollo de plug-ins pasó a ser más sencillo con la incorporación de
eventos de espacio de nombre.

jQuery UI (septiembre 2007): Esta nueva suite de plug-in se anunció para

sustituir el plug-in popular, aunque antiguo, Interface. Se incluyó una rica
colección de widgets prefabricados, así como un conjunto de herramientas para
crear elementos sofisticados como interfaces de arrastrar y soltar.

jQuery 1.2.6 (mayo 2008): La funcionalidad del popular plug-in Dimensions de

Brandon- Aaron se incluyó en la librería principal.

jQuery}.3 (enero 2009): Una importante revisión del motor selector (Sizzle)
proporcionó un gran impulso al rendimiento de la librería. La delegación de
evento pasó a soportarse formalmente.

JavaScript
JavaScript es un lenguaje de programación dinámica multiparadigma de alto
nivel de HTML y la Web que se utiliza para mejorar la interactividad en los
sitios web. A menudo abreviado simplemente como JS, es un lenguaje de scripting
basado en prototipos que se utiliza dentro de los navegadores web para
interacciones de interfaz tales como respuestas, juegos, animación, estilo
dinámico, etc. Un lenguaje versátil pero sofisticado, es una de las principales
tecnologías de producción de contenidos de la World Wide Web, junto con HTML y
CSS. Es muy flexible con funciones de primera clase. Aunque es un lenguaje de
scripting, también se puede utilizar para entornos que no sean navegadores.
Se puede utilizar como un lenguaje de procedimiento y también como un
lenguaje orientado a objetos. De hecho, puede hacer mucho más de lo que usted
puede anticipar. Es un poderoso lenguaje de scripting que crea funcionalidad y
características para proporcionar una experiencia de uso enriquecido. Casi
JQUERY 5
[Escriba aquí]

todos los sitios web utilizan JavaScript para contenido interactivo y cada
navegador web lo soporta con la ayuda de un motor JavaScript integrado sin
tener que usar plug-ins. En términos simples, JavaScript da vida a las páginas
web. Los programas se llaman “scripts” que pueden ser escritos en el HTML y
ejecutados a medida que la página termina de cargarse.
Es un lenguaje totalmente independiente sin asociación alguna con Java.
Con JavaScript, puede crear desde carruseles hasta presentaciones de
diapositivas, pasando por galerías de imágenes y diseños fluctuantes. Además,
también puede crear animaciones de alto nivel, gráficos 3D, juegos,
aplicaciones basadas en datos, movimientos de punteros, etc. JavaScript se
implementó inicialmente en los navegadores del lado del cliente, pero ahora
están evolucionados para proporcionar funcionalidad y características para
todos los tipos de software host, incluyendo el lado del servidor en bases de
datos y servidores web. Las herramientas y funcionalidades modernas han hecho
de JavaScript un lenguaje de scripting eficiente.

6.2 JQUERY

Los desarrolladores web creaban sus propios frameworks a medida en

JavaScript. Esto les permitía solucionar errores específicos sin perder tiempo
depurando funcionalidades comunes. Esto condujo a grupos de desarrolladores a
crear librerías de JavaScript que eran de código abierto y libre de usar.
JQuery es simplemente una librería específica de código JavaScript.
Existen muchas otras librerías JavaScript como MooTools, pero jQuery se ha
convertido en la más popular debido a su facilidad de uso y su gran potencia.

6.3 DIFERENCIAS ENTRE JAVASCRIPT Y JQUERY

 JavaScript vs jQuery en términos de “Función”: Aunque el nombre sugiere que

ambos términos deben estar relacionados de alguna manera, son muy diferentes
entre sí. Mientras que JavaScript es un lenguaje de programación
interpretado de alto nivel, jQuery es una librería de scripting
multiplataforma que utiliza sintaxis JavaScript para mejorar la
interactividad del navegador web.
 JavaScript vs jQuery en términos de “Propósito”: Mientras que ambos sirven
para el mismo propósito, es decir, hacer que el trabajo del desarrollador
sea lo más simple posible, jQuery es bastante eficiente y fácil de usar que
simplifica las cosas complejas con sólo unas pocas líneas de código, lo que
de otro modo requeriría varias líneas de código con JavaScript en bruto.
 JavaScript vs jQuery en términos de “Performance”: Necesitará una
comprensión completa e información de sintaxis de JavaScript para sacar el
máximo partido a jQuery. Sin embargo, jQuery es un framework de JavaScript

JQUERY 6
[Escriba aquí]

que no puede vivir solo. De hecho, utiliza los recursos que ofrece JavaScript
para simplificar las cosas al manipular DOM, incluyendo muchas tareas.
 JavaScript vs jQuery en términos de “Script”: Usted necesita escribir su
propio script mientras usa JavaScript, lo que eventualmente llevaría tiempo.
jQuery, por otro lado, no requiere cientos de líneas de código. Los scripts
ya existen en las bibliotecas.
 JavaScript vs jQuery en términos de “Características”: jQuery facilita a
los desarrolladores la realización de varias tareas en lugar de utilizar
sólo JavaScript en bruto. jQuery es rápido, ligero y rico en funciones, lo
que hace que cosas como el manejo de eventos, la animación, el desplazamiento
de documentos HTML y el manejo de Ajax sean mucho más fáciles que con
JavaScript simple.

6.4 ELEMENTOS
6.4.1 JQUERY SYNTAXIS

La sintaxis de jQuery está hecha a medida para la selección de los elementos

HTML y realizar alguna acción sobre estos.

Sintaxis básica es: $(selector).action()

 A $ señal para definir / jQuery acceso

 Un(selector)para "consulta (o encontrar)" elementos HTML
 A jQuery action () que se realiza en el element(s)

6.4.1.1 JQUERY SELECTORES Y EVENTOS

Los selectores de jQuery

JQUERY 7
[Escriba aquí]

Los selectores de jQuery permiten seleccionar y manipular elementos de HTML.

Se utilizan para "encontrar" (o seleccionar) elementos HTML basándose en su
nombre, id, clases, tipos, atributos, valores de atributos y mucho más. Está
basado en los existentes selectores CSS , y, además, tiene algunos
selectores personalizados propios.

Todos los selectores de jQuery comienzan con el signo de dólar y paréntesis:

$ ().

tipo Definición Sintaxis Ejemplo

selector de selecciona elementos Puede seleccionar Cuando un usuario hace clic en un
elemento basados en el nombre todos los elementos botón, todos los elementos <P> estarán
del elemento. <p> en una página ocultas:
como esta:
$(document).ready(function(){
$("p") $("button").click(function(){
$("p").hide();
});
});
Selector de utiliza el atributo Para encontrar un Cuando un usuario hace clic en un
#id id de una etiqueta elemento con un ID botón, el elemento con id = "prueba" se
HTML para encontrar específico, escribe ocultará:
el elemento un carácter
específico. almohadilla, $(document).ready(function(){
seguido por el id $("button").click(function(){
Un identificador debe del elemento HTML: $("#test").hide();
ser único dentro de });
una página, por lo $("#test") });
que debe utilizar el
selector #id cuando
se quiere encontrar
un solo elemento,
único.
Selector de encuentra elementos Para encontrar Cuando un usuario hace clic en un
.class con una clase elementos con una botón, los elementos con class =
específica. clase específica, "prueba" se ocultarán:
escribe un carácter
de punto, seguido $(document).ready(function(){
del nombre de la $("button").click(function(){
clase: $(".test").hide();
});
$(".test") });

Más ejemplos de jQuery selectores

Sintaxis Descripcion

$("*") Selects all elements

$(this) Selects the current HTML element

$("p.intro") Selects all <p> elements with class="intro"

$("p:first") Selects the first <p> element

$("ul li:first") Selects the first <li> element of the first <ul>

JQUERY 8
[Escriba aquí]

$("ul li:first-child") Selects the first <li> element of every <ul>

$("[href]") Selects all elements with an href attribute

$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to
"_blank"

$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal
to "_blank"

$(":button") Selects all <button> elements and <input> elements of

type="button"

$("tr:even") Selects all even <tr> elements

$("tr:odd") Selects all odd <tr> elements

Eventos
Todas las acciones de los diferentes visitantes que una página web puede responder
a eventos se llaman.
Un evento representa el momento preciso en que algo sucede. Ejemplos:

 mover el ratón sobre un elemento

 seleccionar un botón de opción
 al hacer clic en un elemento
Aquí hay algunos eventos DOM comunes:

Eventos del ratón Eventos de teclado Eventos de formulario Documento / ventana

Eventos

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

JQuery sintaxis Para Métodos de Evento

En jQuery, la mayoría de los eventos DOM tienen un método jQuery equivalente.

Para asignar un evento de clic a todos los párrafos en una página, usted puede
hacer esto:

$("p").click();

El siguiente paso es definir lo que debe ocurrir cuando se activa el evento.

Debe pasar una función para el evento:

JQUERY 9
[Escriba aquí]

$("p").click(function(){
// action goes here!!
});

Comúnmente utilizado método de eventos de jQuery

$(document).ready()

El $(document).ready() método nos permite ejecutar una función cuando el documento

se ha cargado completamente.

Evento Definición Ejemplo

click() atribuye una función de controlador de Cuando un evento de clic en
eventos para un elemento HTML un <p> elemento; oculta el
elemento.
La función se ejecuta cuando el
usuario hace clic en el elemento HTML. $("p").click(function(){
$(this).hide();
});
dblclick() La función se ejecuta cuando el $("p").dblclick(function(){
usuario hace doble clic en el elemento $(this).hide();
HTML: });
mouseenter() La función se ejecuta cuando el $("#p1").mouseenter(function(){
puntero del ratón entra en el elemento alert("You entered p1!");
HTML: });
mouseleave() La función se ejecuta cuando el $("#p1").mouseleave(function(){
puntero del ratón sale del elemento alert("Bye! You now leave
HTML: p1!");
});
mousedown() La función se ejecuta, cuando el botón $("#p1").mousedown(function(){
central o derecho del ratón izquierdo, alert("Mouse down over
se presiona hacia abajo, mientras que p1!");
el ratón está sobre el elemento HTML: });
mouseup() La función se ejecuta, cuando la $("#p1").mouseup(function(){
izquierda, el botón central o derecho alert("Mouse up over p1!");
del ratón es liberado, mientras que el });
ratón está sobre el elemento HTML:
hover() método tiene dos funciones y es una $("#p1").hover(function(){
combinación de la alert("You entered p1!");
mouseenter() y mouseleave() métodos. },
function(){
La primera función se ejecuta cuando alert("Bye! You now leave
el ratón entra en el elemento HTML, y p1!");
se ejecuta la segunda función cuando });
el ratón sale del elemento HTML:
focus() La función se ejecuta cuando el campo $("input").focus(function(){
de formulario se centrará: $(this).css("background-
color", "#cccccc");
});
blur() La función se ejecuta cuando el campo $("input").blur(function(){
de formulario pierde el foco: $(this).css("background-
color", "#ffffff");
});
on() se conecta uno o más controladores de $("p").on("click", function(){
eventos para los elementos $(this).hide();
seleccionados. });
Adjuntar un evento de clic a
un <p> elemento:

JQUERY 10
[Escriba aquí]

6.4.1.2 JQUERY EFECTOS

Ocultar/mostrar

Efecto Definición Ejemplo

hide() y show() puede ocultar y mostrar los elementos $("#hide").click(function(){
HTML $("p").hide();
});
$("#show").click(function(){
$("p").show();
});
toggle() puede alternar entre los $("button").click(function(){
metodos hide() y show(). $("p").toggle();
});
elementos que se muestran están
ocultos y se muestran los elementos
ocultos:

Descolorarse jQuery puede desaparecer un elemento dentro y fuera de la

visibilidad.

Efecto Definición Ejemplo

fadeIn() se utiliza para desvanecerse en un demuestra la fadeIn() método con
elemento oculto. diferentes parámetros:
Sintaxis:
$("button").click(function(){
$(selector).fadeIn(speed,callback); $("#div1").fadeIn();
El parámetro de velocidad opcional $("#div2").fadeIn("slow");
especifica la duración del efecto. $("#div3").fadeIn(3000);
Puede tomar los siguientes });
valores: "slow", "fast”, o
milisegundos.
El parámetro callback opcional es una
función a ejecutar después de la
decoloración completa.
fadeOut() se utiliza para desaparecer un fadeOut() método con diferentes
elemento visible. parámetros:
Sintaxis:
$("button").click(function(){
$(selector).fadeOut(speed,callback); $("#div1").fadeOut();
El parámetro de velocidad opcional $("#div2").fadeOut("slow");
especifica la duración del efecto, $("#div3").fadeOut(3000);
"slow", "fast" , o milisegundos. });
El parámetro callback opcional es una
función a ejecutar después de la
decoloración completa.
fadeToggle( alterna entre El siguiente ejemplo demuestra
) la fadeIn() y fadeOut() métodos. la fadeToggle() método con
diferentes parámetros:
Si los elementos se
desvanecieron, fadeToggle() se $("button").click(function(){
desvanecerá. $("#div1").fadeToggle();
$("#div2").fadeToggle("slow"
Sintaxis: );
$("#div3").fadeToggle(3000);
$(selector).fadeToggle(speed,callback)
});
;
El parámetro de velocidad opcional
especifica la duración del efecto,
"slow", "fast" , o milisegundos.
El parámetro callback opcional es una
función a ejecutar después de la
decoloración completa.

JQUERY 11
[Escriba aquí]

fadeTo() permite la decoloración de una demuestra la fadeTo() método con

opacidad dada (valor entre 0 y 1). diferentes parámetros:
Sintaxis: $("button").click(function(){
$("#div1").fadeTo("slow", 0.
$(selector).fadeTo(speed,opacity,callb 15);
ack); $("#div2").fadeTo("slow", 0.
El parámetro de velocidad requerida 4);
especifica la duración del efecto, $("#div3").fadeTo("slow", 0.
valores: "slow", "fast" , o 7);
milisegundos. });
El parámetro de opacidad requerida en
el fadeTo() método especifica la
decoloración a una opacidad dada
(valor entre 0 y 1).
El parámetro callback opcional es una
función a ejecutar después de la
función completa.

Diapositiva deslizante Con jQuery se puede crear un efecto de deslizamiento en

los elementos

Efecto Definición Ejemplo

slideDown() se utiliza para deslizarse por un $("#flip").click(function(){
elemento. $("#panel").slideDown();
});
Sintaxis:

$(selector).slideDown(speed,callback);
El parámetro de velocidad opcional
especifica la duración del efecto,
"slow", "fast" , o milisegundos.
El parámetro callback opcional es una
función a ejecutar después de que se
complete el deslizamiento.

slideUp() se utiliza para deslizarse hacia arriba $("#flip").click(function(){

un elemento. $("#panel").slideUp();
});
Sintaxis:
$(selector).slideUp(speed,callback);
El parámetro de velocidad opcional
especifica la duración del efecto,
"slow", "fast" , o milisegundos.
El parámetro callback opcional es una
función a ejecutar después de que se
complete el deslizamiento.

slideToggle() alterna entre $("#flip").click(function(){

la slideDown() y slideUp() métodos. $("#panel").slideToggle();
});
Si los elementos se han deslizado hacia
abajo, slideToggle() se deslizará hacia
arriba.
Si los elementos se han deslizado hacia
arriba, slideToggle() se deslizará hacia
abajo.
$(selector).slideToggle(speed,callback);
El parámetro de velocidad opcional puede
tomar los siguientes valores: "slow",
"fast" , milisegundos.

JQUERY 12
[Escriba aquí]

El parámetro callback opcional es una

función a ejecutar después de que se
complete el deslizamiento.

Animar El jQuery animate() método se utiliza para crear animaciones

personalizadas.

Efecto Definición Ejemplo

animate() Sintaxis: se mueve un <div> elemento hacia la
$(selector).animate({params},speed,ca derecha, hasta que se haya
llback); alcanzado una propiedad izquierdo
El parámetro params requerido define de 250 píxeles:
las propiedades CSS para ser animados.
El parámetro de velocidad opcional
especifica la duración del efecto.
Ejemplo
Puede tomar los siguientes
valores: "slow", "fast" , o $("button").click(function(){
milisegundos. $("div").animate({left: '250px'
El parámetro callback opcional es una });
función a ejecutar después de la });
animación completa. Por defecto, todos los elementos
HTML tienen una posición estática,
y no se pueden mover.
Para manipular la posición,
recuerde que debe establecer en
primer lugar la posición de
propiedad CSS del elemento
al relative, fixed o absolute !

animate() varias propiedades se pueden animar $("button").click(function(){

- al mismo tiempo: $("div").animate({
manipular left: '250px',
las opacity: '0.5',
propiedade height: '150px',
s width: '150px'
múltiples });
});

animate() También es posible definir valores $("button").click(function(){

- Uso de relativos (el valor es entonces en $("div").animate({
valores relación con el valor actual del left: '250px',
relativos elemento). Esto se hace height: '+=150px',
poniendo += o -=frente al valor: width: '+=150px'
});
});
animate() Incluso puede especificar el valor de $("button").click(function(){
- Uso de una propiedad de animación $("div").animate({
valores como "show", "hide" o "toggle”: height: 'toggle'
predefinid });
os });

animate() De forma predeterminada, jQuery viene $("button").click(function(){

- Utiliza con funcionalidad de colas para las
cola animaciones.
Funcionali
dad Esto significa que si usted escribe
múltiples animate() llama a una
después de otra, jQuery crea una cola
de "interno" con estas llamadas a
métodos. A continuación, se corre el
animado llama uno por uno.
var div = $("div");
div.animate({height: '300px',
opacity: '0.4'}, "slow");
div.animate({width: '300px',
opacity: '0.8'}, "slow");
div.animate({height: '100px',
opacity: '0.4'}, "slow");
div.animate({width: '100px',
opacity: '0.8'}, "slow");
});

JQUERY 13
[Escriba aquí]

Por lo tanto, si desea realizar

diferentes animaciones, uno tras otro, Ejemplo 2
tomamos ventaja de la funcionalidad de
cola:
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "s
low");
div.animate({fontSize: '3em'},
"slow");
});

Stop se utiliza para detener una animación o efecto antes de que se termine.
funciona para todas las funciones de efectos jQuery, incluyendo deslizamiento, la
decoloración y animaciones personalizadas.
Efecto Definición Ejemplo
stop() Sintaxis: $("#stop").click(function(){
$("#panel").stop();
$(selector).stop(stopAll,goToEnd); });
El opcional stopAll parámetro especifica
si también la cola de la animación debe
ser limpiado o no. El valor predeterminado
es falso, lo que significa que sólo la
animación activa se detendrá, lo que
permite cualquier animación en cola a
realizar después.
El opcional goToEnd parámetro especifica
si o no para completar la animación actual
inmediatamente. El valor predeterminado
es falso.
Así que, por defecto, el stop() método
mata a la animación actual que se realiza
en el elemento seleccionado.

Devolución de llamada
Las sentencias de JavaScript se ejecutan línea por línea. Sin embargo, con efectos,
la siguiente línea de código se puede ejecutar a pesar de que el efecto no se ha
terminado. Esto puede crear errores.

Para evitar esto, se puede crear una función de devolución de llamada. Una función
de devolución de llamada se ejecuta después de que el efecto actual ha terminado.

Sintaxis típica: $(selector).hide(speed,callback);

El siguiente ejemplo tiene un parámetro de devolución de llamada que es una función

que se ejecutará después de que se complete el efecto de ocultar:

$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});

El siguiente ejemplo tiene ningún parámetro de devolución de llamada, y el cuadro

de alerta se mostrará antes de que se complete el efecto piel:

JQUERY 14
[Escriba aquí]

$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});

Encadenamiento

Hasta ahora hemos estado escribiendo jQuery declaraciones de uno en uno (uno tras
otro). Sin embargo, existe una técnica llamada encadenamiento, que nos permite
ejecutar varios comandos de jQuery, uno tras otro, en el mismo elemento.

Consejo: De esta manera, los navegadores no tienen que encontrar el

mismo elemento más de una vez. Para encadenar una acción, sólo tiene que anexar
la acción de la acción anterior.

El siguiente ejemplo cadenas juntos los css (), slideUp (), y slideDown() métodos.
El "p1" primer elemento cambia a rojo, luego se desliza hacia arriba, y luego se
desliza hacia abajo:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Consejo: Cuando se encadenan, la línea de código podría llegar a ser bastante

larga. Sin embargo, jQuery no es muy estricta sobre la sintaxis; puede darle
formato como usted desee, incluyendo saltos de línea y hendiduras.
Esto también funciona muy bien:
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);

jQuery tira a la basura espacios en blanco extra y ejecuta las líneas anteriores
como una larga línea de código.

6.4.1.3 JQUERY HTML

Jquery Html
Nombre Definicion Comando Ejemplo
jQuery - Obtener contenido -text() - Establece o $("#btn1").click(funct
Obtener - text(), html() , devuelve el contenido ion(){
contenido y val() de texto de los alert("Text: " +
y Tres, métodos útiles elementos seleccionados $("#test").text());
atributos para la manipulación -html() - Establece o });
DOM que define un devuelve el contenido $("#btn2").click(funct
estándar para acceder de los elementos ion(){
a documentos HTML y seleccionados alert("HTML: " +
XML: (incluyendo el formato $("#test").html());
Obtener Atributos HTML) });
- attr() método se -val() - Establece o $("button").click(func
utiliza para obtener devuelve el valor de tion(){
los valores de los los campos de alert($("#w3s").at
atributos. formulario tr("href"));
});

jQuery - Añadir nuevo jQuery append() Método $("p").append("Some

Añadir contenido HTML El appended text.");
elementos jQuery append() método

JQUERY 15
[Escriba aquí]

append() - contenido inserta contenido al $("p").prepend("Some

de inserciones en el final de los elementos prepended text.");
extremo de los HTML seleccionados.
elementos jQuery prepend() Método
seleccionados El
prepend() - contenido jQuery prepend() método
de inserciones en el inserta contenido al
comienzo de los principio de los
elementos elementos HTML
seleccionados seleccionados.
after() - Inserta el
contenido después de
los elementos
seleccionados
before() - Inserta el
contenido antes de
que los elementos
seleccionados

jQuery - addClass() - Añade jQuery addClass() Métod $("button").click(func

Obtener y una o más clases de o tion(){
establecer los elementos Agregar atributos de $("h1, h2,
clases CSS seleccionados clase a los diferentes p").addClass("blue");
removeClass() - elementos. Por $("div").addClass(
Elimina una o más supuesto, puede "important");
clases de los seleccionar varios });
elementos elementos, al agregar $("button").click(func
seleccionados clases: tion(){
toggleClass() - jQuery removeClass() Mé $("h1, h2,
Cambia entre la todo p").removeClass("blue"
adición / eliminación eliminar un atributo de );
de las clases de los clase específica de });
elementos diferentes elementos: $("button").click(func
seleccionados jQuery toggleClass() Mé tion(){
css() - Establece o todo $("h1, h2,
devuelve el atributo Este método se conmuta p").toggleClass("blue"
de estilo entre añadir / eliminar );
las clases de los });
elementos
seleccionados:

6.4.1.4 JQUERY TRAVERSING

Jquery Traversing
Nombre Definicion Comando Ejemplo
jQuery jQuery de La <div> elemento es
Traversing desplazamiento, lo el padre de <ul> , y
que significa un antepasado de todo dentro de
"moverse a través ella
de", se utiliza La <ul> elemento es el padre de
para "encontrar" (o ambos <li> elementos, y
seleccionar) un niño de <div>
elementos HTML en La izquierda <li> elemento es
función de su el padre de <span> , hijo de <u
relación con otros l> y descendiente de <div>
elementos La <span> elemento es
un hijo de la
izquierda <li> y descendiente d
e <ul> y <div>
Los dos <li> elementos
son hermanos (comparten el
mismo padre)
El derecho <li> elemento es
el padre de <b> , hijo de <ul>
y descendiente de <div>

JQUERY 16
[Escriba aquí]

La <b> elemento es un hijo de

la
derecha <li> y descendiente de
<ul> y <div>

jQuery – Tres métodos jQuery jQuery parent() Método $(document).ready(function(){

traversing- útiles para El parent() método devuelve el $("span").parent();
Ancestors recorrer el árbol elemento de matriz directa del });
DOM son: elemento seleccionado. $(document).ready(function(){
parent() Este método sólo atravesar un $("span").parents();
parents() solo nivel en el árbol DOM. });
parentsUntil() jQuery parents() Método
El parents() método devuelve
todos los elementos antecesores
del elemento seleccionado, todo
el camino hasta el elemento
raíz del documento (<html>) .

jQuery Recorriendo el jQuery children() Método $(document).ready(function(){

Atravesando - árbol DOM La children() método devuelve $("div").children("p.first"
Descendientes Dos métodos de todos los hijos directos del );
jQuery útiles para elemento seleccionado. });
recorrer el árbol Este método sólo atravesar un
DOM son: solo nivel hacia abajo el árbol $(document).ready(function(){
children() DOM $("div").find("span");
find() jQuery find() Método });
Los find() devuelve el método
de elementos descendientes del
elemento seleccionado, todo el
camino hasta el último
descendiente.
El ejemplo siguiente devuelve
todos los <span> elementos que
son descendientes de <div> :

JQUERY 17
[Escriba aquí]

6.4.1.5 JQUERY AJAX

Nombre Definicion Comando Ejemplo
jQuery - AJAX = jQuery proporciona varios métodos
Introducci JavaScript para la funcionalidad de AJAX.
ón de AJAX asíncrono y Con los métodos de jQuery AJAX,
XML. puede solicitar texto, HTML, XML
En o JSON desde un servidor remoto
resumen, AJAX utilizando tanto HTTP GET y HTTP
se trata de la POST - Y usted puede cargar los
carga de datos datos externos directamente en los
en segundo elementos HTML seleccionados de su
plano y lo página web!
mostrará en la
página web,
sin necesidad
de recargar la
página entera.

jQuery - El jQuery $.get() Método $("button").click(function(){

AJAX get() jQuery get() y El $.get() método solicita datos al $.get("demo_test.asp", functio
and post() método servidor con un HTTP GET petición. n(data, status){
post() s se utilizan Sintaxis: alert("Data: " + data
para solicitar $.get(URL,callback); + "\nStatus: " + status);
datos al El parámetro URL requerida });
servidor con especifica la URL que desea });
un solicitar.
HTTP GET o POS jQuery $.post() Método
T petición. El $.post() método solicita datos $("button").click(function(){
GET - Pide a desde el servidor mediante un $.post("demo_test_post.asp",
los datos de HTTP POST petición. {
un recurso Sintaxis: name: "Donald Duck",
especificado $.post(URL,data,callback); city: "Duckburg"
POST - los El parámetro URL requerida },
datos adjunte especifica la URL que desea function(data, status){
a procesar a solicitar. alert("Data: " + data
un recurso El parámetro de datos opcional + "\nStatus: " + status);
especificado especifica algunos datos para enviar });
junto con la solicitud. });
El parámetro callback opcional es el
nombre de una función que se ejecuta
si la solicitud se realiza
correctamente.

JQUERY 18
[Escriba aquí]

6.5 OTRAS CARACTERISTICAS

6.5.1.1.1. JQUERY MOBILE

Básicamente, jQuery Mobile es un framework web optimizado para dispositivos

móviles con pantallas táctiles. Naturalmente, esta optimización significa que
puede trabajar con un gran número de dispositivos, desde tabletas hasta teléfonos
inteligentes.

Entonces, ¿Cuáles son las ventajas de jQuery Mobile?

 Es compatible con la mayoría de las plataformas móviles: iOS, BlackBerry,

Windows Mobile, Symbian y Android.
 Como está basado en jQuery (lógico), no tiene una gran curva de aprendizaje.
 Soporta temas de estilos
 Es sumamente ligero y rápido

7. DESARROLLO
</head>
<body>
<h1>Programando con jQuery</h1>
<p>1. Uso de hide/show</p>
<script type="text/javascript">
$(document).ready(function(){
$("#ev0").click(function(){
$("#id0").hide();
});

$("#ev1").click(function(){
$("#id0").show();
});
$("body").css("background-color","#082A68");
$("body").css("font-family","sans-serif");
$("body").css("color","#EDEFEE");
});
</script>
<div id="id0">Me ocultaré y me mostraré</div>
<button id="ev0">Ocultar</button>
<button id="ev1">Mostrar</button><br/>
<p>2. Uso de hide/show con parámetros</p>
<script type="text/javascript">
$(document).ready(function (){
$("#ev2").click(function(){
$("#id1").hide(1000);//"easing"
});
$("#ev3").click(function(){
$("#id1").show(1000);//"easing"
});
});
</script>
<div id="id1">Me ocultaré y mostraré</div>
<button id="ev2">Ocultar</button>
<button id="ev3">Mostrar</button><br/>
<p>3. Uso de toggle</p>
<script type="text/javascript">

JQUERY 19
[Escriba aquí]

$(document).ready(function (){
$("#ev4").click(function(){
$("#id2").toggle();
});
});
</script>
<div id="id2">Me ocultaré y mostraré</div>
<button id="ev4">Ocultar/Mostrar</button>
<br/>
<p>4. Uso de toggle con parámetros</p>
<script type="text/javascript">
$(document).ready(function (){
$("#ev5").click(function(){
$("#id3").toggle(1000);
});
});
</script>
<div id="id3">Me ocultaré y mostraré</div>
<button id="ev5">Ocultar/Mostrar</button>
<br/>

8. RESULTADOS

9. VENTAJAS Y DESVENTAJAS DE JQUERY

7.1. VENTAJAS
La ventaja principal de jQuery es que es mucho más fácil que sus competidores.
Usted puede agregar plugins fácilmente, traduciéndose esto en un ahorro
substancial de tiempo y esfuerzo. De hecho, una de las principales razones por la
cual Resig y su equipo crearon jQuery fue para ganar tiempo (en el mundo de
desarrollo web, tiempo importa mucho).
La licencia open source de jQuery permite que la librería siempre cuente con
soporte constante y rápido, publicándose actualizaciones de manera constante. La
comunidad jQuery es activa y sumamente trabajadora.

Otra ventaja de jQuery sobre sus competidores como Flash y puro CSS es su
excelente integración con AJAX.

JQUERY 20
[Escriba aquí]

En resumen:
 jQuery es flexible y rápido para el desarrollo web
 Viene con licencia MIT y es Open Source
 Tiene una excelente comunidad de soporte
 Tiene Plugins
 Bugs son resueltos rápidamente
 Excelente integración con AJAX

7.1. DESVENTAJAS

Una de las principales desventajas de jQuery es la gran cantidad de versiones

publicadas en el corto tiempo. No importa si usted está corriendo la última versión
de jQuery, usted tendrá que hostear la librería usted mismo (y actualizarla
constantemente), o descargar la librería desde Google (atractivo, pero puede traer
problemas de incompatibilidad con el código).
Además del problema de las versiones, otras desventajas que podemos mencionar:
 jQuery es fácil de instalar y aprender, inicialmente. Pero no es tan fácil
si lo comparamos con CSS
 Si jQuery es implementado inapropiadamente como un Framework, el entorno de
desarrollo se puede salir de control.

8. CONCLUSION

Se concluye que jQuery es una de las mejores librerías en el mundo JavaScript.

Manipulacion de DOM y AJAX son muchos mas fáciles de usar Y claramente, al final
del día, jQuery es como cualquier otra herramienta, que será tan buena como tan
bueno sea el programador

9. BIBLIOGRAFIA
http://www.w3bai.com/es/jquery/jquery_syntax.html
http://rogernatividad.com/metodos-mas-usados-en-jquery/
https://aprende-web.net/librerias/jquery/jquery_1.php

JQUERY 21