Categoría: Manual de jQuery

Manual de jQuery. Manual de la librería JavaScript jQuery.

¿Por qué debemos usar frameworks de Javascript?

En este artículo explicamos que es un framework de Javascript, como los conocidos jQuery, Mootools o Prototype. Para que sirven estos frameworks y alguna indicación para elegir uno de ellos para nuestros proyectos web.

Introducción a jQuery Mobile

En este artículo damos una visión general del framework jQuery Mobile, explicando su función, uso y requerimientos.

Manejo de listas con jQuery Mobile

Las listas son elementos muy importantes para lograr una correcta navegación en un sitio móvil, en este artículo explicamos como utilizarlas y adaptarlas con jQuery Mobile

Crear cuadros de diálogo con jQuery Mobile

Los diálogos nos elementos que nos permiten desplegar información complementaria así como ciertos mensajes de alerta o confirmación, en este artículo explicamos como utilizarlos con jQuery Mobile.

Trabajar con páginas hechas con jQuery Mobile

Primera parte de un artículo donde ponemos en práctica distintas formas de desplegar páginas con jQuery Mobile, en esta ocasión explicamos como añadir varias páginas en un solo archivo, así como enlazar varios archivos en un mismo servidor.

Dinamismo con jQuery

Empezamos una nueva sección de nuestro manual de jQuery, iniciamos con la implementación de sitios con jQuery para dar vida a su entorno

Eliminación de elementos con jQuery

En este artículo explicamos como eliminar, vaciar y reemplazar el contenido de un conjunto de elementos mediante las funciones “remove()”, “empty()” y “replaceWith()” de jQuery

Animaciones con jQuery

Introducción a las animaciones con jQuery, explicamos la diferencia con Flash y vemos un ejemplo sencillo de mostrar y ocultar elementos

Envolver elementos con jQuery

En este artículo explicamos como envolver un conjunto de elementos y alterar el contenido de una estructura mediante las funciones “wrap()”, “wrapAll()” y “wrapInner()” de jQuery

Remover atributos con jQuery

Explicamos como remover con jQuery los atributos relacionados a los elementos que forman parte del conjunto combinado.

Consejos para empezar a usar jQuery

En la actualidad, jQuery se ha convertido en uno de los frameworks más utilizados para el desarrollo de aplicaciones de interacción directa con los usuarios.

Su sencillez, ligereza y facilidad de implementación hacen de esta librería la preferida de muchos desarrolladores Web.

El objetivo de uso principal de jQuery es que nosotros escribamos menos para hacer más, es por ello que debemos tener en mente esta serie de consejos que nos permitirán escribir un código más claro, limpio y mejor estructurado.

Aprender jQuery y JavaScript

No intentes aprender jQuery si aún no sabes lo que es JavaScript, puede sonar duro, pero al final agradecerás el hecho de tener esto en mente.

Si haces caso omiso, puede resultarte confuso y el aprovechamiento de tu estudio no será lo suficientemente bueno.

Como en todo sistema, el aprendizaje incluye pasos y niveles que debemos respetar para conseguir el correcto flujo de estudio.

Siempre debemos empezar por las bases, no queramos construir un cohete espacial sin haber leído antes algún libro sobre física.

Estudia constantemente la librería, trata de aprender lo más posible para tener siempre en mente la más práctica y sencilla solución de un problema.

jQuery es uno de los frameworks mejor documentados, cuenta con una amplia gama de manuales los cuales nos permitirán conocer al detalle cada una de sus funciones.

Ahorrar tiempo y código con jQuery

Mantener el código limpio, sencillo y elegante es importante, pero mantenerlo funcional es primordial.

Con jQuery tenemos la gran ventaja de poder reducir cientos de líneas de JavaScript en unas cuantas sentencias, debemos saber estructurar nuestro código sin que este afecte el correcto funcionamiento del sitio Web.

No dependas de JavaScript y mucho menos de jQuery para que tu aplicación funcione.

Existe la posibilidad de que el usuario tenga desactivada la funcionalidad de JavaScript por lo que si no tenemos un plan emergente nuestro sitio puede dejar de funcionar de manera correcta.

No utilices jQuery como lenguaje de lado servidor. El usar un Framework de JavaScript nos ahorra la codificación de tareas monótonas y hace de la validación un proceso más digerible, pero debemos tener en mente que nunca tendrá la completa funcionalidad con la que cuenta un lenguaje de lado servidor como PHP.

El utilizar jQuery como único filtro de validación puede ser fatal puesto que una simple desactivación de JavaScript o el uso de herramientas como Firebug, permitirán al usuario violar este filtro para enviar los datos del formulario al servidor, es por ello que debemos tener una segunda y mejor validación de este lado.

Librerías complementarias

Trata de utilizar librerías complementarias como jQuery UI, esto te permitirá obtener efectos adicionales, lograr un mejor manejo de la interfaz y darle un estilo más adecuado a la presentación de tu sitio.

Si decides darle una oportunidad a este complemento, debes respetar lo dicho anteriormente, primero trata de comprender bien el funcionamiento de jQuery y después pasa a estudiar la documentación de las librerías complementarias, un paso a la vez.

Consejos para trabajar con jQuery

Una vez comprendido todo esto se puede pasar a desarrollar sin ningún problema.

Debemos recordar que para que jQuery funcione de manera adecuada debemos respetar los estándares de HTML, utilizar “id” y “clases”, evitar llamar funciones dentro de las etiquetas y borrar todas las etiquetas obsoletas.

Es una buena práctica eliminar todas aquellas funciones que no necesites. Mantén el código lo más comprimido posible y no seas redundante, trata de aplicar una función la cantidad de veces más viable y si puedes reutilizarla en alguna otra parte hazlo, aunque sean necesarias adaptaciones.

El utilizar jQuery te permitirá reducir tiempos de planificación y elaboración, pero para llegar a esos beneficios no debemos olvidar estos consejos, no todo termina con la descarga e implementación.

La librería cuenta con una gran comunidad de desarrolladores y seguidores, por lo que será común que en tu camino encuentres a varios expertos en el tema, no dudes en hacerles preguntas.

Algunos conceptos básicos de jQuery

JavaScript no obstrusivo

Lo que hoy en día conocemos como JavaScript No Obstructivo, nos inculca la buena práctica de separar el contenido (estructura) del comportamiento (funcionalidad) para poder obtener una mejor escalabilidad y evitar errores que se pueden presentar por manejo del sitio en distintos navegadores.

Con la demanda de los navegadores por obtener un código estandarizado, se ha ido aumentado la necesidad de crear métodos más robustos y complejos que se adapten a la manera no obstrusiva de JavaScript.

Por ello el DOM ha tomado un rol fundamental para llevar acabo de manera correcta la comunicación entre la creciente capa de comportamiento con la capa de contenido.

Al adoptar el uso de JavaScript no obstrusivo en nuestro proyecto, el comportamiento deberá separarse de la estructura, por lo que a partir de ese momento la realización de operaciones sobre los elementos de la página se hará desde fuera del documento donde se crean.

Para poder hacer funcionar esto, necesitamos adaptar o crear una manera de esperar a que los elementos DOM de la página estén totalmente cargados antes de proceder a ejecutar las operaciones.

Función “onload” de jQuery

El uso de la rutina “onload”, sería la manera tradicional de conseguir este resultado, dicha rutina es utilizada con el fin de llevar acabo ciertas funciones una vez que se ejecuta toda la declaración inicial de la página y que esta se encuentre totalmente cargada.

Para ello se utiliza una sintaxis como la siguiente:

Con la cual obtendremos una ventana de alerta que desplegará el mensaje indicado una vez que el documento sea cargado en su totalidad.

Por desgracia, el navegador no solamente esperará a que el árbol DOM se cree, sino que también esperará hasta que se carguen todos los recursos, incluyendo las imágenes, y que el sitio sea mostrado en su totalidad en la ventana del navegador.

Esto puede causar que los visitantes experimenten un retraso de respuesta, que se verá reflejado por el tiempo en que tardará el script en ejecutar la sentencia “onload”.

Es decir, el mensaje no aparecerá hasta que el sitio web se encuentre totalmente cargado.

En el peor de los casos, alguno de los recursos puede tomar bastante tiempo de carga y esto causaría que los visitantes tengan que esperar un tiempo significativo antes de que las operaciones estén disponibles.

Esto se puede ver reflejado en muchas ocasiones por imágenes muy grandes u hojas de estilo no comprimidas.

Función “ready” de jQuery

Una solución para esto, sería lograr un enfoque de espera que únicamente esté a la expectativa de que la estructura del documento sea totalmente analizada y esperar a que el navegador convierta el código HTML en el árbol DOM necesario para poder utilizar la capa de comportamiento.

El problema que se presenta es que para asegurar el buen funcionamiento de esta práctica debemos garantizar que se podrá aplicar para todos los navegadores, es ahí donde entra en acción jQuery para optimizar nuestro código.

Lograr esta operación de manera multi-navegador puede ser algo complejo con JavaScript nativo, pero jQuery proporciona una medio simple para activar la ejecución del código una vez que se ha generado el árbol DOM, sin importar si recursos como las imágenes lo han hecho.

La sintaxis formal para definir dicho código es la siguiente:

Lo primero que hacemos es envolver con la función jQuery() la instancia del documento para después invocar el método “ready()”, a dicho método le pasaremos la función que queremos ejecutar una vez que el documento esté listo para ser manipulado.

En este caso será la función que ejecutará el mensaje de “alerta”.

Como dijimos a esta sintaxis se le da el nombre de “formal”, ya que existe otra forma de producir el mismo resultado, con la diferencia de que su sintaxis es una abreviación que consiste en utilizar únicamente la función “jQuery()” o “$()” y pasar como parámetro la función que se desea ejecutar una vez cargado el documento.

Al mandar la función como parámetro de la función “$()” indicamos al navegador que debe esperar hasta que el árbol DOM sea generado antes de ejecutar la operación indicada.

Dicha técnica puede ser utilizada varias veces en un mismo código y el navegador se encargará de ejecutar cada una en el orden en que fueron especificadas, cosa contraria a la función “onload” que sólo puede ser ejecutada una vez.

Selección de elementos para la manipulación con jQuery

Lo primero que tenemos que hacer para poder utilizar, prácticamente cualquier método de jQuery (con frecuencia denominados comandos jQuery), es seleccionar algunos de los elementos que forman la página sobre la cual va a funcionar la librería.

En ciertas ocasiones el conjunto de elementos que queremos seleccionar será fácil de describir, como por ejemplo “todos los elementos de tipo párrafo que se encuentran en la página”, pero en otras ocasiones tendremos que aplicar una descripción más específica como “todos los elementos que tienen la clase e1 y que contengan un link”.

Afortunadamente, jQuery nos proporciona una sintaxis de selección sencilla y sólida con la que vamos a ser capaces de especificar con facilidad prácticamente cualquier conjunto de elementos, todo de una manera concisa y manteniendo la limpieza necesaria en el código.

 jQuery utiliza gran parte de la sintaxis de CSS, con la cual muchos de nosotros ya estamos familiarizados.

Extendiendo dicha sintaxis con algunos métodos personalizados para seleccionar elementos, lo que ayuda a realizar tanto tareas comunes como complejas.

Uso básico de selectores CSS con jQuery

Debido a la aplicación de estilos a los elementos de una página, los desarrolladores web se han familiarizado con un pequeño, pero potente y útil, grupo de métodos de selección que trabajan en todos los navegadores.

Estos métodos incluyen la selección de un elemento en base a su ID, nombre de su clase, nombre de la etiqueta, y la jerarquía DOM de los elementos de página.

Estos son algunos ejemplos para dar un repaso rápido a este tipo de selectores.

  • a – Este selector equivale a todos los enlaces, elementos que están dentro de la etiqueta .
  • #ident – Este selector equivale a los elementos que tienen un identificador llamado “ident”.
  • .unaClase – Este selector equivale a los elementos que tienen la clase llamada “unaClase”.
  • a#ident.unaClase – Este selector equivale a todos los vínculos con id “ident” y con la clase “unaClase”.

Podemos mezclar y combinar los tipos básicos de selección para seleccionar conjuntos bastante detallados de elementos.

De hecho, muchos de los sitios web más elegantes y creativos usan muchas de estas combinaciones entre opciones básicas para crear entornos realmente asombrosos.

Para poder seleccionar elementos con jQuery debemos envolver el selector en la función jQuery() de la siguiente manera:

Estos selectores básicos son poderosos, pero a veces necesitamos un control aun más preciso sobre los elementos que deseamos hacer coincidir con el patrón.

jQuery consciente de este reto hace uso de selectores más avanzados para lograr cumplir con esta tarea, dichos selectores serán descritos más a detalle en esta guía.

Método slice() de jquery

jQuery nos proporciona un método corto y sencillo para poder obtener como resultado un subconjunto en base a la posición, dicha función lleva por nombre “slice()”.

Este comando se encarga de crear y devolver un nuevo conjunto a partir de una parte o posición del conjunto envuelto establecido, es decir puede proporcionarnos una porción o un conjunto contiguo que se encuentre dentro del padre.

La sintaxis de dicho comando es muy fácil de comprender, tenemos el método “slice” al cual le proporcionaremos dos parámetros que indicarán el inicio y el fin del nuevo subconjunto que se creará, en base a estos parámetros el método devolverá la parte contigua del conjunto envuelto que se encuentra entre esas posiciones.

Los dos parámetros son de tipo numérico, el primero indica la posición del primer elemento que será incluido en la porción, mientras que el segundo parámetro indica la posición del primer elemento que no se desea incluir en el subconjunto, recordando que las posiciones empiezan con el número 0 y que el segundo parámetro puede ser opcional.

Si se omite el segundo parámetro, la división del conjunto se hará desde donde se indicó con el primer parámetro hasta el final del conjunto, también hay que aclarar que se puede utilizar en este caso una posición mas allá del último elemento con el que se cuenta en el conjunto.

Finalmente lo que nos devolverá la función será un nuevo subconjunto recién creado.

Si suponemos que queremos obtener un subconjunto que solamente contenga un elemento del conjunto padre, en base a lo que describimos y a su posición en el conjunto original, se podría emplear el método “slice()” proporcionando la posición (de base cero) del elemento que queremos cortar y extraer del conjunto.

Por ejemplo, si queremos obtener el tercer elemento del conjunto escribimos algo como esto:

Con esta instrucción seleccionamos todos los elementos que se encuentran en nuestra página, y en base a eso generamos un nuevo conjunto que contiene únicamente el tercer elemento del documento completo, puesto que es el único que coincide con la posición indicada con los parámetros.

Hay que tener en cuenta el uso correcto de este método y saber diferenciarlo de otros que ya hemos visto y tienen un comportamiento similar, tal es el caso del método “get()”.

Debemos notar que al utilizar la siguiente expresión jQuery(‘*’).get(2) no obtendremos el mismo resultado, ya que ésta únicamente nos devolverá el tercer elemento del conjunto envuelto, no un nuevo conjunto que contenga al elemento, que fue lo que hicimos con la función “slice”.

De igual manera debemos saber diferencia que diferencia hay entre usar un solo parámetro y usar dos, ya que si usamos una expresión como la siguiente:

Nos devolverá un conjunto con los cinco primeros elementos de nuestro conjunto padre, en cambio una expresión como esta:

Nos dará un conjunto que empezará a partir del quinto elemento de la página y terminará con el último elemento del documento, ya que nunca indicamos un fin.

Esto hace que coincida con el resto de los elementos que conforman la página, descartando únicamente los primeros cuatro.