Selectores en jQuery
Los selectores en jQuery se suelen ver en dos categorías: selectores y filtros. A continuación veremos todos los selectores y filtros que se pueden utilizar para seleccionar elementos del DOM. Para más información y ejemplos pueden visitar la documentación oficial de jQuery sobre los selectores.
Selectores básicos
// Selectores básico en jQuery.
// Selecciona un elemento por ID.
// e.j.: selecciona un elemento: <span id="footer"><span>
$('#footer');
// Selecciona todos los elementos por nombre.
// e.j.: selecciona elementos: <table>
$('table');
// Selecciona todos los elementos por CLASS.
// e.j: selecciona los elementos: <span class="box"><span>
$('.box');
Selectores jerárquicos.
// Selectores jerárquicos en jQuery
// Selecciona todos los elementos descendiente de otro elemento
// especificado.
// e.j.: Selecciona los IMG descendiente de un DIV.
$('div img');
// Selecciona los elementos descendientes directos de otros.
// Esto quiere decir que solo se seleccionarán los primeros
// dentro de otros.
// e.j.: Selecciona los IMG descendientes directos de un DIV.
$('div > img');
// Selecciona los elementos que le siguen a otro elemento
// especificado.
// e.j.: Selecciona todos los IMG después de un DIV.
$('div + img');
// Selecciona todos los elementos primos que le siguen a otro
// elemento especificado.
// e.j.: Selecciona todos los IMG primos después de un DIV.
$('div ~ img');Selectores de elementos formularios.
// Selectores de elementos de formularios
// Selecciona todos los elementos INPUT, TEXTAREA, SELECT
// y BUTTON.
$(':input');
// Selecciona todos los elementos INPUT de tipo "text".
$(':text');
// Selecciona todos los elementos INPUT de tipo "password".
$(':password');
// Selecciona todos los elementos INPUT de tipo "radio".
$(':radio');
// Selecciona todos los elementos INPUT de tipo "checkbox".
$(':checkbox');
// Selecciona todos los elementos INPUT de tipo "submit".
$(':password');
// Selecciona todos los elementos INPUT de tipo "image".
$(':image');
// Selecciona todos los elementos INPUT de tipo "reset".
$(':reset');
// Selecciona todos los elementos INPUT de tipo "button".
$(':button');
// Selecciona todos los elementos INPUT de tipo "file".
$(':file');
// Selecciona todos los elementos INPUT de tipo "hidden".
$(':hidden');
Filtros
Los filtros suelen acompañar los selectores previamente citados para realizar selecciones más específicas.
Filtros básicos
// Filtros básicos en jQuery.
$(':first'); // Selecciona el primer elemento.
$('div:first'); // Selecciona el primer DIV.
$(':last'); // Selecciona el último elemento.
$('div:last'); // Selecciona el último DIV.
$(':not(X)'); // Filtra los elementos usando un selector X.
$('div:not(#box)'); // Selecciona los DIV que no tenga un id="box".
$(':even'); // Selecciona los elementos pares.
$('div:even'); // Selecciona los DIV pares.
$(':odd'); // Selecciona los elementos impares.
$('div:odd'); // Selecciona los DIV impares.
$(':eq(X)'); // Selecciona un elemento de índice X.
$('div:eq(4)'); // Selecciona el quinto índice, contado de 0 a 4.
$(':gt(X)'); // Selecciona los elementos con índice mayor a X.
$('div:gt(2)'); // Selecciona todos los DIV después del tercero.
$(':lt(X)'); // Selecciona los elementos con índice menor a X.
$('div:lt(2)'); // Selecciona todos los DIV antes del tercero.
$(':header'); // Selecciona los elementos: h1, h2, h3 etc...
$(':animated'); // Selecciona todos los elementos animados
// Más detalles sobre animaciones en próximos capítulos.
Filtros de contenidos
// Filtros de contenidos en jQuery.
// Selecciona los elementos con el texto especificado
$(':contains(texto)');
$('div:contains(texto)');
// Selecciona los elementos que no tienen ni texto ni elementos.
$(':empty');
$('div:empty');
// Selecciona los elementos que tenga por lo menos un elemento
// especificado por un selector.
$(':has(selector)');
// e.j.: Selecciona todos los DIV que tenga un IMG de clase 'box'.
$('div:has(img.box)');
// Selecciona los elementos que tienen texto o elementos.
$(':parent');
Filtros de visibilidad
// Filtros de visibilidad en jQuery.
$(':hidden'); // Selecciona los elementos no visibles.
$('div:hidden'); // Selecciona los DIV no visibles.
$(':visible'); // Selecciona los elementos visibles.
$('div:visible'); // Selecciona los DIV visibles.
Filtros por atributos
// Filtros por atributos en jQuery.
// Selecciona los elementos que tenga el atributo especificado.
$('[atributo]');
// e.j.: Selecciona los elementos con el atributo HREF.
$('[href]');
// Selecciona los elementos que tenga el atributo especificado
// y el valor asociado.
$('[atributo=valor]');
// e.j.: Selecciona los elementos con el atributo HREF="blank.html".
$('[href=blank.html]');
// Selecciona los elementos que tenga el atributo especificado
// y no el valor asociado.
$('[atributo!=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que no sea
// igual a "blank.html".
$('[href!=blank.html]');
// Selecciona los elementos que tenga el atributo especificado
// y que comienze con el valor asociado.
$('[atributo^=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// comienze con"blan".
$('[href^=blan]');
// Selecciona los elementos que tenga el atributo especificado
// y termine con el valor asociado.
$('[atributo$=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// termine en ".html".
$('[href$=.html]');
// Selecciona los elementos que tenga el atributo especificado
// y que contenga en cualquier parte el valor asociado.
$('[atributo*=valor]');
// e.j.: Selecciona los elementos con el atributo HREF que
// tenga en cualquier parte el valor "k.h".
$('[href*=k.h]');
// Selecciona los elementos que tenga los atributos especificados
// o filtros de atributos asociados.
$('[atributo1][atributo2][atributo3]');
// e.j.: Selecciona los elementos con el atributo HREF que
// comienze por "bla" y termine en ".html".
$('[href^=bla][href$=.html]');
Filtros descendientes
// Filtros descendientes en jQuery.
// Selecciona los descendientes de un elemento por índice, pares,
// impares o ecuación.
$(':nth-child(índice/par/impar/ecuación)');
// e.j.: Selecciona todos los IMG descendientes pares de un DIV.
$(':nth-child(even)');
// e.j.: Selecciona todos los IMG descendientes de tres en tres
// con un desfase de 1 de un DIV.
$(':nth-child(3n + 1)');
// Selecciona los primeros elementos descendientes de un
// elemento especificado.
$(':first-child');
// Selecciona los últimos elementos descendientes de un
// elemento especificado.
$(':last-child');
// Selecciona los elementos descendientes de un
// elemento especificado.
$(':only-child');
Filtros de formularios
// Filtros de formularios en jQuery.
// Selecciona los elementos de formularios que están activos.
$(':enabled');
// Selecciona los elementos de formularios que no están activos.
$(':disabled');
// Selecciona los CHECKBOXs que están chequeados.
$(':checked');
// Selecciona los OPTIONs seleccionado de un SELECT.
$(':selected');
No hay comentarios:
Publicar un comentario