TEMA DE INVESTIGACION: JQUERY

FUNDAMENTOS DISEO WEB

PROFESORA:
Quispe Rodrguez, Ana Milagros

INTEGRANTES:
Vera Estrada, Enma Cecilia
SECCIN:
19B 02-E-1

2017-I
1
 INTRODUCCIN

En esta monografa explicare JQuery, que es, sus funciones, beneficios y

mucho ms antes de empezar se podra decir que JQuery es una librera
JavaScript, que funciona en mltiples navegadores, y que es compatible
con CSS. Su objetivo principal es hacer la programacin scripting mucho
ms fcil y rpida del lado del cliente y el simplificar mucho la creacin de
pginas web, sobre todo en interfaces web que se comportan de modo
muy similar a las aplicaciones de escritorio. Con JQuery se pueden
producir pginas dinmicas as como animaciones parecidas a Flash en
relativamente corto tiempo.

2
 NDICE

INTRODUCCIN 2

NDICE ..... 3

I. QUE ES JQUERY? .... 4

II. CARACTERISTICAS ... 4
2.1 Constructor JQuery .. 4
2.2 $ es una alias de JQuery 4
2.3 Trabaja por grupos 5
2.4 Diseado para realizar consultas a travs del DOM 5
2.5 Es un sistema modular 5
2.5.1 JQuery plugins .. 5
2.5.2 JQuery UI .. 8
2.5.3 JQuery Mobile .. 9

III. VENTAJAS Y DESVENTAJAS DE JQUERY.. 11

3.1 Ventaja .. 11
3.2 Desventajas .. 11

IV. COMO FUNCIONA JQUERY? .. 12

4.1 Adicin y eliminacin de una clase HTML.. 12
4.2 Efectos especiales . 12
4.3 Devolucin de llamada con argumentos 12

V. LA LIBRERA DE JQUERY 13
5.1 Evolucin de JQuery.. 13
5.2 Cambios entre 1.7 y 1.8 ........... 13
5.3 Cambios en la futura versin 2.0 . 13
5.4 Agregando JQuery 13

VI. EJEMPLOS DE JQUERY .. 14

6.1 Fly-In animacin de texto utilizando CSS3 y jQuery . 14
6.2 Sin nombre de men utilizando CSS3 y jQuery .. 16

VII. CONCLUSIONES ... 19

VIII. BIBLIOGRAFIA .... 19

3
 JQUERY

I. QUE ES JQUERY?

Para empezar, podramos decir que JQuery es un framework JavaScript, as que

se empezara explicando que es un framework es un producto que sirve como
base para la programacin avanzada de aplicaciones, que aporta una serie
de funciones o cdigos para realizar tareas habituales. Los programadores
utilizan los frameworks para no tener que desarrollar ellos mismos las tareas ms
bsicas, puesto que en el propio framework ya hay implementaciones que
estn probadas, funcionan y no se necesitan volver a programar. Por ejemplo,
en el caso que nos ocupa, JQuery es un framework para el lenguaje JavaScript,
luego ser un producto que nos simplificar la vida para programar en este
lenguaje. JQuery es donde ms puede ayudar, puesto que implementa una
serie de clases que nos permiten programar sin preocuparnos del navegador
con el que est visitando el usuario, ya que funcionan de exacta forma en todas
las plataformas ms habituales. Cuando programemos JavaScript con JQuery
tendremos a nuestra disposicin una interfaz para programacin que nos
permitir hacer cosas con el navegador que estemos seguros que funcionarn
para todos nuestros visitantes, con JQuery tambin las obtenemos de manera
gratuita, ya que el framework tiene licencia para uso en cualquier tipo de
plataforma, personal o comercial. Para ello simplemente tendremos que incluir
en nuestras pginas un script JavaScript que contiene el cdigo de JQuery, que
podemos descargar de la propia pgina web del producto y comenzar a utilizar
el framework.

II. CARACTERISTICAS

2.1 Constructor JQuery

El constructor es una funcin sobrecargada que:

-Si recibe un string est la toma como una Query (consulta) y
devuelve un conjunto de elementos del DOM correspondientes a la
consulta.
-En caso de no recibir nada revuelve un conjunto vaco.

2.2 $ es una alias de JQuery

Es ms comn ver que en los ejemplos hacen referencia a la llamada

de la funcin $ esta es un alias (un sobrenombre) de JQuery. Los
ejemplos anteriores usando el alias seria:
//construccion con consulta valida o invlida
$('h2').css ('color', 'red');
$('esto no existe').css('color', 'red');

4
 //construccion sin consulta
$.css ('color', 'red');
Esto no siempre es vlido, cuando se utilizan otras libreras que usan la
funcin $, para esto se emplea el noconflict de JQuery.

2.3 Trabaja por grupos

Los mtodos de JQuery que realizan consultas trabajan con iteracin

implcita, por ejemplo, la consulta.
$('h2')
Nos devuelve el conjunto de los ttulos nivel 2 (h2), ahora si por ejemplo
quisiramos cambiarle el color a un gris oscuro (#333), esto lo
podramos hacer de la siguiente manera.
$.each($('h2'), function() {
$(this).css("color", "#333"); });
En este caso estamos ocupando el mtodo each, en el cual para
cada ttulo en la seleccin se ejecuta una funcin la cual le cambia
el color.

2.4 Diseado para realizar consultas a travs del DOM

Quizs la principal caracterstica de JQuery es que est diseado

para realizar consultas a travs del DOM, como ya se mencion antes,
JQuery nos permite realizar consultas CSS, xPath y trasversales.
$('h2 + p').css('color', '#946900');
$('h2 + p').css('font-style', 'italic');
Con esto indicamos que todo prrafo (p) inmediatamente seguido (+)
de un ttulo nivel 2 (h2), va a tomar el color de la letra a caf y el estilo
de la fuente ser del tipo itlica.

2.5 Es un sistema modular

2.5.1 JQuery plugins

Un plugin de JQuery es simplemente un nuevo mtodo que

utilizamos para extender el objeto prototipo de JQuery. Al
ampliar el objeto prototipo habilita todos los objetos JQuery
para heredar cualquiera de los mtodos que se agregan.

La idea de un plugin es hacer algo con una coleccin de

elementos. Se podra considerar cada mtodo que viene con
el ncleo de JQuery un plugin, como .fadeOut()o .addClass().

Cmo funciona JQuery 101: Mtodos del objeto JQuery

5
Antes de escribir propios plugins, primero hay que entender un
poco acerca de cmo funciona JQuery.

Bsico Plugin Autora

Para crear un plugin que hace que el texto dentro de un

conjunto de elementos recuperados verdes. Todo lo que
tenemos que hacer es aadir una funcin
llamada greenifya $.fny estar disponible al igual que
cualquier otro mtodo objeto JQuery.

Encadenamiento

Una de las caractersticas de jQuery es encadenamiento,

cuando se vincula cinco o seis acciones en un selector. Esto se
logra haciendo que todos los mtodos de objeto jQuery
devuelven el objeto original jQuery de nuevo .width()llamados
sin parmetros devuelve el ancho del elemento seleccionado.

Proteccin de la adicin de $ Alias y Alcance

La $variable es muy popular entre las bibliotecas de JavaScript,

Sin embargo, para la jQueryfuncin para trabajar bien con
otros plugins, y seguir utilizando el jQuery $alias, tenemos que
poner todo nuestro cdigo dentro de una expresin de funcin
Inmediatamente Se invoca , y luego pasar a la funcin jQuery,
y el nombre del parmetro $.

6
Minimizacin Plugin Huella

Es una buena prctica al escribir extensiones para poder slo

hasta dentro de una ranura $.fn. Esto reduce la posibilidad de
que se anular su plugin, y la posibilidad de que su plugin
anular otros plugins.

Utilizando eleach () Mtodo

Contendr referencias a cualquier nmero de elementos DOM,

y por eso los objetos jQuery se refieren a menudo como
colecciones. Si desea hacer cualquier manipulacin con
elementos especficos, entonces es necesario
utilizar .each()para recorrer los elementos.

7
 Aceptando Opciones

A medida que los plugins se vuelven ms y ms complejo, es

una buena idea hacer un plugin personalizable mediante la
aceptacin de opciones. La forma ms sencilla de hacerlo,
sobre todo si hay un montn de opciones, es con un objeto
literal. Vamos a cambiar nuestro plugin greenify a aceptar
algunas de las opciones.

2.5.2 JQuery UI

Es un conjunto de interacciones curada de interfaz de usuario,

efectos, widgets y temas construidos en la parte superior de la
biblioteca de JavaScript JQuery. Ya sea que est construyendo
aplicaciones web altamente interactivas o slo tiene que
aadir un selector de fecha para un control de formulario,
jQuery UI es la eleccin perfecta.

JQuery UI contiene muchos widgets que mantener el estado y

por lo tanto tienen un patrn de uso ligeramente diferente que
los plugins jQuery tpicos. Todos los widgets de jQuery UI utilizan
los mismos patrones.

Inicializacin

8
 Mtodos

Opcin:

Deshabilitar:

Permitir:

Destruir:

Widget:

Eventos

Todos los widgets tienen eventos asociados a sus distintos

comportamientos para que le notifique cuando el estado est
cambiando. Para la mayora de los widgets, cuando se
desencadenan los acontecimientos, los nombres tienen el
prefijo del nombre del widget.

2.5.3 JQuery Mobile

JQuery Mobile es un framework web optimizado para

dispositivos mviles con pantallas tctiles. Es decir esta
optimizacin significa que puede trabajar con un gran nmero
de dispositivos, desde tabletas hasta telfonos inteligentes.

9
Ventajas de JQuery Mobile

Es compatible con la mayora de las plataformas mviles

como iOS, BlackBerry, Windows Mobile, Symbian y
Android.
Como est basado en JQuery, no tiene una gran curva
de aprendizaje
Soporta temas de estilos
Es sumamente ligero y rpido

Primeros pasos con jQuery Mobile

JQuery Mobile proporciona un conjunto de widgets de interfaz

de usuario tctil de usar y un sistema de navegacin con motor
Ajax para apoyar las transiciones de pgina animados.

Crear una plantilla bsica Pgina

En el <head>de esta plantilla, una meta viewportetiqueta

establece el ancho de la pantalla a la anchura de pxeles del
dispositivo. Las referencias a jQuery, jQuery Mobile, y la hoja de
estilo tema de mvil desde el CDN se suman todos los estilos y
scripts. JQuery Mobile 1.4 funciona con las versiones de jQuery
ncleo 1.8 y posteriores.

En el <body>, un div con una data-rolede pagees la envoltura

usada para delinear una pgina. Una barra de encabezado
(data-role="header"), una regin de contenido (role="main"
class="ui-content") y una barra inferior (data-role="footer") se
aaden en el interior para crear una pgina bsica (los tres son
opcionales). Estos data-atributos son los atributos de HTML5
utiliza a lo largo de jQuery Mobile para transformar marcado
bsica en un widget de mejorada y con estilo.

10
III. VENTAJAS Y DESVENTAJAS DE JQUERY

3.1 Ventajas

La ventaja principal de JQuery es que es mucho ms fcil que sus

competidores. Usted puede agregar plugins fcilmente,
traducindose esto en un ahorro substancial de tiempo y esfuerzo.

La licencia open source de JQuery permite que la librera siempre

cuente con soporte constante y rpido, publicndose
actualizaciones de manera constante.

Alta compatibilidad entre Navegadores, usando JQuery podemos

desarrollar un cdigo que no tenga que pelearse con una
implementacin particular de un navegador, por ejemplo, en el
trabajo con Ajax.

Una de las mejores opciones en el mercado; JQuery no es el nico

framework que existe en el mercado. Existen varias soluciones
similares que tambin funcionan muy bien, pero JQuery es un
producto con una aceptacin por parte de los programadores
muy buena.

Encadenamiento de Mtodos, permite en una sola lnea de

cdigo hacer mucho ms de lo que podramos hacer usando
solamente las caractersticas propias del JavaScript.

3.2 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 versin de JQuery,
usted tendr que descargar la librera desde Google.

JQuery es fcil de instalar y aprender, inicialmente. Pero no es

tan fcil si lo comparamos con CSS.
Si JQuery es implementado inapropiadamente como un
Framework, el entorno de desarrollo se puede salir de control.

11
IV. COMO FUNCIONA JQUERY?

4.1 Adicin y eliminacin de una clase HTML

Una funcin comn es la adicin o eliminacin de una clase.En primer

lugar, aadir un poco de informacin de estilo en el <head>del
documento; a continuacin se aade el .addClass () llamada a la
secuencia de comandos; todos los <a>elementos estn en negrita y as
mismo para eliminar una clase existente, utilice .removeClass () :

4.2 Efectos especiales

JQuery tambin proporciona algunos buenos efectos para ayudarle
a hacer sus sitios web se destacan.

4.3 Devolucin de llamada con argumentos

La ejecucin de las devoluciones de llamada con argumentos puede ser
complicado.

Incorrecto

La razn de esto no es que el cdigo se ejecuta myCallBack( param1,

param2 )inmediatamente y luego pasa myCallBack()'s valor de
retorno como el segundo parmetro a $.get(). En realidad queremos
pasar a la funcin myCallBack(), no myCallBack( param1, param2 )el
valor de retorno 's (que puede o no puede ser una funcin).

12
 La derecha

Aplazar la ejecucin myCallBack()con sus parmetros, puede utilizar una

funcin annima como un contenedor. Cuando $.get () acabe de
obtener la pgina myhtmlpage.html, se ejecuta la funcin annima, que
ejecuta myCallBack( param1, param2 ).

V. LA LIBRERA DE JQUERY
Biblioteca de JavaScript, fue creada por John Resig, permite simplificar
la manera de interactuar con los documentos HTML, manipular el rbol
DOM, manejo de eventos, desarrollar animaciones y agregar interaccin
con la tcnica AJAX en pginas web.

5.1 Evolucin de JQuery

JQuery es una librera en constante cambio, es recomendable usar la
librera estable ms reciente, ya que en cada nueva versin se integran
caractersticas nuevas al tiempo que se mejoran las anteriores, la imagen
de la derecha es una comparativa en el rendimiento de JQuery 1.6.4 vs
JQuery 1.7 en distintos navegadores.

5.2 Cambios entre 1.7 y 1.8

Cuando JQuery migro a la versin 1.8 se hicieron algunos cambios
importantes, por ejemplo la versin 1.8 es ms pequea que 1.7, las
funciones css() y animate() libres de prefijos(-webkit, -moz, - ms, -o), se
repararon 160 errores, mayor flexibilidad en animaciones y se mejoraron
las consultas.

5.3 Cambios en la futura versin 2.0

En estos momentos la librera JQuery est evolucionando a la versin 2.0.

5.4 Agregando JQuery

JQuery no necesita instalacin, simplemente tenemos que incluir la

librera base en nuestro cdigo. Y tenemos dos maneras de hacerlo

Obtenerla desde la misma pgina de JQuery

<script type=text/javascript src=jquery.js></script>

13
 Enlazar un fichero desde los servidores de google, por
ejemplo

<script

src=http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/j
query.min.js type=text/javascript>

</script>

VI. EJEMPLOS DE JQUERY

6.1 Fly-In animacin de texto utilizando CSS3 y jQuery

14
15
6.2 Sin nombre de men utilizando CSS3 y jQuery

16
17
18
VII. CONCLUSIONES

En conclusin el futuro de jQuery se ve sumamente prometedor. Definitivamente

es una de las mejores libreras en JavaScript ya que destaca en los cdigos por su
dinamismo.

IX. BIBLIOGRAFA

http://codingflag.in/sections/css/unnamed_menu.html
https://jquery.com/

19