Es una herramienta complementaria de las páginas en las que detallamos JQuery UI, por los que no son desarrolladores, pero desean usar estas librería para agregarle interacción y efectos a las páginas de blog o sitio web.
En las tablas en esta página se puede consultar cuales son todos los selectores, eventos, métodos y funciones disponibles, con una corta descripción.
Usa los siguientes enlaces para acceder directamente al contenido:
Métodos y funciones para efectos en JQuery
En la siguiente tabla se listan todos los métodos de JQuery, disponibles para crear efectos y animaciones.| Método | Función que realiza |
|---|---|
| animate() | Ejecuta una animación personalizada en los elementos seleccionados |
| clearQueue() | Elimina todas las funciones restantes en cola de los elementos seleccionados |
| delay() | Establece un retardo para todas las funciones en cola en los elementos seleccionados |
| dequeue() | Elimina la siguiente función de la cola y luego ejecuta la función |
| fadeIn() | Se desvanece en los elementos seleccionados |
| fadeOut() | Desvanece los elementos seleccionados |
| fadeTo() | Desvanece los elementos seleccionados a una opacidad dada |
| fadeToggle() | Alterna entre los métodos fadeIn () y fadeOut () |
| finish() | Detiene, elimina y completa todas las animaciones en cola para los elementos seleccionados |
| hide() | Oculta los elementos seleccionados |
| queue() | Muestra las funciones en cola en los elementos seleccionados |
| show() | Muestra los elementos seleccionados |
| slideDown() | Desliza (muestra) los elementos seleccionados |
| slideToggle() | Alterna entre los métodos slideUp () y slideDown () |
| slideUp() | Desliza (oculta) los elementos seleccionados |
| stop() | Detiene la animación en ejecución para los elementos seleccionados |
| toggle() | Alterna entre los métodos hide () y show () |
Métodos de JQuery para manipular HTML y CSS
Lista de todos los métodos y funciones para agregar, eliminar o modificar estilos CSS.Además para modificar directamente el contenido HTML.
| Método | Función que realiza |
|---|---|
| addClass() | Agrega uno o más nombres de clase a los elementos seleccionados |
| after() | Inserta contenido después de elementos seleccionados |
| append() | Inserta contenido al final de los elementos seleccionados |
| appendTo() | Inserta elementos HTML al final de los elementos seleccionados |
| attr() | Establece o devuelve atributos / valores de elementos seleccionados |
| before() | Inserta contenido antes de elementos seleccionados |
| clone() | Hace una copia de los elementos seleccionados |
| css() | Establece o devuelve una o más propiedades de estilo para los elementos seleccionados |
| detach() | Elimina elementos seleccionados (mantiene datos y eventos) |
| empty() | Elimina todos los nodos secundarios y el contenido de elementos seleccionados |
| hasClass() | Comprueba si alguno de los elementos seleccionados tiene un nombre de clase especificado |
| height() | Establece o devuelve la altura de los elementos seleccionados |
| html() | Establece o devuelve el contenido de los elementos seleccionados |
| innerHeight() | Devuelve la altura de un elemento (incluye el relleno, pero no el borde) |
| innerWidth() | Devuelve el ancho de un elemento (incluye el relleno, pero no el borde) |
| insertAfter() | Inserta elementos HTML después de los elementos seleccionados |
| insertBefore() | Inserta elementos HTML antes de elementos seleccionados |
| offset() | Establece o devuelve las coordenadas de desplazamiento de los elementos seleccionados (en relación con el documento) |
| offsetParent() | Devuelve el primer elemento padre |
| outerHeight() | Devuelve la altura de un elemento (incluye relleno y borde) |
| outerWidth() | Devuelve el ancho de un elemento (incluye relleno y borde) |
| position() | Devuelve la posición (relativa al elemento padre) de un elemento |
| prepend() | Inserta contenido al principio de los elementos seleccionados |
| prependTo() | Inserta elementos HTML al principio de los elementos seleccionados |
| prop() | Establece o devuelve propiedades / valores de elementos seleccionados |
| remove() | Elimina los elementos seleccionados (incluidos datos y eventos) |
| removeAttr() | Elimina uno o más atributos de elementos seleccionados |
| removeClass() | Elimina una o más clases de elementos seleccionados |
| removeProp() | Elimina una propiedad establecida por el método prop () |
| replaceAll() | Reemplaza elementos seleccionados con nuevos elementos HTML |
| replaceWith() | Sustituye elementos seleccionados por nuevos contenidos. |
| scrollLeft() | Establece o devuelve la posición de la barra de desplazamiento horizontal de los elementos seleccionados |
| scrollTop() | Establece o devuelve la posición de la barra de desplazamiento vertical de los elementos seleccionados |
| text() | Establece o devuelve el contenido de texto de los elementos seleccionados |
| toggleClass() | Alterna entre agregar / eliminar una o más clases de elementos seleccionados |
| unwrap() | Elimina el elemento padre de los elementos seleccionados |
| val() | Establece o devuelve el atributo de valor de los elementos seleccionados (para elementos de formulario) |
| width() | Establece o devuelve el ancho de los elementos seleccionados |
| wrap() | Envuelve elementos HTML alrededor de cada elemento seleccionado |
| wrapAll() | Envuelve elementos HTML alrededor de todos los elementos seleccionados |
| wrapInner() | Envuelve elementos HTML alrededor del contenido de cada elemento seleccionado |
Métodos de JQuery para AJAX
Lista de todos los métodos y funciones para AJAX.AJAX es el arte de intercambiar datos con el servidor y actualizar el contenido de cualquier página, sin tener que recargarla.
| Método | Función que realiza |
|---|---|
| $.ajax() | Realiza una solicitud asíncrona AJAX |
| $.ajaxPrefilter() | Maneje las opciones personalizadas de Ajax o modifique las opciones existentes antes de enviar cada solicitud y antes de que sean procesadas por $ .ajax () |
| $.ajaxSetup() | Establece los valores predeterminados para futuras solicitudes AJAX |
| $.ajaxTransport() | Crea un objeto que maneja la transmisión real de datos Ajax |
| $.get() | Carga datos desde un servidor utilizando una solicitud AJAX HTTP GET |
| $.getJSON() | Carga los datos codificados en JSON de un servidor que utiliza una solicitud HTTP GET |
| $.getScript() | Carga (y ejecuta) un JavaScript desde un servidor utilizando una solicitud AJAX HTTP GET |
| $.param() | Crea una representación serializada de una matriz o un objeto (se puede utilizar como cadena de consulta URL para solicitudes AJAX) |
| $.post() | Carga datos desde un servidor mediante una solicitud AJAX HTTP POST |
| ajaxComplete() | Especifica una función que se ejecutará cuando se complete la solicitud AJAX |
| ajaxError() | Especifica una función que se ejecutará cuando la solicitud AJAX finaliza con un error |
| ajaxSend() | Especifica una función que se ejecutará antes de enviar la solicitud AJAX |
| ajaxStart() | Especifica una función que se ejecutará cuando comience la primera solicitud AJAX |
| ajaxStop() | Especifica una función que se ejecutará cuando todas las solicitudes AJAX hayan finalizado |
| ajaxSuccess() | Especifica una función que se ejecutará cuando se complete una solicitud AJAX correctamente |
| load() | Carga los datos de un servidor y coloca los datos devueltos en el elemento seleccionado |
| serialize() | Codifica un conjunto de elementos de formulario como una cadena para su envío |
| serializeArray() | Codifica un conjunto de elementos de formulario como una matriz de nombres y valores |
Otros métodos de JQuery
Lista métodos y funciones misceláneas, es decir las que no están comprendidas en las anteriores clasificaciones.| Método | Función que realiza |
|---|---|
| data() | Adjunta datos a, o obtiene datos de elementos seleccionados |
| each() | Ejecutar una función para cada elemento coincidente |
| get() | Obtener los elementos DOM acompañados por el selector |
| index() | Buscar un elemento dado entre los elementos emparejados |
| $.noConflict() | Libere el control de jQuery de la variable $ |
| $.param() | Crear una representación serializada de una matriz o un objeto (se puede utilizar como cadena de consulta de URL para solicitudes AJAX) |
| removeData() | Elimina una pieza de datos previamente almacenada |
| size() | Eliminado en la versión 3.0. Utilice la propiedad length en su lugar. |
| toArray() | Recuperar todos los elementos DOM contenidos en el conjunto jQuery, como una matriz |
Eventos de JQuery
Lista de todos los eventos que se pueden usar en JQuery, para ejecutar métodos y funciones.Los eventos son los que desencadenan y disparan las acciones necesarias para ejecutar cualquier función.
| Evento | Como funciona |
|---|---|
| blur() | Conecta / desencadena el evento de desenfoque |
| change() | Conecta / activa el evento de cambio |
| click() | Conecta / activa el evento de clic |
| dblclick() | Conecta / activa el evento de doble clic |
| event.currentTarget | El elemento DOM actual dentro de la fase de burbujeo del evento |
| event.data | Contiene los datos opcionales transferidos a un método de evento cuando el controlador de ejecución actual esta enlazado |
| event.delegateTarget | Devuelve el elemento donde se ha conectado el controlador de eventos jQuery actualmente llamado |
| event.isDefaultPrevented() | Devuelve si event.preventDefault () fue llamado para el objeto de evento |
| event.isImmediatePropagationStopped() | Devuelve si event.stopImmediatePropagation () se llama para el objeto de evento |
| event.isPropagationStopped() | Devuelve si event.stopPropagation () fue llamado para el objeto de evento |
| event.namespace | Devuelve el espacio de nombres especificado cuando se desencadena el evento |
| event.pageX | Devuelve la posición del ratón en relación con el borde izquierdo del documento |
| event.pageY | Devuelve la posición del mouse en relación con el borde superior del documento |
| event.preventDefault() | Evita la acción predeterminada del evento |
| event.relatedTarget | Devuelve el elemento entrado o salido en el movimiento del ratón. |
| event.result | Contiene el ultimo / anterior valor devuelto por un manejador de eventos disparado por el evento especificado |
| event.stopImmediatePropagation() | Evita que se llamen a otros controladores de eventos |
| event.stopPropagation() | Evita que el evento burbujee el árbol DOM, evitando que los manejadores de origen sean notificados del evento. |
| event.target | Devuelve el elemento DOM que ha desencadenado el evento. |
| event.timeStamp | Devuelve el número de milisegundos desde el 1 de enero de 1970, cuando se desencadena el evento |
| event.type | Devuelve que tipo de evento se ha activado |
| event.which | Devuelve la tecla del teclado o el botón del ratón para el evento |
| focus() | Conecta / activa el evento de enfoque |
| focusin() | Conecta un controlador de eventos al evento focus |
| focusout() | Conecta un controlador de eventos al evento de enfoque |
| hover() | Conecta dos manejadores de eventos al evento hover |
| keydown() | Conecta / activa el evento keydown |
| keypress() | Conecta / activa el evento de pulsaciones de teclas |
| keyup() | Conecta / activa el evento keyup |
| mousedown() | Conecta / activa el evento mousedown |
| mouseenter() | Conecta / activa el evento mouseenter |
| mouseleave() | Adjunta / activa el evento mouseleave |
| mousemove() | Adjunta / activa el evento mousemove |
| mouseout() | Conecta / activa el evento mouseout |
| mouseover() | Conecta / activa el evento mouseover |
| mouseup() | Adjunta / desencadena el evento mouseup |
| off() | Elimina los manejadores de eventos conectados con el método on () |
| on() | Agrega los controladores de eventos a elementos |
| one() | Agrega uno o más controladores de eventos a elementos seleccionados. Este controlador se lo se puede activar una vez por elemento |
| $.proxy() | Toma una función existente y devuelve una nueva con un contexto particular |
| ready() | Especifica una función a ejecutar cuando el DOM está completamente cargado |
| resize() | Adjunta / activa el evento de cambio de tamaño |
| scroll() | Conecta / activa el evento de desplazamiento |
| select() | Conecta / activa el evento seleccionado |
| submit() | Adjunta / activa el evento de envío |
| trigger() | Activa todos los eventos vinculados a los elementos seleccionados |
| triggerHandler() | Dispara todas las funciones enlazadas a un evento especificado para los elementos seleccionados |
Selectores de JQuery
Lista de todos los selectores que se pueden emplear en JQuery.Los selectores como su nombre indica, permiten seleccionar y especificar secciones de una página usando identificadores (ID), clases o elementos (usando sus etiquetas).
Se pueden encadenar para seleccionar descendientes o sus atributos.
Es todo un arte que aprovechan al máximo los desarrolladores.
La facilidad de emplear selectores es una de las grandes ventajas que proporciona JQuery sobre JavaScript.
Lee algunos ejemplos prácticos del uso de los selectores
| Selector | Ejemplo | Selecciona |
|---|---|---|
| * | $("*") | Todos los elementos |
| #id | $("#lastname") | El elemento con id = "lastname" |
| .class | $(".intro") | Todos los elementos con clase = "intro" |
| .class,.class | $(".intro,.demo") | Todos los elementos con la clase "intro" o "demo" |
| element | $("p") | Todos los elementos <p> |
| el1,el2,el3 | $("h1,div,p") | Todos los elementos <h1>, <div> y <p> |
| :first | $("p:first") | El primer elemento <p> |
| :last | $("p:last") | El último <p> elemento |
| :even | $("tr:even") | Todos los elementos <tr> |
| :odd | $("tr:odd") | Todos los elementos impares <tr> |
| :first-child | $("p:first-child") | Todos los <p> elementos que son el primer hijo de su padre |
| :first-of-type | $("p:first-of-type") | Todos los <p> elementos que son el primer <p> elemento de su padre |
| :last-child | $("p:last-child") | Todos los <p> elementos que son el último hijo de su padre |
| :last-of-type | $("p:last-of-type") | Todos los <p> elementos que son el último <p> elemento de su padre |
| :nth-child(n) | $("p:nth-child(2)") | Todos los <p> elementos que son el segundo hijo de su padre |
| :nth-last-child(n) | $("p:nth-last-child(2)") | Todos los <p> elementos que son el segundo hijo de su padre, contando desde el último hijo |
| :nth-of-type(n) | $("p:nth-of-type(2)") | Todos los <p> elementos que son el segundo <p> elemento de su padre |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Todos los <p> elementos que son el segundo <p> elemento de su padre, contando desde el último niño |
| :only-child | $("p:only-child") | Todos los <p> elementos que son el único hijo de su padre |
| :only-of-type | $("p:only-of-type") | Todos los <p> elementos que son el único hijo, de su tipo, de su padre |
| parent > child | $("div > p") | Todos los <p> elementos que son hijos directos de un elemento <div> |
| parent descendant | $("div p") | Todos los <p> elementos que son descendientes de un elemento <div> |
| element + next | $("div + p") | El elemento <p> que está junto a cada elemento <div> |
| element ~ siblings | $("div ~ p") | Todos los <p> elementos que son hermanos de un elemento <div> |
| :eq(index) | $("ul li:eq(3)") | El cuarto elemento de una lista (el índice empieza en 0) |
| :gt(no) | $("ul li:gt(3)") | Lista de elementos con un índice superior a 3 |
| :lt(no) | $("ul li:lt(3)") | Lista de elementos con un índice inferior a 3 |
| :not(selector) | $("input:not(:empty)") | Todos los elementos de entrada que no están vacíos |
| :header | $(":header") | Todos los elementos de encabezado <h1>, <h2> ... |
| :animated | $(":animated") | Todos los elementos animados |
| :focus | $(":focus") | El elemento que actualmente tiene foco |
| :contains(text) | $(":contains('Hello')") | Todos los elementos que contienen el texto "Hello" |
| :has(selector) | $("div:has(p)") | Todos los elementos <div> que tienen un elemento <p> |
| :empty | $(":empty") | Todos los elementos que están vacíos |
| :parent | $(":parent") | Todos los elementos que son los padres de otro elemento |
| :hidden | $("p:hidden") | Todos los elementos <p> ocultos |
| :visible | $("table:visible") | Todas las tablas visibles |
| :root | $(":root") | El elemento raíz del documento |
| :lang(language) | $("p:lang(de)") | Todos los <p> elementos con un valor de atributo lang que comienza con "de" |
| [attribute] | $("[href]") | Todos los elementos con un atributo href |
| [attribute=value] | $("[href='default.htm']") | Todos los elementos con un valor de atributo href igual a "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | Todos los elementos con un valor de atributo href no igual a "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | Todos los elementos con un valor de atributo href que termina en ".jpg" |
| [attribute|=value] | $("[title|='Tomorrow']") | Todos los elementos con un valor de atributo de título igual a 'Mañana' o comenzando con 'Mañana' seguido de un guión |
| [attribute^=value] | $("[title^='Tom']") | Todos los elementos con un valor de atributo de título comenzando por "Tom" |
| [attribute~=value] | $("[title~='hello']") | Todos los elementos con un valor de atributo de título que contiene la palabra específica "hola" |
| [attribute*=value] | $("[title*='hello']") | Todos los elementos con un valor de atributo de título que contiene la palabra "hola" |
| :input | $(":input") | Todos los elementos de entrada |
| :text | $(":text") | Todos los elementos de entrada con tipo = "texto" |
| : | $(":") | Todos los elementos de entrada con tipo = "contraseña" |
| :radio | $(":radio") | Todos los elementos de entrada con tipo = "radio" |
| :checkbox | $(":checkbox") | Todos los elementos de entrada con tipo = "checkbox" |
| :submit | $(":submit") | Todos los elementos de entrada con type = "submit" |
| :reset | $(":reset") | Todos los elementos de entrada con type = "reset" |
| :button | $(":button") | Todos los elementos de entrada con tipo = "botón" |
| :image | $(":image") | Todos los elementos de entrada con tipo = "imagen" |
| :file | $(":file") | Todos los elementos de entrada con tipo = "archivo" |
| :enabled | $(":enabled") | Todos los elementos de entrada habilitados |
| :disabled | $(":disabled") | Todos los elementos de entrada inhabilitados |
| :selected | $(":selected") | Todos los elementos de entrada seleccionados |
| :checked | $(":checked") | Todos los elementos de entrada seleccionados |
Ejemplos del uso de selectores con JQuery
1- Seleccionar un área del documento con ID sección.
Con JavaScript - document.getElementById("seccion");
Con JQuery - $("#seccion");
2- Seleccionar todos los enlaces en la página.
Con JavaScript - document.getElementsByTagName("a");
Con JQuery - $("a");
3- Seleccionar con JQuery todos los enlaces en el área seccion.
$("#seccion, a")
4- Seleccionar con JQuery todos los enlaces que contengan el texto "más información"
$("a:contains('más información')")
5- Seleccionar con JQuery todos los enlaces con el atributo Nofollow.
$("a[@ref='nofollow']");
Con JavaScript - document.getElementById("seccion");
Con JQuery - $("#seccion");
2- Seleccionar todos los enlaces en la página.
Con JavaScript - document.getElementsByTagName("a");
Con JQuery - $("a");
3- Seleccionar con JQuery todos los enlaces en el área seccion.
$("#seccion, a")
4- Seleccionar con JQuery todos los enlaces que contengan el texto "más información"
$("a:contains('más información')")
5- Seleccionar con JQuery todos los enlaces con el atributo Nofollow.
$("a[@ref='nofollow']");
Uso en la práctica de JQuery y JQuery UI
En otras páginas de nuestro sitio se puede encontrar información detallada de JQuery UI en las páginas web, con abundantes ejemplos prácticos.También se pueden descargar en ellas archivos JS con el código empleado, que ayuda a comprender su funcionamiento y es de mucha utilidad para experimentar con estas librerías.
Mas información detallada sobre el uso de esta librería (en inglés), se puede encontrar en: https://www.w3schools.com/jquery/
Páginas relacionadas
✓ JQuery, ejemplos prácticos para usar en páginas web
✓ JQuery UI, efectos, animaciones y widgets para páginas web
✓ Mostrar miniaturas de imágenes o páginas sobre los enlaces con JQuery
✓ Qué es el lenguaje Javascript, introducción y usos prácticos
✓ Javascript fácil en las páginas web, códigos y ejemplos
✓ Insertar contenido de otra página con AJAX, JavaScript y JQuery
✓ JQuery UI, efectos, animaciones y widgets para páginas web
✓ Mostrar miniaturas de imágenes o páginas sobre los enlaces con JQuery
✓ Qué es el lenguaje Javascript, introducción y usos prácticos
✓ Javascript fácil en las páginas web, códigos y ejemplos
✓ Insertar contenido de otra página con AJAX, JavaScript y JQuery
Comparta esta página
Facebook
Twitter