JQuery

JQuery la librería multiplataforma de Javascript.

JQuery es una librería basada en Javascript que simplifica y facilita la programación de código de Javascript. JQuery permite manejar el DOM, lanzar y capturar eventos, realizar animaciones, peticiones Ajax, etc... de una forma más simplificada que en Javascript. JQuery fue lanzada en 2006 y es la librería más utilizada y popular de Javascript. Dispone de miles de plugins de todo tipo, creados por desarrolladores independientes y fáciles de implementar en cualquier web.

AÑADIR JQUERY

Existen varias opciones para añadir JQuery a un proyecto. Una de ellas es descargar la última versión desde la web de JQuery y almacenarla en el proyecto.También es posible descargar una versión anterior desde JQuery.

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale= 1.0">
		<title>JQuery</title>		
	  	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>	  	
	</head>
	<body>
	</body>
</html>

Otra opción es mediante CDN

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale= 1.0">
		<title>JQuery</title>		
		<script
			  src="//code.jquery.com/jquery-3.4.1.min.js"
			  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
			  crossorigin="anonymous">			  	
	  	</script>
	  	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>	  	
	</head>
	<body>
	</body>
</html>

Otra opción es mediante gestores de paquetes como Npm o Bower

npm install jquery

bower install jquery

SELECTORES

Los selectores son mecanismos de JQuery que permiten acceder y manejar elementos del DOM mediante distintos tipos de referencias como pueden ser el nombre de identificador, el nombre de la clase, el nombre del elemento, etc... Existen varios tipos de selectores que se diferencian por el tipo de referencia indicado.

Selectores de Identificador

Los selectores de idenficador (ID) acceden a los elementos mediante el atributo de identificador como referencia ( al igual que en CSS ), añadiéndole una almohadilla al comienzo.

<div id="contenedor>
    Mi contenedor
</div>
<script>
    var texto = $("#contenedor").text();
    console.log(contenedor);
</script>

Selectores de clase

Los selectores de clase acceden a los elementos mediante el atributo de clase como referencia ( al igual que en CSS ) añadiéndole un punto al comienzo.

<div class="contenedor>
    Mi contenedor es verde
</div>
<script>
    var contenedor =$(".contenedor").css("background","green");
</script>

Selectores de etiqueta

Los selectores de etiqueta acceden a los elementos mediante el nombre de la etiqueta (tag) como referencia.

<p id= "rojo">Ejercicios de JQuery</p>
<p id="amarillo" class="zebra">Practicando</p>
<p id = "verde" class="otro">Verde</p>	
<p class="zebra " >Soy un párrafo blanco</p>
<script>
    var parrafos = $("p");
	parrafos.click(function(){
		$(this).removeClass("zebra");
	});
</script>

Selectores de atributos

Los selectores de atributos acceden a los elementos mediante un atributo de un elemento

Junto a los selectores anteriores existen opciones que permiten seleccionar la posición del elemento a manejar.

<ul>
    <li><a href="//www.eltiempo.es" title = "Tiempo">El Tiempo</a></li>
    <li><a href="//www.elpais.com" title="ElPaís">Ir a El País</a></li>
    <li><a href="//www.jquery.com" title="JQuery" manolo="inventado">Ir a JQuery</a></li>		
</ul>
<div>Div de prueba</div>
<script>
    $("a:first").css("color","red");
    $("ul li:eq(3)").css("background","yellow");
    $("ul div").addClass("fondoazul");
</script>

Nota: Recomendable visitar el blog ANER_BARRENA donde se muestran muchas opciones como selectores para input tipo file, tipo submit, selectores para seleccionar el elemento padre o el hijo, elementos img,etc...

Método find

El método find permite realizar una búsqueda en un selector mediante el parámetro indicado

<ul>
    <li><a href="//www.eltiempo.es" title = "Tiempo">El Tiempo</a></li>
    <li><a href="//www.elpais.com" title="ElPais">Ir a El País</a></li>
    <li><a href="//www.jquery.com" title="JQuery" manolo="inventado">Ir a JQuery</a></li>		
</ul>
<div>Div de prueba</div>
<script>
    $("ul").find("[title = 'ElPais']");
</script>

Método parent

El método parent permite saltar al elemento padre del selector

<ul>
    <li><a href="//www.eltiempo.es" title = "Tiempo">El Tiempo</a></li>
    <li><a href="//www.elpais.com" title="ElPaís">Ir a El País</a></li>
    <li><a href="//www.jquery.com" title="JQuery" manolo="inventado">Ir a JQuery</a></li>		
</ul>
<div>Div de prueba</div>
<script>
    $("li").parent().find("a");
</script>

Comentarios: 0