lunes 26 de julio de 2010

jQuery

Voy a comentar un poco lo que es y para qué sirve jQuery. jQuery es una librería Javascript, es decir, un archivo de código que, al insertarse en una página web, permite al desarrollador programar en Javascript de manera mucho más fácil, prácticamente como si fuera un lenguaje nuevo. La diferencia es que la sintaxis de jQuery es realmente sencilla, y es capaz de realizar complejas funciones con muy poco código. Para implementar jQuery en tu página web, sólo tienes que añadir la siguiente línea entre las etiquetas <head> y </head>:
<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

De esta manera, cualquier script ubicado debajo de esa línea utilizará las funciones de jQuery. Todos los scripts que usan esta librería tienen esta estructura básica:
$(document).ready(function() {
    //aquí todos los scripts y funciones
});

Normalmente, la estructura del código en jQuery se hace de esta manera:
$(objeto).función(propiedades);

//ejemplo:
$('div').css('background', 'red');

Y la estructura para manejar eventos (clic del ratón, cambio en el contenido, etc.) es la siguiente:
$(objeto).evento(function() {
    //código a ejecutar cuando sucede el evento
});

//ejemplo:
$('button').click(function() {
    $(this).fadeOut(500);
});

La sintaxis que se utiliza para determinar el/los objeto(s) al que se aplicarán las distintas funciones es la misma que en CSS. Por ejemplo, con $('#logo') seleccionaríamos el elemento con identificador logo, y con $('table.lateral tr td'), todas las celdillas de las tablas con clase lateral.
Además, las funciones aplicadas a un elemento se pueden escribir de forma consecutiva (una detrás de otra), como en el siguiente ejemplo:
$('div.aparecer').css('background', '#000000')
  .fadeIn()
  .animate({'marginTop': '10px'}, 500);

Por último, jQuery también puede ser ampliada mediante una amplia selección de plugins, que podrás encontrar en http://plugins.jquery.com/.
Puedes encontrar mucha más información sobre el uso de jQuery en http://docs.jquery.com/.

0 comentarios:

Publicar un comentario en la entrada