JQuery es una librería con poco peso muy efectiva para trabajar con el DOM. Esta librería es muy fácil de utilizar y más aun si conocer bien la sintaxis de los CSS.

Utilizalo es muy sencillo y más aun que existe una amplia variedad de Widgets para el JQuery. Puedes descargar la librería de JQuery aquí. Bien vemos cómo podemos utilizar esta librería y algunos ejemplos del JQuery.

Primero que nada invocamos al JQuery

1
2
3
4
5
6
7
8

<html>
<head>
<title>JQuery</title>
</head>
<body>
<script language="javascript" src="jquery.js"></script>
</body>
</html>

La sintaxis de JQuery es muy sencilla, ya que siempre es igual y no hay mucha variedad. JQuery se reconoce cuando empezamos con el signo “$” (dólar). Por ejemplo

1

$(elemento).evento(funcion-o-parametro);

Un ejemplo

1
2
3

$('img').mouseover(function(){
     //aquí escribimos algo...
});

Como decia desde un principio, podemos utilizar la sintaxis de los CSS para saber a qué elementos del DOM estamos invocando. En este caso es para podas las etiquetas “img”.
Podemos utilizar otras sintaxis como

1
2
3
4
5
6
7

$('div.logo').click(function(){ //Es para todas las etiquetas "div" donde su atributo "class" sea igual a "logo"
     //aquí escribimos algo...
});
 
$('div.formulario input').focus(function(){ //Es para todas las etiquetas "input" dentro de las etiquetas "div" donde su atributo "class" sea igual a "formulario"
     //aquí escribimos algo...
});

Otras cosas que sorprendentes que vienen con la librería JQuery son los efectos muy fáciles de utilizar.

Cuadro de efectos predeterminados del Jquery

Después que un efecto haya terminado podemos llamar a una función, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="texto" style="display: none; width: 320px; position: relative;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus non erat. Sed magna. Sed congue sollicitudin dolor.
In luctus ligula ac neque. Sed nibh velit, euismod at, posuere a, feugiat eu, est.
Curabitur et eros. Sed vitae libero id ipsum accumsan congue.
Duis non risus vitae sem consequat iaculis. Cras volutpat justo vitae eros.
Mauris porttitor nulla eget erat. Cras condimentum volutpat ante.
Mauris fermentum metus id felis. Quisque at neque.
Vestibulum nulla magna, pulvinar sed, porttitor ut, viverra eget, libero.
Donec pretium. Quisque aliquam magna nec lectus rhoncus consequat. Suspendisse euismod.</div>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
function DespuesSlideDown(){
	$('div.texto').animate({width: 500, top: 80, left: 200});
}
function DespuesSlideUp(){
	$('div.texto').slideDown('slow', DespuesSlideDown);
}
function DespuesFadeIn(){
	$('div.texto').slideUp(2000, function(){
		setTimeout(DespuesSlideUp, 2000);
	});
}
$(document).ready(function(){
	$('div.texto').fadeIn(3000, DespuesFadeIn);
});
</script>

Descargar ejemplo “Empezando con Jquery”

Comparte y disfruta:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • Twitter
  • Yahoo! Bookmarks