/ jQuery

jQuery Potente Librería JS Para Manejar el DOM HTML

Manejar el arbol DOM (Document Object Model), interactuar con documentos HTML, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web con JavaScript nativo es algo tedioso, pero para poder desarrollar estas tareas utilizando JavaScript de manera fácil podemos utilizar la librería JavaScript jQuery esta potente herramienta nos permite escribir código de manera sencilla ofreciéndonos una sintaxis fácil de adecuarse.

Esta librería es una de las más usadas cabe recalcar que no es la única en su clase pero es una de las mejores a mi parecer.

En este tutorial vamos a ver pequeños ejemplos para despertar tus ganas de investigar y aprender sobre el manejo de esta librería JavaScript que tiene por nombre jQuery.

Página web & repositorio GitHub

Sitio Web jQuery -- O -- Repositorio jQuery

Recuerden visitar la documentación oficial de jQuery para mayor información.

Implementación en un proyecto

Implementar jQuery en un proyecto es al algo sencillo, pero para los desarrolladores que se están iniciando puede ser confuso.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>jQuery - Potente librería JavaScript para el manejo del DOM</title>
</head>
<body>
	
	<!--jQuery-->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<!--Código JavaScript utilizando jQuery-->
	<script>
		$(function() {//ES RECOMENDABLE QUE TODO TU CÓDIGO jQuery ESTE DENTRO DE ESTA FUNCIÓN
			//Todo el código que se encuentre dentro de esta función se ejecutara una vez haya cargado la página
	  	    alert( "listo!" );
		});
	</script>
</body>
</html>

Ejemplos de comparación

Te dejo algunos ejemplos para que puedas comparar las grandes ventajas de usar jQuery y la gran facilidad que se nos hace manipular el DOM HTML gracias a esta excelente librería JavaScript.

HTML

<!--Nombre cadena-->
<p id="nombre">Luis Rene Mas Mas</p>

<!--Validar con expresiones regulares: cambia el valor para ver los resultados-->
<input type="text" id="validar" value="f">

<!--Obtener valor de radio button-->
<form name="frmSO">
<input type="radio" name="so" value="windows" checked>Windows
<input type="radio" name="so" value="linux">Linux
<input type="radio" name="so" value="osx">OSX
<input type="radio" name="so" value="other">Other
</form>

<!--Agregar atributos-->
<a href="https://01luisrene.com" id="sitio_web">01luisrene.com</a>

Código JavaScript nativo y JavaScript Usando jQuery

Esto es una pizca de las diferencias entre usar JavaScript nativo y usar la librería JavaScript jQuery.

<!--Te recomiendo incluir tus códigos JS (JavaScript) en otro archivo externo-->
<script>
	/*====Ejecutar cuando carga la página====*/

	//JS
	window.onload=function(){
		console.log('Página cargada completamente');
	}
	//jQuery
	$(function() {
		console.log('Página cargada completamente');
	});

	/*====obteniendo texto====*/

	//JS
	var nombre = document.getElementById('nombre').innerHTML;
	alert('JS: ' + nombre);

	//jQuery
	var nombre = $('#nombre').text();
	alert('jQuery: ' + nombre);


	/*====Validar expresiones regulares====*/

	//JS
	var validarJs = document.getElementById('validar');
	if((/^[0-9]+$/).exec(validarJs.value)){
		console.log('Validación correcta JS');
	}else{
		console.log('Validación incorrecta JS');
	}

	//======jQuery
	var validarJquery = $('#validar');
	if(validarJquery.val().match(/^[0-9]+$/)){
		console.log('Validación correcta jQuery');
	}else{
		console.log('Validación incorrecta jQuery');
	}


	/*======Radio button======*/

	//JS: obtener valor por nombre
	var so =document.getElementsByName('so');
	var resultado = 'error';
	for(var i=0;i<so.length;i++)
  {
    if(so[i].checked)
      resultado=so[i].value;
  }
  console.log('Nombre so obtenido desde JS: ' + resultado);

  //jQuery
  var s_o = $('input:radio[name=so]:checked').val();
  console.log('Nombre so obtenido desde jQuery: ' + s_o);


	/*======Agregar atributos=====*/

	//JS
	var agregarAttrLink = document.getElementById('sitio_web');

	agregarAttrLink.setAttribute('title', '01luisrene.com');
	agregarAttrLink.setAttribute('target', '_blank');

	//jQuery
	var agregarAttr_link = $('#sitio_web');
	agregarAttr_link.attr({
		title: '01luisrene.com',
		target: '_blank'
	});
</script>

Demo

Recuerda que la mayoría de estos mensajes se muestran en la consola del navegador.

ver resultado

Como podrás darte cuenta escribir código JavaScript con jQuery es genial, pero siempre es bueno conocer las bases JavaScript nativo.


Ejemplo de una calculadora simple jQuery

Vamos a realizar las operaciones matemáticas básicas, una vez obtenido dos valores numéricos.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>jQuery - Operaciones matemáticas básicas</title>
	<!--Fuente Roboto-->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
	<!--Estilos opcionales-->
	<style>
		body{font-family: 'Roboto', sans-serif;}
		h2{color: #008040;text-transform: uppercase;}
		input[type='text']{display: block;margin-bottom: 1em;}
		#resultado{font-size: 2em;}
		.opciones{display:block;margin-bottom: 1em;}
	</style>
</head>
<body>

	<h2>Operaciones matemáticas</h2>
	<form action="#">
	  <label for="valor1">Primer valor:</label>
	  <input type="text" id="valor1" placeholder="Ingrese un número">
	  <label for="valor2">Segundo valor:</label>
	  <input type="text" id="valor2" placeholder="Ingrese un número">
	  <p class="resultado">Resultado: <span id="resultado">0</span></p>
	  <div class="opciones">
		  <input type="radio" name="operacion" value="suma" checked> Suma
		  <input type="radio" name="operacion" value="resta"> Resta
		  <input type="radio" name="operacion" value="multiplicacion"> Multiplicación 
		  <input type="radio" name="operacion" value="division"> División 
	  </div>
	  <button id="calcular">calcular</button>
	</form>
	
	<!--jQuery-->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<!--Código JavaScript utilizando jQuery-->
	<script>
		$(function() {
			//Operaciones matemáticas
		  $('#calcular').click(function(e) {
		  	e.preventDefault();
		  	//Almaceno los valores de los inputs
		  	var primerValor = $('#valor1').val();
		  	var segundoValor = $('#valor2').val()

		  	//Almacena el valor de la opción seleccionada
		  	var opcionSeleccionada = $('input:radio[name=operacion]:checked').val();

		  	//Condiciona para que acepte solo números usando las expresiones regulares
		  	if(primerValor.match(/^[0-9]+$/) && segundoValor.match(/^[0-9]+$/)){
		  		//Suma
		  		if(opcionSeleccionada == 'suma'){
			  		var resultado = parseFloat(primerValor) + parseFloat(segundoValor);
			  	}else if(opcionSeleccionada == 'resta'){ //Resta
			  		var resultado = parseFloat(primerValor) - parseFloat(segundoValor);
			  	}else if(opcionSeleccionada == 'multiplicacion'){
			  		var resultado = parseFloat(primerValor) * parseFloat(segundoValor);
			  	}else{
			  		var resultado = parseFloat(primerValor) / parseFloat(segundoValor);
			  	}

		  	}else{
		  		alert("Ingrese números en los campos");
		  	}
		  	//Muestro el resultado
		    $('#resultado').text(resultado);
		  });
		});
	</script>
</body>
</html>

Demo

Puedes ver el código funcional alojado en CodePen.

Resultado operaciones matemáticas

Listo amigos con estos pequeños ejemplos espero que hayan abierto el apetito por utilizar jQuery.

Luis Rene Mas Mas

Luis Rene Mas Mas

Hola, soy desarrollador Frontend, me encanta las tecnologías web, mi pasatiempo favorito es administrar este blog.

Leer Más