jQuery
Selectores

Introducción

Sintaxis

• Etiqueta: Sin marcador, usa la etiqueta directamente
• Id: #id
• Clase: .className
• Atributo: [attributeName]
• Atributo con valor: [attributeName ='value']
• El atributo comienza con el valor ^= : [attributeName ^= 'value']
• El atributo termina con el valor $= : [attributeName $='value']
• El atributo contiene el valor *= : [attributeName *= 'value']
• Pseudo-selector :pseudo-selector
• Cualquier descendiente: espacio entre selectores.
• Niños directos: > entre selectores
• Hermano adyacente siguiendo el primero: +
• Hermano no adyacente después de la primera: ~
• O: , (coma) entre el selector

Observaciones

<span id="temp.foobar"><span>

$('#temp\\.foobar')

Tipos de selectores

En jQuery puede seleccionar elementos en una página usando muchas propiedades diferentes del elemento, incluyendo:

• Tipo
• Clase
• CARNÉ DE IDENTIDAD
• Posesión de Atributo
• Valor de atributo
• Selector indexado
• Seudoestado

Si conoce los selectores de CSS , notará que los selectores en jQuery son los mismos (con pequeñas excepciones).

Tome el siguiente HTML, por ejemplo:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Seleccionando por tipo:

El siguiente selector de jQuery seleccionará todos los elementos <a> , incluidos 1, 2, 3 y 4.

$("a")

Seleccionando por clase

El siguiente selector de jQuery seleccionará todos los elementos del example de clase (incluidos los elementos que no son a), que son 3, 4 y 5.

$(".example")

Seleccionando por ID

El siguiente selector de jQuery seleccionará el elemento con el ID dado, que es 2.

$("#second-link")

Seleccionando por Posesión de Atributo

El siguiente selector de jQuery seleccionará todos los elementos con un atributo href definido, incluidos 1 y 4.

$("[href]")

Selección por valor de atributo

El siguiente selector de jQuery seleccionará todos los elementos donde exista el atributo href con un valor de index.html , que es solo 1.

$("[href='index.html']")

Selección por posición indexada ( Selector indexado )

El siguiente selector de jQuery seleccionará solo 1, el segundo <a> es decir. el second-link porque el índice proporcionado es 1 como eq(1) (Tenga en cuenta que el índice comienza en 0 por lo que el segundo se seleccionó aquí).

$("a:eq(1)")

Selección con exclusión excluida

Para excluir un elemento utilizando su índice :not(:eq())

Lo siguiente selecciona elementos <a> , excepto que con el example clase, que es 1

$("a").not(":eq(0)")

Seleccionando con Exclusión

Para excluir un elemento de una selección, use :not()

Lo siguiente selecciona elementos <a> , excepto aquellos con el example clase, que son 1 y 2.

$("a:not(.example)")

Seleccionando por pseudo-estado

También puede seleccionar en jQuery usando pseudo-estados, incluyendo :first-child :last-child :first-of-type :last-of-type , etc.

El siguiente selector de jQuery solo seleccionará el primer elemento <a> : número 1.

$("a:first-of-type")

Combinando selectores jQuery

También puede aumentar su especificidad combinando múltiples selectores de jQuery; Puedes combinar cualquier número de ellos o combinarlos todos. También puede seleccionar varias clases, atributos y estados al mismo tiempo.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

Esto seleccionaría un elemento <a> que:

• Tiene las siguientes clases: class1, class2, and class3
• Tiene el siguiente ID: someID
• Tiene el siguiente atributo: attr1
• Tiene los siguientes atributos y valores: attr2 con something valor, attr3 con something valor
• Tiene los siguientes estados: first-child y first-of-type

También puede separar diferentes selectores con una coma:

$("a, .class1, #someID")  

Esto seleccionaría:

• Todos los elementos <a>
• Todos los elementos que tienen la clase class1
• Un elemento con el id #someID

Selección de niños y hermanos

Los selectores de jQuery generalmente se ajustan a las mismas convenciones que CSS, lo que le permite seleccionar hijos y hermanos de la misma manera.

• Para seleccionar un hijo no directo, use un espacio
• Para seleccionar un hijo directo, use un >
• Para seleccionar un hermano adyacente después del primero, use a +
• Para seleccionar un hermano no adyacente después del primero, use un ~

Selección comodín

Puede haber casos en los que deseamos seleccionar todos los elementos, pero no hay una propiedad común para seleccionar (clase, atributo, etc.). En ese caso podemos usar el selector * que simplemente selecciona todos los elementos:

$('#wrapper *')    // Select all elements inside #wrapper element

Combinando selectores

Considere seguir la estructura DOM

<ul class="parentUl">
    <li> Level 1
        <ul class="childUl">
            <li>Level 1-1 <span> Item - 1 </span></li>
            <li>Level 1-1 <span> Item - 2 </span></li>
        </ul>
    </li>
    <li> Level 2
        <ul class="childUl">
            <li>Level 2-1 <span> Item - 1 </span></li>
            <li>Level 2-1 <span> Item - 1 </span></li>
        </ul>
    </li>
</ul>

Descendientes y selectores infantiles

Dado un padre <ul> - parentUl encuentra sus descendientes ( <li> ),

1. $('parent child') Simple $('parent child')

   >> $('ul.parentUl li')

   Esto hace que todos los descendientes coincidentes del antepasado especificado bajen todos los niveles .

2. > - $('parent > child')

   >> $('ul.parentUl > li')

   Esto encuentra a todos los niños que emparejan ( solo 1er nivel abajo ).

3. Selector basado en contexto - $('child','parent')

   >> $('li','ul.parentUl')

   Esto funciona igual que 1. arriba.

4. find() - $('parent').find('child')

   >> $('ul.parentUl').find('li')

   Esto funciona igual que 1. arriba.

5. children() - $('parent').find('child')

   >> $('ul.parentUl').children('li')

   Esto funciona igual que el 2 de arriba.

Otros combinadores

Selector de grupo: ","

Seleccione todos los elementos <ul> Y todos los elementos <li> Y todos los elementos <span> :

$('ul, li, span')

Selector de múltiplos: "" (sin carácter)

Seleccione todos los elementos <ul> con la clase parentUl :

$('ul.parentUl')

Selector de hermanos adyacente: "+"

Seleccione todos los elementos <li> que se colocan inmediatamente después de otro elemento <li> :

$('li + li')

Selector general de hermanos: "~"

Seleccione todos los elementos <li> que son hermanos de otros elementos <li> :

$('li ~ li')

Visión general

Los elementos pueden seleccionarse por jQuery utilizando los selectores jQuery . La función devuelve un elemento o una lista de elementos.

Selectores basicos

$("*")                       // All elements
$("div")                     // All <div> elements
$(".blue")                   // All elements with class=blue
$(".blue.red")               // All elements with class=blue AND class=red
$(".blue,.red")              // All elements with class=blue OR class=red
$("#headline")               // The (first) element with id=headline
$("[href]")                  // All elements with an href attribute
$("[href='example.com']")    // All elements with href=example.com

Operadores relacionales

$("div span")          // All <span>s that are descendants of a <div>
$("div > span")        // All <span>s that are a direct child of a <div>
$("a ~ span")          // All <span>s that are siblings following an <a>
$("a + span")          // All <span>s that are immediately after an <a>

Selectores de almacenamiento en caché

Cada vez que usa un selector en jQuery, el DOM busca elementos que coincidan con su consulta. Hacer esto con demasiada frecuencia o repetidamente disminuirá el rendimiento. Si se refiere a un selector específico más de una vez, debe agregarlo a la memoria caché asignándolo a una variable:

var nav = $('#navigation');
nav.show();

Esto reemplazaría:

$('#navigation').show();

El almacenamiento en caché de este selector podría resultar útil si su sitio web necesita mostrar / ocultar este elemento a menudo. Si hay varios elementos con el mismo selector, la variable se convertirá en una matriz de estos elementos:

<div class="parent">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
</div>

<script>
    var children = $('.child');
    var firstChildText = children[0].text();
    console.log(firstChildText); 
    
    // output: "Child 1"
</script>

NOTA: El elemento debe existir en el DOM en el momento de su asignación a una variable. Si no hay ningún elemento en el DOM con una clase llamada child , almacenará una matriz vacía en esa variable.

<div class="parent"></div>

<script>
    var parent   = $('.parent');
    var children = $('.child');
    console.log(children);

    // output: []

    parent.append('<div class="child">Child 1</div>');
    children = $('.child');
    console.log(children[0].text());

    // output: "Child 1"
</script>

Recuerde reasignar el selector a la variable después de agregar / eliminar elementos en el DOM con ese selector.

Nota : Al almacenar en memoria caché los selectores, muchos desarrolladores iniciarán el nombre de la variable con un $ para indicar que la variable es un objeto jQuery así:

var $nav = $('#navigation');
$nav.show();

Elementos DOM como selectores

jQuery acepta una amplia variedad de parámetros, y uno de ellos es un elemento DOM real. Pasar un elemento DOM a jQuery hará que la estructura subyacente similar a una matriz del objeto jQuery contenga ese elemento.

jQuery detectará que el argumento es un elemento DOM inspeccionando su nodeType.

El uso más común de un elemento DOM es en devoluciones de llamada, donde el elemento actual se pasa al constructor jQuery para obtener acceso a la API jQuery.

Como en each devolución de llamada (nota: cada una es una función de iterador).

$(".elements").each(function(){
    //the current element is bound to `this` internally by jQuery when using each
    var currentElement = this;

    //at this point, currentElement (or this) has access to the Native API
    
    //construct a jQuery object with the currentElement(this)
    var $currentElement = $(this);

    //now $currentElement has access to the jQuery API
});

Cadenas HTML como selectores

jQuery acepta una amplia variedad de parámetros como "selectores", y uno de ellos es una cadena HTML. Pasar una cadena HTML a jQuery hará que la estructura subyacente similar a una matriz del objeto jQuery contenga el HTML generado resultante.

jQuery usa expresiones regulares para determinar si la cadena que se pasa al constructor es una cadena HTML, y también que debe comenzar con < . Esa expresión regular se define como rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ( explicación en regex101.com ).

El uso más común de una cadena HTML como selector es cuando los conjuntos de elementos DOM deben crearse solo en código, a menudo esto lo usan las bibliotecas para cosas como las ventanas emergentes modales.

Por ejemplo, una función que devolvió una etiqueta de ancla envuelta en un div como una plantilla

function template(href,text){
    return $("<div><a href='" + href + "'>" + text + "</a></div>");
}

Devolvería un objeto jQuery sosteniendo.

<div>
    <a href="google.com">Google</a>
</div>

si se llama como template("google.com","Google") .