Jquery : Nuestra Primera Página Con jQuery

Ahora que hemos cubierto la gama de funciones disponibles para nosotros con jQuery, podemos examinar cómo poner la biblioteca en acción. Para empezar, necesitamos una copia de jQuery.

Descargando jQuery

No se requiere instalación. Para usar jQuery, solo necesitamos una copia pública del archivo, si esa copia está en un sitio externo o el nuestro. Como JavaScript es un lenguaje interpretado, no hay ninguna compilación o fase de construcción para la cual preocuparse. Siempre que necesitamos una página para tener jQuery disponible, simplemente nos referiremos a la ubicación del archivo desde un elemento <script> en el documento HTML.
El sitio oficial de jQuery (http://jquery.com/) siempre tiene la versión más actualizada y estable de la biblioteca, que se puede descargar directamente desde la página principal del sitio. Varias versiones de jQuery pueden estar disponibles en cualquier momento; la versión más apropiada para nosotros como desarrolladores de sitios será la última versión sin comprimir de la biblioteca. Esta puede ser reemplazada por una versión comprimida en entornos de producción.
Como la popularidad de jQuery ha crecido, las empresas han vuelto al archivo libremente disponible a través de sus redes de distribución de contenido (CDN). 
Lo más notable es que Google (http://code.google.com/apis/ajaxlibs/documentation/) y Microsoft (http://www.asp.net/ajax/cdn) ofrecen el archivo en poderosos servidores de baja latencia distribuidos en todo el mundo para una descarga rápida independientemente de la ubicación del usuario.
Mientras que una copia CDNhosted de jQuery tiene ventajas de velocidad debido a la distribución del servidor y el almacenamiento en caché, el uso de una copia local  puede ser conveniente durante el desarrollo. A lo largo de este libro usaremos una copia del archivo almacenado en nuestro propio sistema, que nos permitirá ejecutar nuestro código, ya sea que esté conectado a Internet o no. 

Configurando jQuery En Un Documento HTML

Hay tres piezas para la mayoría de los ejemplos de uso de jQuery: el documento HTML, archivos de estilo CSS y archivos JavaScript para actuar en él. Para nuestro primer ejemplo, utilizaremos una página con un extracto de uno de nuestro artículos que tiene varias clases aplicadas a partes de la misma. Esta página incluye una referencia a la última versión de la librería jQuery, que hemos descargado, renombrada jquery.js, y esta ubicada en nuestro directorio de proyectos local, de la siguiente manera:

ara mantener la amplia gama de características descritas anteriormente mientras se mantiene relativamente compacto, jQuery emplea varias estrategias:

• Aprovechando el conocimiento de CSS: basando el mecanismo para localizar elementos de página en los selectores CSS, jQuery hereda una forma concisa y legible de expresar la estructura de un documento. La biblioteca jQuery se convierte en un punto de entrada
  para los diseñadores que quieren añadir comportamientos a sus páginas, ya que un requisito previo para hacer el desarrollo web profesional es tener conocimiento de la sintaxis CSS.

• Con las Extensiones de soporte: Para evitar el deslizamiento de las funciones, jQuery relega los usos de specialcase a los complementos. El método para crear nuevos complementos es simple y bien documentado, lo que ha impulsado al desarrollo de una amplia variedad de módulos inventivos y útiles. La mayoría de las características de la descarga básica de jQuery se realizan internamente a través de la arquitectura del complemento, y se pueden quitar si se desea,
  produciendo una biblioteca aún más enfocada a lo que se quiere si se desea.

• Abstracción de las peculiaridades del navegador: Una desafortunada realidad en el desarrollo web es que cada navegador tiene su propio conjunto de desviaciones de estándares publicados. Una porción significativa de cualquier aplicación web puede ser relegada para manejar características de forma diferente en cada plataforma. Mientras que el panorama del navegador  en constante evolución hace que una base de código completamente neutral para el navegador sea imposible para algunas características avanzadas, jQuery agrega una capa de abstracción que normaliza las tareas comunes, reduciendo el tamaño del código mientras que lo simplifica enormemente.

• Siempre trabaja con sets: Cuando instruimos a jQuery, a "Buscar todos los elementos con la clase plegable y ocultarlos", no hay necesidad de recorrer cada elemento devuelto. En su lugar, métodos como .hide () están diseñados para trabajar automáticamente en conjuntos de objetos en lugar de los individuales. Esta técnica, llamada iteración implícita, significa que muchas construcciones de bucle se vuelven innecesarias, reduciendo considerablemente el código.

• Permitir múltiples acciones en una línea: Para evitar el uso excesivo de variables temporales o la repetición inútil, jQuery emplea un patrón de programación llamado encadenamiento
  para la mayoría de sus métodos. Esto significa que el resultado de la mayoría de las operaciones en un objeto es el propio objeto, listo para la siguiente acción que se le aplicará.

Estas estrategias han mantenido el paquete jQuery bastante leve (aproximadamente 30 KB comprimido), mientras que al mismo tiempo proporcionando técnicas para mantener nuestro código personalizado utilizando una biblioteca compacta. 

La elegancia de la biblioteca se produce en parte por el diseño, y en parte debido al proceso evolutivo impulsado por la vibrante comunidad que ha surgido alrededor del proyecto. Los usuarios de jQuery se reúnen para discutir no sólo del desarrollo de complementos, sino también de las mejoras de la biblioteca central. Los usuarios y desarrolladores también ayudan a mejorar continuamente la documentación oficial del proyecto, que se puede encontrar en Proyecto jQuery

A pesar de todos los esfuerzos necesarios para diseñar un sistema tan flexible y robusto, el producto final es gratuito para todos. Este proyecto de código abierto está licenciado bajo licencia MIT (que permite el uso gratuito de jQuery en cualquier sitio y facilita su uso dentro de cualquier software de propiedad) y la GNU Public License (apropiada para su inclusión en otros proyectos de código abierto con licencia GNU).

Siguiente Capítulo: Nuestra Primera Página Web Con jQuery

Jquery : ¿Por Qué jQuery Funciona Tan Bien?

Con el resurgimiento del interés en HTML dinámico llega una proliferación de Frameworks de JavaScript. Algunos son especializados, centrándose en sólo una o dos de las tareas anteriores. Otros intentan catalogar todos los comportamientos y animaciones posibles, y atienden todos estos pre-empaquetados. 
Para mantener la amplia gama de características descritas anteriormente mientras se mantiene relativamente compacto, jQuery emplea varias estrategias:

• Aprovechando el conocimiento de CSS: basando el mecanismo para localizar elementos de página en los selectores CSS, jQuery hereda una forma concisa y legible de expresar la estructura de un documento. La biblioteca jQuery se convierte en un punto de entrada
  para los diseñadores que quieren añadir comportamientos a sus páginas, ya que un requisito previo para hacer el desarrollo web profesional es tener conocimiento de la sintaxis CSS.

• Con las Extensiones de soporte: Para evitar el deslizamiento de las funciones, jQuery relega los usos de specialcase a los complementos. El método para crear nuevos complementos es simple y bien documentado, lo que ha impulsado al desarrollo de una amplia variedad de módulos inventivos y útiles. La mayoría de las características de la descarga básica de jQuery se realizan internamente a través de la arquitectura del complemento, y se pueden quitar si se desea,
  produciendo una biblioteca aún más enfocada a lo que se quiere si se desea.

• Abstracción de las peculiaridades del navegador: Una desafortunada realidad en el desarrollo web es que cada navegador tiene su propio conjunto de desviaciones de estándares publicados. Una porción significativa de cualquier aplicación web puede ser relegada para manejar características de forma diferente en cada plataforma. Mientras que el panorama del navegador  en constante evolución hace que una base de código completamente neutral para el navegador sea imposible para algunas características avanzadas, jQuery agrega una capa de abstracción que normaliza las tareas comunes, reduciendo el tamaño del código mientras que lo simplifica enormemente.

• Siempre trabaja con sets: Cuando instruimos a jQuery, a "Buscar todos los elementos con la clase plegable y ocultarlos", no hay necesidad de recorrer cada elemento devuelto. En su lugar, métodos como .hide () están diseñados para trabajar automáticamente en conjuntos de objetos en lugar de los individuales. Esta técnica, llamada iteración implícita, significa que muchas construcciones de bucle se vuelven innecesarias, reduciendo considerablemente el código.

• Permitir múltiples acciones en una línea: Para evitar el uso excesivo de variables temporales o la repetición inútil, jQuery emplea un patrón de programación llamado encadenamiento
  para la mayoría de sus métodos. Esto significa que el resultado de la mayoría de las operaciones en un objeto es el propio objeto, listo para la siguiente acción que se le aplicará.

Estas estrategias han mantenido el paquete jQuery bastante leve (aproximadamente 30 KB comprimido), mientras que al mismo tiempo proporcionando técnicas para mantener nuestro código personalizado utilizando una biblioteca compacta. 

La elegancia de la biblioteca se produce en parte por el diseño, y en parte debido al proceso evolutivo impulsado por la vibrante comunidad que ha surgido alrededor del proyecto. Los usuarios de jQuery se reúnen para discutir no sólo del desarrollo de complementos, sino también de las mejoras de la biblioteca central. Los usuarios y desarrolladores también ayudan a mejorar continuamente la documentación oficial del proyecto, que se puede encontrar en Proyecto jQuery

A pesar de todos los esfuerzos necesarios para diseñar un sistema tan flexible y robusto, el producto final es gratuito para todos. Este proyecto de código abierto está licenciado bajo licencia MIT (que permite el uso gratuito de jQuery en cualquier sitio y facilita su uso dentro de cualquier software de propiedad) y la GNU Public License (apropiada para su inclusión en otros proyectos de código abierto con licencia GNU).

Siguiente Capítulo: Nuestra Primera Página Web Con jQuery

Jquery : ¿Qué hace jQuery?

La biblioteca jQuery proporciona una capa de abstracción de propósito general para scripts web comunes y, por lo tanto, es útil en casi todas las situaciones de secuencias de comandos. Su naturaleza extensible significa que nunca podríamos cubrir todos los usos y funciones posibles en un solo libro, ya que los complementos se desarrollan constantemente para agregar nuevas habilidades. Sin embargo, las características principales nos ayudan a realizar las siguientes tareas:

• Acceder a elementos en un documento: sin una biblioteca JavaScript, los desarrolladores web a menudo necesitan escribir muchas líneas de código para recorrer el árbol Document Object Model (DOM) y localizar porciones específicas de la estructura de un documento HTML.
  Con jQuery, los desarrolladores tienen un mecanismo selector robusto y eficiente a su disposición, por lo que es fácil recuperar la pieza exacta del documento que necesita ser inspeccionado o manipulado.

$('div.content').find('p');

• Modifica la apariencia de una página web: CSS ofrece un poderoso método para influir en la forma en que se representa un documento, pero se queda corto cuando los navegadores web no son compatibles con los mismos estándares. Con jQuery, los desarrolladores pueden salvar esta brecha, confiando en el mismo soportede estándares en todos los navegadores. Además, jQuery puede cambiar las clases o las propiedades de estilo individuales aplicadas a una parte del documentoincluso después de que la página se haya procesado.

$('ul > li:first').addClass('active');

• Alterar el contenido de un documento: No limitado a meros cambios cosméticos, jQuery puede modificar el contenido de un documento con pocas tecleadas. El texto puede ser cambiado, las imágenes pueden ser insertadas o intercambiadas, las listas pueden ser reordenadas, o toda la estructura del HTML puede ser reescrita y extendida, todo con una sola interfaz de programación de aplicaciones (API) fácil de usar.

$ ('#container') .append('<a herf="more.html">more</a>');

• Responder a la interacción de un usuario: Incluso los comportamientos más elaborados y poderosos no son útiles si no podemos controlar cuándo ellos ocurren. La biblioteca jQuery ofrece una manera elegante de interceptar una gran variedad de eventos(por ejemplo cuando un usuario hace clic en un enlace) sin la necesidad de enturbiar el código HTML en sí con los controladores de eventos. Al mismo tiempo, su API de gestión de eventos elimina las inconsistencias del navegador que a menudo afectan a los desarrolladores web.

$('button.show-details').click(function(){
   $('div.details').show();
});

• Animar los cambios que se están realizando en un documento: Para implementar eficazmente estos comportamientos interactivos, el diseñador también debe proporcionar comentarios visuales al usuario. La biblioteca de jQuery facilita esto proporcionando una variedad de efectos como fades y wipes, así como un kit de herramientas para crear nuevas pantallas gráficas.

$('div.details').slideDown();

• Recuperar información de un servidor sin actualizar una página: Este patrón de código se ha conocido como Ajax, que originalmente representaba JavaScript asíncrono y XML, pero desde entonces ha llegado a representar un conjunto mucho mayor de tecnologías para la comunicación entre el cliente y el servidor. La biblioteca jQuery elimina la complejidad específica del navegador de este proceso responsivo, lo que permite a los desarrolladores centrarse en la funcionalidad del servidor.

$('div.details').load('more.html #content');

• Simplificar las tareas comunes de JavaScript: Además de todas las características específicas de documentos de jQuery, la biblioteca proporciona mejoras a las construcciones básicas de JavaScript, como la iteración y la manipulación de arrays.

$.each(obj, function(key, value) {
   total += value;
});

Siguiente Capítulo: ¿Por qué jQuery funciona tan bien?

Jquery : Conociendo Mejor A JQuery

Hoy en día la World Wide Web (www) es un entorno dinámico, y sus usuarios han establecido una barrera alta para el estilo y la función de los sitios. Para crear sitios interesantes e interactivos, los desarrolladores se han visto obligados a recurrir a bibliotecas de JavaScript como jQuery para automatizar algunas tareas comunes y simplificar lo que parece ser más complicado. Una de las razones de la popularidad de jQuery es su capacidad para ayudar en una amplia gama de tareas. 
JQuery realiza tantas tareas diferentes que puede parecer difícil saber por donde empezar. Sin embargo, existe una coherencia y simetría en el diseño de esta biblioteca; muchos de sus conceptos son comprometidos con la estructura de HTML y las hojas de estilo en cascada (CSS).
El diseño de la biblioteca se presta para que haya un comienzo rápido de los diseñadores con poca experiencia en programación, a veces muchos de ellos tienen más experiencia con estas tecnologías que con JavaScript. De hecho, en este capítulo de apertura, vamos a escribir un programa de jQuery en funcionamiento en sólo tres líneas de código.
Por otro lado, los programadores más experimentados también serán ayudados por esta consistencia conceptual, como veremos en los capítulos posteriores más avanzados.
Así que echemos un vistazo a lo que jQuery puede hacer por nosotros.

Siguiente Capítulo: Qué hace jQuery?