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.
En este artículo damos una visión general del framework jQuery Mobile, explicando su función, uso y requerimientos.
Primera página web utilizando jQuery Mobile
En este artículo utilizaremos jQuery Mobile para crear una página HTML sencilla, haciendo uso de atributos de data personalizados.
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
Diferencias entre jQuery y jQuery Mobile
Explicamos la diferencia que existe entre jQuery Mobile y su estructura de código base, jQuery.
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.
Maquetación de contenido con grids en jQuery Mobile
Los grid son una de las estructuras más utilizadas para presentar información tabular, en este artículo explicamos como hacer uso de ellos con jQuery Mobile.
Configuración de jQuery Mobile con JavaScript
La configuración por defecto de jQuery Mobile también puede ser modificada a través de JavaScript, en este artículo explicamos cómo lograrlo.
Ventajas de utilizar jQuery Mobile
Explicamos algunas de las ventajas más importantes que ofrece jQuery Mobile
Compatibilidad de jQuery Mobile con distintos dispositivos
Hacemos un análisis profundo sobre la compatibilidad de jQuery Mobile con distintos dispositivos.
Uso de formularios con jQuery Mobile
Estudiamos la manera en que jQuery Mobile maneja y despliega los formularios de una página para su uso en dispositivos móviles
Uso de barras de herramientas con jQuery Mobile
Como utilizar encabezados y pies de páginas como barras de herramientas y navegación con jQuery Mobile, como diseñar y estructurar dichas barras.
Mostrar y ocultar contenido con jQuery Mobile: colapsables
Colapsar y expandir contenido resulta muy útil para mostrar información en espacios pequeños. En este artículo te explicamos como lograr dicha funcionalidad en 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.
MooTools vs jQuery y otros frameworks JavaScript
En este artículo hacemos una comparación entre MooTools y algunos de los frameworks de JavaScript más populares.
Fundamentos de jQuery: Selector y la función jQuery
Conceptos básicos para empezar a desarrollar con la librería jQuery, explicaremos como se estructura un selector y como trabaja la función jQuery.
Fundamentos de jQuery: Creación de elementos DOM
En este artículo se enseñará a crear y manipular a nivel básico elementos en el DOM de nuestro sitio, todo mediante jQuery
Cómo animar la carga de contenido en un layout con jQuery
Hacemos uso del método load de jQuery para cargar datos mediante llamadas AJAX, al mismo tiempo que utilizamos animaciones para lograr efectos en la transición.
Implementar enlace para volver al inicio de la página con jQuery
Explicamos como agregar un funcional enlace que le permita a tus usuarios regresar al inicio de tu página con un solo clic.
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
Fundamentos de jQuery: Extendiendo la librería
En este artículo explicaremos cómo poder extender nuestro código de jQuery agregando funciones adicionales a la librería base.
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
Validación de formularios con jQuery Validation Plugin
En este artículo explicamos el uso del plugin validation de jQuery, el cual nos permite realizar validaciones rápidas y sencillas a nuestros formularios
Consejos para crear plugins con jQuery
En este artículo damos una serie de recomendaciones a considerar al momento de crear y mantener un plugin con jQuery.
Errores comunes que debemos evitar al trabajar con jQuery
Mencionamos algunos de los errores que comunmente se cometen al manejar jQuery dentro de nuestros proyectos.
¿Qué aporta jQuery al desarrollo web?
En este artículo, vamos a tener una mirada profunda de lo que jQuery nos ofrece como librería JavaScript.
Introducción a las animaciones con jQuery, explicamos la diferencia con Flash y vemos un ejemplo sencillo de mostrar y ocultar elementos
Manejar elementos de formulario con jQuery
En este artículo estudiamos las distintas maneras de utilizar el comando “val()” de jQuery para el manejo de elementos que forman parte de un formulario.
Explicamos como crear una copia al carbón de un conjunto de elementos y utilizarla dentro de nuestro DOM
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
Añadir contenido con “append()” y “appendTo()” de jQuery
En este artículo explicamos como añadir contenido a un elemento mediante las funciones “append()” y “appendTo()”
Establecer el contenido del elemento con jQuery
En este artículo explicamos como modificar y establecer el contenido de un elemento mediante las fucniones “html()” y “text()” de jQuery
Cambiar el estilo de los elementos con jQuery
En este artículo estudiamos las formas de añadir y remover clases de estilo CSS a elementos con jQuery.
Obtener y establecer estilos con jQuery
En este artículo estudiamos las formas de modificar el estilo CSS directamente en los elementos de nuestro documento mediante jQuery
Explicamos como remover con jQuery los atributos relacionados a los elementos que forman parte del conjunto combinado.
Asignación de valores a atributos en jQuery
Explicamos como asignar valores a los atributos relacionados a los elementos que forman parte del conjunto combinado, todo esto con jQuery.
Obtención de valores de los atributos con jQuery
Explicamos como obtener con jQuery los atributos relacionados a los elementos que forman parte del conjunto combinado.
Manipulación de propiedades de los elementos con jQuery
En este artículo explicamos que son las propiedades de elementos y los atributos, analizamos como poder manipular dichas propiedades y vemos a detalle la función “each()”
Trabajando con elementos en jQuery: Encadenamiento
En este artículo analizaremos la forma de utilizar el encadenamiento de jQuery, y veremos dos nuevos métodos para modificar el orden de selección de elementos
Trabajando con elementos en jQuery: Métodos de búsqueda
En este artículo estudiaremos la obtención de elementos mediante métodos de búsqueda y así formar subconjuntos, analizaremos las funciones find, is y contains.
Trabajando con elementos en jQuery: Subconjuntos con relaciones
En este artículo estudiaremos como crear subconjuntos en base a relaciones jerárquicas, analizaremos las distintas funciones que existen para establecer estas relaciones con jQuery.
Trabajando con elementos en jQuery: Afinación del conjunto
Estudiaremos la forma de eliminar y filtrar elementos de nuestro conjunto envuelto, analizaremos las funciones “not()” y “filter()” de jQuery
Trabajando con elementos en jQuery: Añadir elementos
En este artículo estudiaremos como adherir elementos a un conjunto envuelto, analizaremos las funciones add de jQuery.
Trabajando con elementos en jQuery: Obtención de elementos
En este artículo estudiaremos la obtención de elementos de un conjunto envuelto, analizaremos las funciones get e index.
Trabajando con elementos en jQuery: El conjunto envuelto
Empezamos a trabajar con el conjunto envuelto de elementos y sus propiedades
Trabajando con elementos en jQuery: Selección por posición
Explicamos como seleccionar elementos de nuestro documento basándonos en su posición y orden.
Trabajando con elementos en jQuery: Hijos y atributos como selectores
Continúa la metodología para seleccionar de manera adecuada los elementos del documento, en este artículo explicamos como usar los hijos y atributos como selectores
Fundamentos de jQuery: Usar jQuery con otras librerías JavaScript
En este artículo veremos la manera de manejar jQuery con otras librerías en nuestro código sin tener algún conflicto.
Fundamentos de jQuery: Funciones de Utilidad y Métodos Generales
¿Qué son y para qué se utilizan las funciones? en este artículo explicaremos como se estructura la llamada a un método con jQuery, así como la definición de funciones generales y de utilidad.
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.