jQuery: Selectores y Traversing
February 26, 2014
#dev #html5 #javascript #jquery
Voy a poner esto acá, haciendo las veces de ayudamemoria. Además para el que no sepa, siempre viene bien tener un listado e investigarlos. Selectores/Traversing (que no encontré una traducción buena) en jQuery.
Selectores básicos
$("#idName") // Por id
$(".className") // Por clase
$(document) // DOM (Document Object Model)
$(window) // DOM + imágenes + iframes
$("*") // todos los elementos
$("div.title") // <div class="title"> </div>
$("div:first") // Primer div
$("article h1") // Todos los h1 dentro de article
$("article > h1") // Todos los h1 hijos directo de article
$("[href]") // Todos los elementos que tengan href
$("li:nth-child(n)") // El elmento n - *cuenta desde 1*
$("tr:even") // TableRows pares
$("p:hidden") // Todos los <p> ocultos (con .hide())
Selectores “avanzados”
$(":input") // Todos los inputs
$(":text") // Todos los elementos type="text"
$(":checked") // Todos los elementos chequeados
$(":focus") // Todos los elementos que tengan foco
$("[href='index.html']") // href que sean igual a index.html
$("[href!='index.html']") // href que no sean igual a "index.html"
$("[href$='.html']") // href que terminen en ".html"
$("[href^='https://']") // href que empiezen en "https://"
$("[href*='cuenta']") // href que contengan "cuenta"
$("#nav ul li:first-child") // Primer li dentro de ul que estén dentro de #nav
Traversing
// 3er li, dentro del 1er ul que esté en #nav *inicia en 0*
$("#nav ul:first li:eq(2)")
// Último li, dentro del 1er ul que esté en #nav
$("#nav ul:eq(0) li:eq(-1)")
// Los li que tengan un index mayor a 2
$("#nav ul li:gt(2)")
// Los li que tengan un index menor a 2
$("#nav ul li:lt(2)")
// Todos los elementos que no sean <p>
$("#post").not("p")
// Todos los li que no sean pares
$("#nav ul li").not(":even")
// .children() busca todos los hijos del elemento, :contains() filtra por texto
$("#nav ul").children(":contains('Simulador')")
// Selecciona el li que tenga un p activo
$("#nav ul li p").parent(".active")
$( "#nav ul li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
if ( $("#nav").is("div") ) { ... }
// Otras opciones:
// .end() .find() .first() .last() .has() .next() .nextAll() .prev() .prevAll()
// https://api.jquery.com/category/traversing/