Selectores de jQuery

jQuery usa selectores de estilo CSS para seleccionar partes o elementos de una página HTML. Luego le permite hacer algo con los elementos usando métodos o funciones jQuery.

Para utilizar uno de estos selectores, escriba un signo de dólar y paréntesis después de que: $(). Esta es la abreviatura de la jQuery()función. Dentro de los paréntesis, agregue el elemento que desea seleccionar. Puede utilizar comillas simples o dobles. Después de esto, agregue un punto después del paréntesis y el método que desea utilizar.

En jQuery, los selectores de clase e ID son como los de CSS. Revisemos rápidamente eso antes de continuar.

Selector de ID en CSS

El selector de ID de CSS aplica estilos a un elemento html específico. El selector de ID de CSS debe coincidir con el atributo de ID de un elemento HTML. A diferencia de las clases, que se pueden aplicar a varios elementos en un sitio, una ID específica solo se puede aplicar a un solo elemento en un sitio. El ID de CSS anulará las propiedades de la clase CSS. Para seleccionar un elemento con una identificación específica, escriba un carácter de almohadilla (#), seguido de la identificación del elemento.

Sintaxis

#specified_id { /* styles */ }

Puede combinar el selector de ID con otros tipos de selectores para diseñar un elemento muy específico.

section#about:hover { color: blue; } div.classname#specified_id { color: green; }

Nota sobre las identificaciones

Debe evitarse la identificación al peinar si es posible. Como tiene una alta especificidad y solo se puede anular si inserta estilos o agrega estilos en . El peso de los selectores de clase y de tipo de anulación de ID.

Recuerde, el selector de ID debe coincidir con el atributo de ID de un elemento HTML.

Especificidad

Los selectores de ID tienen una alta especificidad, lo que dificulta su anulación. Las clases tienen una especificidad mucho menor y generalmente son la forma preferida de diseñar elementos para evitar problemas de especificidad.

Aquí hay un ejemplo de un método jQuery que selecciona todos los elementos de párrafo y les agrega una clase de "seleccionados":

This is a paragraph selected by a jQuery method.
This is also a paragraph selected by a jQuery method.
 $("p").addClass("selected");

Ok, de vuelta a jQuery

En jQuery, los selectores de clase e ID son los mismos que en CSS. Si desea seleccionar elementos con una determinada clase, utilice un punto ( .) y el nombre de la clase. Si desea seleccionar elementos con un ID determinado, utilice el símbolo de almohadilla ( #) y el nombre del ID. Tenga en cuenta que HTML no distingue entre mayúsculas y minúsculas, por lo que es recomendable mantener el marcado HTML y los selectores de CSS en minúsculas.

Seleccionar por clase:

Paragraph with a class.
 $(".p-with-class").css("color", "blue"); // colors the text blue

Seleccionar por ID:

List item with an ID.
 $("#li-with-id").replaceWith("
Socks
");

También puede seleccionar ciertos elementos junto con sus clases e ID:

Seleccionar por clase

Si desea seleccionar elementos con una determinada clase, utilice un punto (.) Y el nombre de la clase.

Paragraph with a class.

$(".pWithClass").css("color", "blue"); // colors the text blue

También puede usar el selector de clases en combinación con un nombre de etiqueta para ser más específico.

    

     My Wish List
    
`

$("ul.wishList").append("
New blender
");

Seleccionar por ID

Si desea seleccionar elementos con un determinado valor de ID, utilice el símbolo de almohadilla (#) y el nombre de ID.

List item with an ID.

$("#liWithID").replaceWith("
Socks
");

Al igual que con el selector de clases, también se puede utilizar en combinación con un nombre de etiqueta.

News Headline

$("h1#headline").css("font-size", "2em");

Selectores que actúan como filtros

También hay selectores que actúan como filtros; por lo general, comienzan con dos puntos. Por ejemplo, el :firstselector selecciona el elemento que es el primer hijo de su padre. A continuación, se muestra un ejemplo de una lista desordenada con algunos elementos de la lista. El selector de jQuery debajo de la lista selecciona el primero

     

      
One
      
Two
      
Three
     

$("li:first").css("color", "green");

Hello
World

$("p:contains('World')").css("color", "yellow");

$("#cat,#dog,#rat").css("background-color","red");