Bienvenidos sean a este post, hoy veremos la primera y mas fundamental funcion de jQuery.
Si bien lo hemos estado utilizando aqui nos centraremos en verlo a mas profundidad, el selector es la funcion $() que hemos visto en algunos ejemplos de posts anteriores, este sera el encargado de convertir los elementos de una pagina web en objetos de tipo jQuery para que los podamos asociar a metodos de jQuery, lo cual nos facilitara la asociacion de eventos u otras acciones relacionadas a la pagina, pero esta forma de trabajar no esta directamente relacionada a DOM, del cual hablamos en el post anterior, pero de eso hablaremos mas adelante pasemos a ver su sintaxis:
$(elemento)Con esto solamente ya crearemos un nuevo objeto de jQuery, esta funcion usualmente acepta un selector de CSS como su unico parametro y el cual nos servira como fabrica para devolver nuevos objetos de jQuery apuntando a los elementos correspondientes de la pagina, casi todo lo que podamos aplicar un style lo podemos pasar como argumento de la funcion, lo cual nos brindara la posibilidad de aplicar funciones de jQuery a los elementos coincidentes, pero que pasa con otras librerias derivadas de Javascript?
Bueno en ese caso deben tener en cuenta que la funcion selector es solamente un alias de jQuery pero tambien es uno muy comun entre las librerias de Javascript, lo cual nos puede desembocar en conflictos si mas de una de estas librerias fueran utilizadas en la misma pagina, una alternativa para evitar estos conflictos es reemplazar cada selector de nuestro codigo por una personalización propia de jQuery pero sobre esto hablaremos mucho mas adelante.
Los tres tipos principales de bloques que le podemos asignar son:
- tag
- ID
- clase
Siendo el primero el tag HTML, el segundo la propiedad id que le podemos asignar y el tercero una clase en particular, a su vez esto podemos manejarlo de forma individual o combinado, veamos como se ven en e codigo:
| Tipo selector | CSS | jQuery |
| Por tag | p { } | $(‘p’) |
Este selecciona todos los parrafos (paragraph) que existan en el documento o pagina, veamos el siguiente
| Tipo selector | CSS | jQuery |
| Por ID | #ID-nombre{ } | $(«#ID-nombre») |
Este seleccionara de la pagina el id que le informemos, veamos el ultimo caso
| Tipo selector | CSS | jQuery |
| Por clase | .nombre-clase { } | $(«.nombre-clase») |
En este caso selecciona todos los elementos que posean el mismo nombre de clase que le informemos, si recapitulamos con algunos ejemplos, tal como vimos en el post anterior, cuando llamamos a los metodos de un objeto de jQuery los objetos referidos en la funcion selector son repetidos automaticamente e implicitamente, por lo tanto podemos evitar la iteracion explicita, tal como en el bucle for, antes de finalizar vamos a ver un ejemplo, para ello crearemos un archivo llamado selector.html y le agregaremos el siguiente codigo:
selector.html
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<title>Pagina de Prueba</title>
<style>
<!--
.estilo
{
font-weight: bold;
}
//-->
</style>
<script>
$(document).ready(
function(){
$("#b2").click(function(){
$('p').addClass("estilo");
});
$("#b1").click(function(){
$('p').hide();
});
});
</script>
</head>
<body>
<p>Este es un parrafo</p><br>
<button id="b1">Esconder</button>
<button id="b2">Aplicar estilo</button>
</body>
</html>
Este codigo simple como siempre comenzara habilitando la libreria de jQuery desde el sitio de origen, despues definimos un tag para el style o el CSS, esto deberia hacerse en un archivo externo pero por practicidad lo hacemos en la misma pagina, en ella definimos una clase llamada estilo, antes de hablar del tag script veamos como es el html, en este solo tendremos un parrafo (<p>) y dos botones donde les asignaremos un id a cada uno, los titulos nos spoilean que haran, pasemos a ver el tag script.
Aqui volveremos a usar ready que aplicamos en el selector del documento o la pagina completa, cuando esta lista o cargada usamos una funcion anonima donde definiremos dos eventos click, en el primer caso le diremos que busque el elemento identificado con b2, le asociamos el evento click y en ella definimos otra funcion anonima donde seleccionaremos el parrafo, en este caso como es uno nos es mas practico que usar un id, y a este le asignaremos la clase estilo por medio de la funcion addClass, el siguiente selector es similar pero con el elemento identificado como b1 y en este caso al parrafo le aplicaremos el metodo hide para esconderlo, con esto comentado veamos como trabaja mediante el siguiente video
Observen como trabajo de una forma practica aplicando alguno de los conceptos previamente mencionados, esto es lo basico para trabajar en los proximos nos iremos ahondando mas en el selector.
En resumen, hoy hemos visto Selector o la funcion $(), que es, para que sirve, como trabaja, como son sus tres sintaxis basicas o principales, asi como tambien hemos visto un pequeño ejemplo para verlo en accion, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 