![Selector Selecciona Ejemplo
* Todos los elementos $("*")
#id El element con id="lastname" $("#lastname")
.class Todos los elementos con class="intro" $(".intro")
.class,.class Todos los elementos con la clase "intro" o "demo" $(".intro,.demo")
element Todos los elementos <p> $("p")
el1,el2,el3 Todos los elementos <h1>, <div> y <p> $("h1,div,p")
:first El primer element <p> $("p:first")
:last El último element <p> $("p:last")
:even Todos los elementos <tr> par $("tr:even")
:odd Todos los elementos <tr> impar $("tr:odd")
:first-child Todos los elementos <p> que son el primer child (hijo) de su parent (padre) $("p:first-child")
:first-of-type Todos los elementos <p> que son el primer element <p> de su parent (padre) $("p:first-of-type")
:last-child Todos los elementos <p> que son el último child (hijo) de su parent (padre) $("p:last-child")
:last-of-type Todos los elementos <p> que son el último element <p> de su parent (padre) $("p:last-of-type")
:nth-child(n) Todos los elementos <p> que son el segundo child (hijo) de su parent (padre) $("p:nth-child(2)")
:nth-last-child(n)
Todos los elementos <p> que son el segundo child (hijo) de su parent (padre), contando desde el
último child (hijo)
$("p:nth-last-child(2)")
:nth-of-type(n) Todos los elementos <p> que son el segundo element <p> de su parent (padre) $("p:nth-of-type(2)")
:nth-last-of-type(n)
Todos los elementos <p> que son el segundo element <p> de su parent (padre), contando desde el
último child (hijo)
$("p:nth-last-of-type(2)")
:only-child Todos los elementos <p> que son el único child (hijo) de su parent (padre) $("p:only-child")
:only-of-type Todos los elementos <p> que son el único child (hijo), de su tipo, de su parent (padre) $("p:only-of-type")
parent > child Todos los elementos <p> que son un child (hijo) directo de un element <div> $("div > p")
parent descendant Todos los elementos <p> que son descendientes de un element <div> $("div p")
element + next El element <p> que está al lado de cada element <div> $("div + p")
element ~ siblings Todos los elementos <p> que son hermanos de un element <div> $("div ~ p")
:eq(index) El cuarto element en una lista (índice empieza en 0) $("ul li:eq(3)")
:gt(no) Lista elementos con un índice mayor que 3 $("ul li:gt(3)")
:lt(no) Lista elementos con un índice menor que 3 $("ul li:lt(3)")
:not(selector) Todos los elementos de input que no están vacíos $("input:not(:empty)")
:header Todos los elementos de encabezado <h1>, <h2> ... $(":header")
:animated Todos los elementos animados $(":animated")
:focus El element seleccionado en ese momento $(":focus")
:contains(text) Todos los elementos que contienen el texto "Hello" $(":contains('Hello')")
:has(selector) Todos los elementos <div> que tienen un element <p> $("div:has(p)")
:empty Todos los elementos que están vacíos $(":empty")
:parent Todos los elementos que son un parent (padre) de otro element $(":parent")
:hidden Todos los elementos <p> escondidos $("p:hidden")
:visible Todas las tablas visibles $("table:visible")
:root Element raíz del documento $(":root")
:lang(language) Todos los elementos <p> con un valor de atributo lang empezado por "de" $("p:lang(de)")
[attribute] Todos los elementos con un atributo href $("[href]")
[attribute=value] Todos los elementos con un valor de atributo href igual a "default.htm" $("[href='default.htm']")
[attribute!=value] Todos los elementos con un valor de atributo href que no es igual a "default.htm" $("[href!='default.htm']")
[attribute$=value] Todos los elementos con un valor de atributo href que termina con ".jpg" $("[href$='.jpg']")
[attribute|=value]
Todos los elementos con un valor de atributo título igual a 'Tomorrow', o empezado por 'Tomorrow'
seguido por guión
$("[title|='Tomorrow']")
[attribute^=value] Todos los elementos con un valor de atributo título empezado por "Tom" $("[title^='Tom']")
[attribute~=value] Todos los elementos con valor de atributo título que contienen la palabra "hello" $("[title~='hello']")
[attribute*=value] Todos los elementos con valor de atributo título que contienen la string "hello" $("[title*='hello']")
:input Todos los elementos de input $(":input")
:text Todos los elementos de input con type="text" $(":text")
:password Todos los elementos de input con type="password" $(":password")
:radio Todos los elementos de input con type="radio" $(":radio")
:checkbox Todos los elementos de input con type="checkbox" $(":checkbox")
jQuery
Selectores jQuery
1](https://image.slidesharecdn.com/026guiajquery-190325203143/85/026-guia-j-query-1-320.jpg)
026 guia j query
- 1. Selector Selecciona Ejemplo * Todos los elementos $("*") #id El element con id="lastname" $("#lastname") .class Todos los elementos con class="intro" $(".intro") .class,.class Todos los elementos con la clase "intro" o "demo" $(".intro,.demo") element Todos los elementos <p> $("p") el1,el2,el3 Todos los elementos <h1>, <div> y <p> $("h1,div,p") :first El primer element <p> $("p:first") :last El último element <p> $("p:last") :even Todos los elementos <tr> par $("tr:even") :odd Todos los elementos <tr> impar $("tr:odd") :first-child Todos los elementos <p> que son el primer child (hijo) de su parent (padre) $("p:first-child") :first-of-type Todos los elementos <p> que son el primer element <p> de su parent (padre) $("p:first-of-type") :last-child Todos los elementos <p> que son el último child (hijo) de su parent (padre) $("p:last-child") :last-of-type Todos los elementos <p> que son el último element <p> de su parent (padre) $("p:last-of-type") :nth-child(n) Todos los elementos <p> que son el segundo child (hijo) de su parent (padre) $("p:nth-child(2)") :nth-last-child(n) Todos los elementos <p> que son el segundo child (hijo) de su parent (padre), contando desde el último child (hijo) $("p:nth-last-child(2)") :nth-of-type(n) Todos los elementos <p> que son el segundo element <p> de su parent (padre) $("p:nth-of-type(2)") :nth-last-of-type(n) Todos los elementos <p> que son el segundo element <p> de su parent (padre), contando desde el último child (hijo) $("p:nth-last-of-type(2)") :only-child Todos los elementos <p> que son el único child (hijo) de su parent (padre) $("p:only-child") :only-of-type Todos los elementos <p> que son el único child (hijo), de su tipo, de su parent (padre) $("p:only-of-type") parent > child Todos los elementos <p> que son un child (hijo) directo de un element <div> $("div > p") parent descendant Todos los elementos <p> que son descendientes de un element <div> $("div p") element + next El element <p> que está al lado de cada element <div> $("div + p") element ~ siblings Todos los elementos <p> que son hermanos de un element <div> $("div ~ p") :eq(index) El cuarto element en una lista (índice empieza en 0) $("ul li:eq(3)") :gt(no) Lista elementos con un índice mayor que 3 $("ul li:gt(3)") :lt(no) Lista elementos con un índice menor que 3 $("ul li:lt(3)") :not(selector) Todos los elementos de input que no están vacíos $("input:not(:empty)") :header Todos los elementos de encabezado <h1>, <h2> ... $(":header") :animated Todos los elementos animados $(":animated") :focus El element seleccionado en ese momento $(":focus") :contains(text) Todos los elementos que contienen el texto "Hello" $(":contains('Hello')") :has(selector) Todos los elementos <div> que tienen un element <p> $("div:has(p)") :empty Todos los elementos que están vacíos $(":empty") :parent Todos los elementos que son un parent (padre) de otro element $(":parent") :hidden Todos los elementos <p> escondidos $("p:hidden") :visible Todas las tablas visibles $("table:visible") :root Element raíz del documento $(":root") :lang(language) Todos los elementos <p> con un valor de atributo lang empezado por "de" $("p:lang(de)") [attribute] Todos los elementos con un atributo href $("[href]") [attribute=value] Todos los elementos con un valor de atributo href igual a "default.htm" $("[href='default.htm']") [attribute!=value] Todos los elementos con un valor de atributo href que no es igual a "default.htm" $("[href!='default.htm']") [attribute$=value] Todos los elementos con un valor de atributo href que termina con ".jpg" $("[href$='.jpg']") [attribute|=value] Todos los elementos con un valor de atributo título igual a 'Tomorrow', o empezado por 'Tomorrow' seguido por guión $("[title|='Tomorrow']") [attribute^=value] Todos los elementos con un valor de atributo título empezado por "Tom" $("[title^='Tom']") [attribute~=value] Todos los elementos con valor de atributo título que contienen la palabra "hello" $("[title~='hello']") [attribute*=value] Todos los elementos con valor de atributo título que contienen la string "hello" $("[title*='hello']") :input Todos los elementos de input $(":input") :text Todos los elementos de input con type="text" $(":text") :password Todos los elementos de input con type="password" $(":password") :radio Todos los elementos de input con type="radio" $(":radio") :checkbox Todos los elementos de input con type="checkbox" $(":checkbox") jQuery Selectores jQuery 1
- 2. Selector Selecciona Ejemplo jQuery Selectores jQuery :submit Todos los elementos de input con type="submit" $(":submit") :reset Todos los elementos de input con type="reset" $(":reset") :button Todos los elementos de input con type="button" $(":button") :image Todos los elementos de input con type="image" $(":image") :file Todos los elementos de input con type="file" $(":file") :enabled Todos los elementos de input habilitados $(":enabled") :disabled Todos los elementos de input deshabilitados $(":disabled") :selected Todos los elementos de input seleccionados $(":selected") :checked Todos los elementos de input verificados $(":checked") 2
- 3. Método Descripción bind() Une handlers de eventos a elementos blur() Une/Desencadena el evento blur change() Une/Desencadena el evento de cambio click() Une/Desencadena el evento de clic dblclick() Une/Desencadena el evento de doble clic delegate() Une un handler a los elementos child (hijo) especificados, actuales o futuros, de los elementos coincidentes die() Elimina todos los handlers de eventos añadidos con el método live() (eliminado en la versión 1.9) error() Une/Desencadena el evento de error (obsoleto en la versión 1.8) event.currentTarget El element DOM actual dentro de la fase de subida de evento event.data Contiene los datos opcionales que pasan a un método de evento cuando el handler de ejecucción está unido event.delegateTarget Devuelve el element donde el handler de evento jQuery actualmente llamado estaba conectado event.isDefaultPrevented() Devuelve si event.preventDefault () fue llamado para el objeto de evento event.isImmediatePropagati onStopped() Devuelve si Event.stopImmediatePropagation () fue llamado para el objeto de evento event.isPropagationStoppe d() Devuelve si event.stopPropagation () fue llamado para el objeto de evento event.namespace Devuelve el namespace especificado cuando el evento fué desencadenado event.pageX Devuelve la posición del ratón respecto al borde izquierdo del documento event.pageY Devuelve la posición del ratón respecto al borde derecho del documento event.preventDefault() Previne la acción predeterminada del evento event.relatedTarget Devuelve qué element está saliendo o entrando en el movimiento del ratón event.result Contiene el último/anterior valor devuelto por un handler de evento desencadenado por el evento especificado event.stopImmediatePropag ation() Evita que se llamen otros handlers de evento event.stopPropagation() Evita que el evento suba el árbol DOM, evitando que handlers parent (padre) sean notificados del evento event.target Devuelve que element DOM desencadenó el evento event.timeStamp Devuelve el número de milisegundos desde el 1 de Enero de 1970, cuando el evento es desencadenado event.type Devuelve que tipo de evento fue desencadenado event.which Devuelve que tecla del teclado o botón del ratón fue pulsada para el evento focus() Une/Desencadena el evento de foco focusin() Une un handler de evento al evento focusin focusout() Une un handler de evento al evento focusout hover() Une dos handlers de evento al evento hover keydown() Une/Desencadena el evento keydown keypress() Une/Desencadena el evento keypress keyup() Une/Desencadena el evento keyup live() Añade uno o más handlers de evento a los actuales o futuros elementos seleccionados (eliminado en la versión 1.9.) load() Une un handler de evento al evento de load (obsoleto en la versión 1.8) mousedown() Une/Desencadena el evento mousedown mouseenter() Une/Desencadena el evento mouseenter mouseleave() Une/Desencadena el evento mouseleave mousemove() Une/Desencadena el evento mousemove mouseout() Une/Desencadena el evento mouseout mouseover() Une/Desencadena el evento mouseover mouseup() Une/Desencadena el evento mouseup off() Elimina los handlers de evento unidos con el método on() on() Une los handlers de evento a los elementos one() Añade uno o más handlers de evento a los elementos seleccionados. Este handler sólo puede ser desencadenado una vez por element $.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() Une/Desencadena el evento resize scroll() Une/Desencadena el evento scroll select() Une/Desencadena el evento select jQuery Eventos jQuery 3
- 4. Método Descripción jQuery Eventos jQuery submit() Une/Desencadena el evento submit toggle() Une dos o más funciones para alternar entre el evento de clic (eliminado en la versión 1.9) trigger() Desencadena todos los eventos unidos a los elementos seleccionados triggerHandler() Desencadena todas las funciones unidas a eventos especificados para los elementos seleccionados unbind() Elimina un handler de evento añadido desde los elementos seleccionados undelegate() Elimina un handler de evento a los elementos seleccionados, ahora o futuramente unload() Une un handler de evento al evento unload (obsoleto en la versión 1.8) 4
- 5. Método Descripción animate() Corre una animación personalizada en los elementos seleccionados clearQueue() Elimina todas las funciones en espera restantes de los elementos seleccionados delay() Establece un retraso para todas las funciones en espera en los elementos seleccionados dequeue() Elimina la función siguiente de la espera y después ejecuta la función fadeIn() Fades in los elementos seleccionados fadeOut() Fades out los elementos seleccionados fadeTo() Fades in/out los elementos seleccionados para una determinada opacidad fadeToggle() Alterna entre los métodos fadeIn() y fadeOut() finish() Pára, elimina y completa todas las animaciones en espera para los elementos seleccionados hide() Oculta los elementos seleccionados queue() Muestra las funciones en espera en los elementos seleccionados show() Muestra los elementos seleccionados slideDown() Desliza para abajo (muestra) los elementos seleccionados slideToggle() Alterna entre los métodos slideUp() y slideDown() slideUp() Desliza para arriba (esconde) los elementos seleccionados stop() Pára la actual animación en ejecución para los elementos seleccionados toggle() Alterna entre los métodos hide() y show() jQuery Efectos jQuery 5
- 6. Método Descripción addClass() Añade uno o varios nombres de clase a los elementos seleccionados after() Introduce contenido después de los elementos seleccionados append() Introduce contenido al final de los elementos seleccionados appendTo() Introduce elementos HTML al final de los elementos seleccionados attr() Establece o devuelve atributos/valores de los elementos seleccionados before() Introduce contenido antes de los elementos seleccionados clone() Hace una copia de los elementos seleccionados css() Establece o devuelve una o más propiedades de estilo de los elementos seleccionados detach() Elimina elementos seleccionados (mantiene datos y eventos) empty() Elimina todos los nodos child (hijo) y contenido de los elementos seleccionados hasClass() Verifica 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 element (incluye padding, pero no border) innerWidth() Devuelve la anchura de un element (incluye padding, pero no border) insertAfter() Introduce elementos HTML después de los elementos seleccionados insertBefore() Introduce elementos HTML antes de los elementos seleccionados offset() Establece o devuelve las coordinadas offset para los elementos seleccionados (relativos al documento) offsetParent() Devuelve el primer elemento parent (padre) posicionado outerHeight() Devuelve la altura de un elemento (incluye padding y border) outerWidth() Devuelve la anchura de un elemento (incluye padding y border) position() Devuelve la posición (relativa al elemento parent (padre) de un element prepend() Introduce contenido al principio de los elementos seleccionados prependTo() Introduce elementos HTML al principio de los elementos seleccionados prop() Establece o devuelve propiedades/valores para los elementos seleccionados remove() Elimina los elementos seleccionados (incluye datos y eventos) removeAttr() Elimina uno o más atributos de los elementos seleccionados removeClass() Elimina una o más clases de los elementos seleccionados removeProp() Elimina una propiedad definida por el método prop() replaceAll() Sustituye elementos seleccionados por nuevos elementos HTML replaceWith() Sustituye elementos seleccionados por nuevo contenido 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 del texto de los elementos seleccionados toggleClass() Alterna entre añadir/eliminar una o más clases de elementos seleccionados unwrap() Elimina el element parent (padre) de los elementos seleccionados val() Establece o devuelve el atributo de valor de los elementos seleccionados (para elementos de formulário) width() Establece o devuelve la anchura de los elementos seleccionados wrap() Envuelve el element(os) HTML alrededor de cada element seleccionado wrapAll() Envuelve el element(os) HTML alrededor de todos los elementos seleccionados wrapInner() Envuelve el element(os) HTML alrededor del contenido de cada element seleccionado jQuery jQuery HTML / CSS 6
- 7. Método Descripción add() Añade elementos al conjunto de los elementos coincidentes addBack() Añade el conjunto de elementos anterior al conjunto actual andSelf() Obsoleto en la versión 1.8. Un alias para addBack() children() Devuelve todos los children (hijos) del element seleccionado closest() Devuelve el primer antepasado del element seleccionado contents() Devuelve todos los children (hijos) directos del element seleccionado (incluye texto y nodos de comentario) each() Ejecuta la función para cada element coincidente end() Finaliza la operación de filtrado más reciente en la cadena actual, y devuelve el conjunto de elementos coincidentes con su estado anterior eq() Devuelve un element con número de índice especificado de los elementos seleccionados filter() Reduce el conjunto de elementos coincidentes a los que coinciden con el selector o pasan la función de test find() Devuelve elementos descendientes del element seleccionado first() Devuelve el primer element de los elementos seleccionados has() Devuelve todos los elementos que tienen uno o más elementos dentro de ellos is() Verifica el conjunto de elementos coincidentes versus un selector/element/objecto jQuery, y devuelve true si por lo menos uno de estos elementos coincide con los argumentos dados last() Devuelve el último element de los elementos seleccionados map() Pasa cada element en el conjunto coincidente a través de una función, produciendo un nuevo objecto jQuery que contiene los valores de retorno next() Devuelve el element hermano siguiente del element seleccionado nextAll() Devuelve todos los elementos hermanos siguientes del element seleccionado nextUntil() Devuelve todos los elementos hermanos siguientes entre dos argumentos dados not() Devuelve elementos desde el conjunto de elementos coincidentes offsetParent() Devuelve el primer element parent (padre) posicionado parent() Devuelve el element parent directo del element seleccionado parents() Devuelve todos los elementos antepasados del element seleccionado parentsUntil() Devuelve todos elementos antepasados entre dos argumentos dados prev() Devuelve el element hermano anterior del element seleccionado prevAll() Devuelve todos los elementos hermanos anteriores del element seleccionado prevUntil() Devuelve todos los elementos hermanos anteriores entre dos argumentos dados siblings() Devuelve todos los elementos hermanos del element seleccionado slice() Reduce el conjunto de elementos coincidentes a un subconjunto especificado por un rango de índices jQuery jQuery Traversing 7
- 8. Método Descripción $.ajax() Realiza una petición AJAX asíncrona $.ajaxPrefilter() Maneja opciones personalizadas AJAX o modifica opciones existentes antes de enviar cada petición, y antes de que sean procesadas por $.ajax() $.ajaxSetup() Establece los valores por defecto para futuras peticiones AJAX $.ajaxTransport() Crea un objecto que maneja la transmisión actual de datos AJAX $.get() Carga datos desde un servidor utilizando una petición AJAX HTTP GE $.getJSON() Carga datos codificados JSON desde un servidor utilizando una petición HTTP GET $.getScript() Carga (y ejecuta) JavaScript desde un servidor utilizando una petición AJAX HTTP GET $.param() Crea una representación individual de un array u objecto (puede ser utilizado como URL query string para peticiones AJAX) $.post() Carga datos desde un servidor utilizando una petición AJAX HTTP POST ajaxComplete() Especifica una función a ejecutar cuando se completa la petición AJAX ajaxError() Especifica una función a ejecutar cuando la petición AJAX se completa con un error ajaxSend() Especifica una función a ejecutar antes de enviar la petición AJAX ajaxStart() Especifica una función a ejecutar cuando empieza la primera petición AJAX ajaxStop() Especifica una función a ejecutar cuando todas las peticiones AJAX se completan ajaxSuccess() Especifica una función a ejecutar cuando una petición AJAX se completa con éxito load() Carga datos desde un servidor y coloca los datos devueltos en el element seleccionado serialize() Codifica un conjunto de elementos de formulário como una string para submisión serializeArray() Codifica un conjunto de elementos de formulario como un array de nombres y valores jQuery jQuery AJAX 8
- 9. Método Descripción data() Une datos a, u obtiene datos desde, elementos seleccionados each() Ejecuta una función para cada element igualado get() Obtiene los elementos DOM igualados por el selector index() Busca por un element dado desde los elementos igualados $.noConflict() Libera el control jQuery de la variable $ $.param() Crea una representación individual de un array u objecto (puede ser utilizado como URL query string para peticiones AJAX) removeData() Elimina una pieza previamente almacenada de los datos size() Devuelve el número de elementos igualados por el selector jQuery (obsoleto en la versión 1.8) toArray() Recupera todos los elementos DOM contenidos en el conjunto jQuery, como un array jQuery Diversos jQuery 9
- 10. Método Descripción context Contiene el contexto original pasado al jQuery() (obsoleto en la versión 1.10) jquery Contiene el número de la versión jQuery jQuery.fx.interval Cambia la velocidad de disparo de la animación en milisegundos jQuery.fx.off Activa/Desactiva globalmente todas las animaciones jQuery.support Una colección de propiedades que representan diferentes caracteristicas o bugs (fallos) de browser (destinado a utilización interna jQuery) length Contiene el número de elementos en el objecto jQuery jQuery Propiedades jQuery 10
- 11. Botón Atributo Datos Descripción Valor data-corners Especifica si el botón debe tener esquinas redondeadas o no true | false data-icon Especifica el icono del botón. Por defecto no hay icono Icons Reference data-iconpos Especifica la posició del icono left | right | top | bottom | notext data-iconshadow Especifica si el icono del botón debe tener sombreado o no true | false data-inline Especifica si el botón debe estar inline o no true | false data-mini specifica si el botón debe ser de tamaño pequeño o normal true | false data-shadow Especifica si el botón debe tener sombreado o no true | false data-theme Especifica el color del tema del botón letter (a-z) Checkbox Atributo Datos Descripción Valor data-mini Especifica so la checbox debe ser de tamaño pequeño o normal true | false data-role Previne que jQuery Mobile estilice checkboxes como botones none data-theme Especifica el color del tema de la checbox letter (a-z) Colapsar Atributo Datos Descripción Valor data-collapsed Especifica si el contenido debe ser cerrado o ampliado true | false data-collapsed-icon Especifica el icono del botón de colapsar. Por defecto es "plus" Icons Reference data-content-theme Especifica el tema del contenido colapsado. También añadirá esquinas redondeadas al contenido colapsado letter (a-z) data-expanded-icon Especifica el icono del botón de colapsar cuando el contenido es ampliado. Por defecto es "minus" Icons Reference data-iconpos Especifica la posición del icono left | right | top | bottom data-inset Especifica si el botón de colapsar debe o no ser estilizado con esquinas redondeadas y margen true | false data-mini Especifica si los botones de colapsar deben ser de tamaño puequeño o normal true | false data-theme Especifica el color del tema del botón de colapsar letter (a-z) Conjunto Colapsado Atributo Datos Descripción Valor data-collapsed-icon Especifica el icono del botón de colapsar. Por defecto es "plus" Icons Reference data-content-theme Especifica el color del tema del contenido colapsado letter (a-z) data-expanded-icon Especifica el icono del botón de colapsar cuando el contenido es ampliado. Por defecto es "minus" Icons Reference data-iconpos Especifica la posición del icono left | right | top | bottom | notext data-inset Especifica si los colapsados deben o no ser estilizados con esquinas redondeadas y margen true | false data-mini Especifica si los botones de colapsar deben ser de tamaño pequeño o normal true | false data-theme Especifica el color del tema del conjunto de colapsar letter (a-z) Contenido Atributo Datos Descripción Valor data-theme Especifica el color del tema del contenido. Por defecto es "c" letter (a-z) Controlgroup Atributo Datos Descripción Valor data-mini Especifica si el grupo debe ser de tamaño pequeño o normal true | false data-type Especifica so el grupo debe estar en la horizontal o en la vertical horizontal | vertical jQuery Mobile Selectores Móviles jQuery 11
- 12. jQuery Mobile Selectores Móviles jQuery Diálogo Atributo Datos Descripción Valor data-close-btn-text Especifica el texto para el botón de cierre sólo para diálogos sometext data-dom-cache Especifica si se debe borrar la caché de jQuery DOM o no para las páginas individuales (si se define como true, debes tener el cuidado de manejar el DOM tu mismo y testar a fondo en todos los dispositivos móviles) true | false data-overlay-theme Especifica el color de superposición (de fondo) de la página de diálogo letter (a-z) data-theme Especifica el color del tema de la página de diálogo letter (a-z) data-title Especifica el título para la página de diálogo sometext Aumento Atributo Datos Descripción Valor data-enhance Si definido para "true", (por defecto) jQuery Mobile estilizará automáticamente la página, para que sea adecuada para dispositivos móviles. Si definido para "false", la framework no estilizará la página true | false data-ajax Especifica si cargar o no páginas Ajax true | false Barra de Herramientas Fija Atributo Datos Descripción Valor data-disable-page-zoom Especifica si el usuario es o no capaz de ampliar/enfocar la página true | false data-fullscreen Especifica que las barras de herramientas estén siempre posicionadas en la parte de arriba y/o abajo true | false data-tap-toggle Especifica si el usuario es o no capaz de alternar, pulsando/haciendo clic, la visibilidad de la barra de herramentas true | false data-transition Especifica el efecto de transición cuando se pulsa/hace clic slide | fade | none data-update-page-padding Especifica el padding tanto de arriba como de abajo en la página para que actualice el tamaño, transición y eventos "updatelayout" (jQuery Mobile siempre actualiza el padding en el evento "pageshow") true | false data-visible-on-page-show Especifica la visibilidade de la barra de herramientas cuando se muestra la página parent (padre) true | false Flip Toggle Switch Atributo Datos Descripción Valor data-mini Especifica si el botón de switch debe ser de tamaño pequeño o normal true | false data-role Evita que jQuery Mobile estilice toggle switches como botones none data-theme Especifcia el color del tema del toggle switch letter (a-z) data-track-theme Especifica el color del tema de la pista letter (a-z) Pie de Página Atributo Datos Descripción Valor data-id Especifica un ID único. Necesario para pies de página persistentes sometext data-position Especifica si el pie de página debe estar inline con el contenido de la página o si permanece posicionado en la parte inferior inline | fixed data-fullscreen Especifica si el pie de página debe o no estar siempre posicionado en la parte inferior y sobre el contenido de la página (algo transparente) true | false data-theme Especifica el color del tema del pie de página. Por defecto es "a" letter (a-z) Encabezado Atributo Datos Descripción Valor data-id Especifica un ID único. Necesario para encabezados persistentes sometext data-position Especifica si el encabezado debe estar inline con el contenido de la página o si permanece posicionado en la parte superior inline | fixed data-fullscreen Especifica si el encabezado debe o no estar siempre posicionado en la parte superior y sobre el contenido de la página (algo transparente) true | false data-theme Especifica el color del tema del encabezado. Por defecto "a" letter (a-z) 12
- 13. jQuery Mobile Selectores Móviles jQuery Enlace Atributo Datos Descripción Valor data-ajax Especifica si cargar páginas via Ajax para mejor experiencia de usuario y de transiciones. Si definido para false, jQuery Mobile hará una petición de página normal true | false data-direction Invierte la animación de transición (sólo para página o diálogo) reverse data-dom-cache Especifica si se debe borrar la caché de jQuery DOM o no para las páginas individuales (si se define como true, debes tener el cuidado de manejar el DOM tu mismo y testar a fondo en todos los dispositivos móviles) true | false data-prefetch Especifica si prefetch las páginas para el DOM para que ellas estén disponibles cuando el usuario las visite true | false data-rel Especifica una opción para la forma en que el enlace se debe comportar. Back - Se mueve un paso para atrás en la historia. Dialog - Abre un enlace como un diálogo, no rastreado en la historia. External - Para enlazar con otro dominio. Popup - abre una ventana de popup. back | dialog | external | popup data-transition Especifica como hacer la transición de una página para la próxima fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none data-position-to Especifica la posición de las cajas de popup. Origin - Por defecto. Posiciona el popup sobre el enlace que lo abre. Selector jQuery - posiciona el popup sobre el element especificado. Window - posiciona el popup en medio de la pantalla de la ventana origin | jQuery selector | window Lista Atributo Datos Descripción Valor data-autodividers Especifica si se divide o no automáticamente elementos de la lista true | false data-count-theme Especifica el color del tema de count bubble. Por defecto es "c" letter (a-z) data-divider-theme Especifica el color del tema del divisor de lista. Por defecto es "b" letter (a-z) data-filter Especifica si añadir o no una caja de búsqueda en una lista true | false data-filter-placeholder Especifica el texto dentro de la caja de búsqueda. Por defecto es "Filter items..." sometext data-filter-theme Especifica el color del tema del filtro de búsqueda. Por defecto es "c" letter (a-z) data-icon Especifica el icono de la lista Icons Reference data-inset Especifica si la lista debe o no ser estilizada con esquinas redondeadas y margen true | false data-split-icon Especifica el icono del botón de división. Por defecto es "arrow-r" Icons Reference data-split-theme Especifica el color del tema del botón de división. Por defecto es "b" letter (a-z) data-theme Especifica el color del tema de la lista letter (a-z) List Item Atributo Datos Descripción Valor data-filtertext Especifica un texto a buscar al filtrar elementos. Este texto será entonces filtrado en vez del actual texto del ítem de la lista sometext data-icon Especifica el icono del ítem de la lista Icons Reference data-role Especifica un divisor para los ítems de la lista list-divider data-theme Especifica el color del tema del ítem de la lista letter (a-z) Navbar Atributo Datos Descripción Valor data-icon Especifica el icono del ítem de la lista Icons Reference data-iconpos Especifica la posición del icono left | right | top | bottom | notext 13
- 14. jQuery Mobile Selectores Móviles jQuery Página Atributo Datos Descripción Valor data-add-back-btn Añade automáticamente un botón Back (Atrás), sólo para el encabezado true | false data-back-btn-text Especifica un texto para el botón Back (Atrás) sometext data-back-btn-theme Especifica el color del tema para el botón Back (Atrás) letter (a-z) data-close-btn-text Especifica un texto para el botón de Close (Cierre) en diálogos letter (a-z) data-dom-cache Especifica si apagar o no la cache jQuery DOM para páginas individuales (si se define como true, debes tener el cuidado de manejar el DOM tu mismo y testar a fondo en todos los dispositivos móviles) true | false data-overlay-theme Especifica el color de superposición (de fondo) de la página de diálogo letter (a-z) data-theme Especifica el color del tema de la página. Por defecto es "c" letter (a-z) data-title Especifica el título de la página sometext data-url Valor para actualizar el URL, en vez del url utilizado para obtener la página url Popup Atributo Datos Descripción Valor data-corners Especifica si el popup debe o no tener esquinas redondeadas true | false data-overlay-theme Especifica el color de superposicón (de fondo) de la caja de popup. Por defecto el fondo es transparente (ninguno) letter (a-z) data-shadow Especifica si la caja de popup debe o no tener sombreados true | false data-theme Especifica el color del tema de la caja de popup. Por defecto hereditario, "ninguno" establece el popup para transparente letter (a-z) data-tolerance Especifica la distancia de los esquinas de la ventana (superior, derecha, inferior, izquierda) 30, 15, 30, 15 data-position-to Especifica la posición de las cajas popup. Origin - Por defecto. Posiciona el popup sobre el enlace que la abre. Selector jQuery - posiciona el popup sobre el element especificado. Window - posiciona el popup en medio de la pantalla de la ventana origin | jQuery selector | window data-rel Para abrir la caja de popup popup data-transition Especifica como hacer la transición de una página para la próxima fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Botón de Radio Atributo Datos Descripción Valor data-mini Especifica si el botón debe ser de tamaño pequeño o normal true | false data-role Evita que jQuery Mobile estilice botones de rádio como botones ampliados none data-theme Especifica el color del tema del botón de radio letter (a-z) Seleccionar Atributo Datos Descripción Valor data-icon Especifica el icono del element seleccionado. Por defecto es "arrow-d" Icons Reference data-iconpos Especifica la posición del icono left | right | top | bottom | notext data-inline Especifica si el element seleccionado debe o no estar inline true | false data-mini Especifica si el botón seleccionado debe ser de tamaño pequeño o normal true | false data-native-menu Cuando definido para false, utiliza un menú propio de selección jQuery personalizado (recomendable si quieres el menú de selección para visualizar lo mismo en todos los dispositivos móviles) true | false data-overlay-theme Especifica el color del tema del menú próprio de selección jQuery personalizado (utilizado en conjunto con data-native-menu="false") letter (a-z) data-placeholder Puede ser establecido en un element <option> de una selección non-native true | false data-role Evita que jQuery Mobile estilice elementos seleccionados como botones none data-theme Especifica el color del tema del element seleccionado letter (a-z) 14
- 15. jQuery Mobile Selectores Móviles jQuery Slider Atributo Datos Descripción Valor data-highlight Especifica si la pista deslizante debe o no estar destacada true | false data-mini Especifica si la pista deslizante debe ser de tamaño pequeño o normal true | false data-role Evita que jQuery Mobile estilice controles deslizantes como botones none data-theme Especifica el color del tema del control deslizante (el input, handle y track) letter (a-z) data-track-theme Especifica el color del tema de la pista deslizante letter (a-z) Input de Texto y Área de Texto Atributo Datos Descripción Valor data-mini Especifica si el input debe ser de tamaño pequeño o normal true | false data-role Evita que jQuery Mobile estilice inputs/áreas de texto como botones none data-theme Especifica el color del tema del campo input letter (a-z) 15