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 :first
selector 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
.css
método para convertir el texto en verde.
- One
- Two
- Three
$("li:first").css("color", "green");
Nota: No olvide que aplicar CSS en JavaScript no es una buena práctica. Siempre debe dar sus estilos en archivos css.
Otro selector de filtrado :contains(text)
, selecciona elementos que tienen un texto determinado. Coloque el texto que desea hacer coincidir entre paréntesis. Aquí tienes un ejemplo con dos párrafos. El selector de jQuery toma la palabra "Moto" y cambia su color a amarillo.
Hello
World
$("p:contains('World')").css("color", "yellow");
De manera similar, el :last
selector selecciona el elemento que es el último hijo de su padre. El selector de JQuery a continuación selecciona el último
.css
método para convertir el texto en amarillo.$("li:last").css("color", "yellow");
Nota: En el selector de jQuery,World
está entre comillas simples porque ya está dentro de un par de comillas dobles. Utilice siempre comillas simples dentro de comillas dobles para evitar terminar una cadena sin querer.
Múltiples selectores En jQuery, puede usar múltiples selectores para aplicar los mismos cambios a más de un elemento, usando una sola línea de código. Haz esto separando los diferentes identificadores con una coma. Por ejemplo, si desea establecer el color de fondo de tres elementos con los identificadores gato, perro y rata respectivamente en rojo, simplemente haga:
$("#cat,#dog,#rat").css("background-color","red");
Estos son solo algunos de los selectores disponibles para usar en jQuery. Consulte la sección Más información para obtener un enlace a la lista completa en el sitio web de jQuery.
Más información:
- Lista completa de selectores de jQuery