Los selectores básicos de JQUERY sirven para acceder a los tres tipos de atributos de nuestras páginas web más utilizados: id, class, etiquetas html.
Selector ID: Identificador
El id identifica un elemento que debe ser único, si tienes un código HTML con más de un identificador con el mismo valor, es que está mal maquetado. Este identificador en css se accede a él mediante la almohadilla (#), y en jquery también, ya que usa una dotación similar.
$('#miId').css("border","1px solid red");
En este caso accedemos al identificador id=’miId’ y le ponemos un borde, el código es muy similar a css.
<!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>
Ponemos todos los ejemplos visuales al final en un único documento, el código es muy sencillo al hacer clic en el identificador id=’miId’ ponemos estilo al mismo identificador que acabamos de hacer clic.
Selector class: Clase
Otra etiqueta muy usada en la construcción del HTML, la diferencia con el identificador es que la clase se usa para identificar elementos (varios) con un mismo estilo o comportamiento.
$('.miClass').css("border","1px solid red");
No ponemos el código fuente porque es muy parecido al anterior, solo cambiaríamos el id por class en el HTML y el .miClass por el #miId.
Selector por nombre de etiqueta
Al igual que podemos recuperar el valor de los identificadores y las clases, podemos acceder a cualquier etiqueta del DOM, es tan sencillo como llamarla:
$('h2').css("border","1px solid red");
En este ejemplo, cogemos todos los h2 de nuestra web y le ponemos un borde rojo.
Ejemplo de los 3 selectores JQUERY básicos
<!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"});
});
$('.miClass').click(function(){
$('.miClass').css({"border":"1px solid red","margin":"40px","text-align":"center"});
});
$('p').click(function(){
$('h2').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 poner estilo a este ID</h1>
<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>
Conclusión
Aunque sean ejemplos muy sencillos, son básicos porque se usan frecuentemente, lo más interesante del ejemplo es lo sencillo que resulta crear aplicaciones dinámicas, es decir podemos dotar de vida a nuestra web, olvidándonos de webs estáticas y aburridas.