Los selectores jQuery son herramientas poderosas que permiten acceder y manipular elementos específicos del DOM de manera sencilla y eficiente. Los tres tipos básicos de selectores son los selectores de ID, clase y etiquetas HTML.
¿Necesitas ayuda GRATIS?
Si tienes un problema y deseas que te eche una mano, contáctame. Si puedo solucionarlo en menos de 1 hora, lo haré a cambio de una reseña. en mi perfil de Google My Business.
¿Quieres aprender JQUERY?
Si estás interesado en aprender JQUERY te recomiendo este libro. Debes tener conocimiento de HTML, CSS y Javascript. Es antiguo, pero en 2024 todavía me resulta útil.
Selector ID: Identificador
El selector de ID se utiliza para acceder a un elemento único en el DOM. En jQuery, se utiliza el símbolo de almohadilla (#) seguido del valor del ID.
$('#miId').css("border", "1px solid red");En este ejemplo, seleccionamos el elemento con el ID miId y le aplicamos un borde rojo. Este código es similar al uso de CSS para estilos.
Ejemplo Práctico:
<!DOCTYPE html>
<html>
<head>
<title>Selectores básicos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function() {
$('#miId').css({"border": "1px solid red", "margin": "40px", "text-align": "center"});
});
});
</script>
<style>
*{ width: 100%; margin: 0 auto; }
</style>
</head>
<body>
<h1 id='miId'>Pinchar para recuperar texto</h1>
</body>
</html>En este ejemplo, al hacer clic en el elemento con el ID miId, se le aplica un borde rojo y otros estilos.
Selector Clase: Class
El selector de clase se utiliza para seleccionar todos los elementos que comparten una misma clase. En jQuery, se usa el punto (.) seguido del nombre de la clase.
$('.miClass').css("border","1px solid red");Este código selecciona todos los elementos con la clase miClass y les aplica un borde rojo.
Ejemplo Práctico:
<!DOCTYPE html>
<html>
<head>
<title>Selectores básicos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.miClass').click(function() {
$('.miClass').css({"border": "1px solid red", "margin": "40px", "text-align": "center"});
});
});
</script>
<style>
*{ width: 100%; margin: 0 auto; }
</style>
</head>
<body>
<h2 class='miClass'>Pinchar para poner estilo a los dos class: 1</h2>
<h2 class='miClass'>Pinchar para poner estilo a los dos class: 2</h2>
</body>
</html>En este caso, al hacer clic en cualquier elemento con la clase miClass, se aplican estilos a todos los elementos que comparten esa clase.
Selector por nombre de etiqueta
Este selector se utiliza para seleccionar todos los elementos de un tipo específico de etiqueta HTML.
$('h2').css("border","1px solid red");Este código selecciona todos los elementos h2 y les aplica un borde rojo.
Ejemplo Práctico:
<!DOCTYPE html>
<html>
<head>
<title>Selectores básicos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').click(function() {
$('h2').css({"border": "1px solid red", "margin": "40px", "text-align": "center"});
});
});
</script>
<style>
*{ width: 100%; margin: 0 auto; }
</style>
</head>
<body>
<h2 class='miClass'>Pinchar para poner estilo a los dos class: 1</h2>
<h2 class='miClass'>Pinchar para poner estilo a los dos class: 2</h2>
<p>Borde a los 2 h2</p>
</body>
</html>En este ejemplo, al hacer clic en el párrafo, todos los elementos h2 reciben un borde rojo y otros estilos.
Conclusión
Los selectores básicos de jQuery son herramientas esenciales para cualquier desarrollador web. Permiten seleccionar y manipular elementos del DOM de manera eficiente, simplificando la creación de aplicaciones dinámicas y mejorando la interactividad de las páginas web. Con estos conocimientos, puedes comenzar a explorar las capacidades más avanzadas de jQuery y transformar tus proyectos web.
Deja una respuesta