¿Qué es JQuery?

Jquery (http://jquery.com/) es una librería de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción mediante AJAX con las páginas web. Estas son las funcionalidades completas:

  • Selección de elementos DOM.
  • Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
  • Eventos.
  • Manipulación de la hoja de estilos CSS.
  • Efectos y animaciones.
  • Animaciones personalizadas.
  • AJAX.
  • Soporta extensiones.
  • Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones como trim() (elimina los espacios en blanco del principio y final de una cadena de caracteres), etc.
  • Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+

Descarga e instalación

Cuando hablamos de JQuery hay que separar dos conceptos que al principio se suelen confundir:

  • JQuery: Es la librería base y consiste en un único archivo javascript (.js)

Existen  dos opciones en la descarga:

  • Production: Fichero para producción (ocupa 31 KB)
  • Development: Fichero para desarrollo (Ocupa 229 KB)

Una vez elegida y descargada la opción que se desea la instalación es muy sencilla. Simplemente hay que añadir el .js a la solución:

Para tener un código ordenado es recomendable crear una carpeta js

A continuación simplemente hay que hacer referencia a dicho .js en la página/s en la/s que se quiere usar JQuery:

<head runat=»server»>

<script src=»js/JQuery-1.7.js» type=»text/javascript»></script>

<title>Página Principal</title>

</head>

JQuery ya estaría listo para usarse. Muy fácil.

  • JQuery-UI (http://jqueryui.com/): Es un conjunto de herramientas de interfaz de usuario (User Interface). Es decir, es un javaScript, con sus CSS e imágenes asociados, que permite crear controles de interfaz de usuario (ventanas modales, calendarios, pestañas, etc.)

En la página se pueden probar todos los controles existentes (http://jqueryui.com/demos/) así como bajar aquellos que deseemos (http://jqueryui.com/download). En dicha página de descarga se podrá elegir también el aspecto (tema) de los controles:

También existe la posibilidad de crear un tema totalmente al gusto del usuario. Para ello está la herramienta ThemeRoller (http://jqueryui.com/themeroller/) donde se podrá customizar todos los aspectos que se deseen.

Este será estado del proyecto después añadir lo necesario para utilizar JQuery-UI:

Se añaden por tanto la carpeta css con todo el contenido del descargable así como el js de JQuery-UI (jquery-ui-1.8.16.custom.min.js).

Para su uso el funcionamiento es el mismo que anteriormente. Hay que añadir las referencias en las páginas deseadas:

<script src=»js/jquery-ui-1.8.16.custom.min.js» type=»text/javascript»>

</script>

<link href=»css/eggplant/jquery-ui-1.8.16.custom.css» rel=»stylesheet» type=»text/css» />

Existe una alternativa a la descarga de JQuery y de JQuery-UI. Desde el Google CDN (Content Delivery Network) se puede hacer referencia a dichas librerías evitando así tener que descargar los ficheros. Simplemente hay que cambiar el src y apuntar a la dirección de google (http://code.google.com/intl/es/apis/libraries/devguide.html):

<script src=»https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js» type=»text/javascript»></script>

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js» type=»text/javascript»></script>