jQuery es una librería de JavaScript que ha sido creada y optimizada desde el año 2006. Gracias a su capacidad y adaptación, nos permite hacer páginas web dinámicas. Estas librerías contienen el código para hacer tareas habituales o de rutina en la programación. De esta forma, los programadores pueden utilizar dichos códigos, que ya han sido probados y que además son funcionales, sin necesidad de programarlos desde cero; ahorrando tiempo y dolores de cabeza. Ahora podemos hablar de las características y ventajas de jQuery:
Estas y otras características más hacen que jQuery sea una de las librerías preferidas en el mercado. Pero, pasemos a la acción. Voy a enseñarte cómo instalarla y utilizarla con un ejemplo básico, utilizando un plugin: Instalación Podemos descargar jQuery desde su página oficial y agregarlo a nuestro proyecto de la siguiente manera: [html] [/html] También es posible simplemente utilizar la versión que tiene Google alojada en sus servidores. De esta forma, sólo tendremos que pegar esta línea de código, sin necesidad de hacer alguna descarga. [html] [/html] ¡Listo! Ya tenemos jQuery en nuestro proyecto. Ahora vamos a realizar un ejemplo básico. Vamos a crear un archivo HTML con las siguientes líneas de código. Trataré de hacer el código lo más simple posible para su fácil entendimiento. [html] <script>$(document).ready(function(){ $(“button”).click(function(){ $("#div1").fadeToggle(3000); $(“p1”).fadeToggle(3000); }); });</script>
<center>
Aprende JQuery - Da clic en el boton
<button>Boton</button>
<p1>Veremos como funciona la propiedad faceToglle de JQuery</p1></center>
[/html] DEMO En el ejemplo anterior no utilizamos un archivo .CSS, ni tampoco una etiqueta <style>antes de cerrar el </head>. Lo hicimos de esta manera para hacer más visible y limpia la sección del <script>. Ahora realizaremos un ejemplo un poco más complejo. [html] <!DOCTYPE html> <html> <head> <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”> </script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle(“slow”); $(“button”).click(function(){ $("#div1").fadeToggle(3000); $(“p”).fadeToggle(3000); }); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #dddddd; border-radius: 24px 24px 24px 24px; -moz-border-radius: 24px 24px 24px 24px; -webkit-border-radius: 24px 24px 24px 24px; border: 2px solid #bfc0be; } #panel { padding: 50px; display: none; }</style>
<div id=“flip”>Aprende JQuery - Dame un click!!!</div>
<div id=“panel”>Este es un ejemplo de Jquery - Click en el boton <button>Boton</button>
Veremos como funciona la propiedad faceToglle de JQuery
</div>
[/html] DEMO En el ejemplo anterior no utilizamos un archivo .CSS, pero sí usamos una etiqueta <style>antes de cerrar nuestro </head> y creamos un estilo aparte para nuestra esfera. Lo hicimos de esta manera para separar nuestros elementos y hacerlos más visibles y fáciles de entender. Ahora vamos a hacer un ejemplo utilizando un <strong>plugin de jQuery</strong>. Su nombre es <strong>FullPage</strong> y podemos encontrarlo en <a href=“http://alvarotrigo.com/fullPage/” target="_blank">su web oficial</a>. En este ejemplo, podremos ver cómo se realiza un llamado a un plugin; y la facilidad y calidad con la que se puede desarrollar una web utilizando jQuery. [html] <!DOCTYPE html> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” /> <title>fullPage.js Un ejemplo</title> <meta name=“Resource-type” content=“Document” /> <link rel=“stylesheet” type=“text/css” href="./jquery.fullPage.css" /> <link rel=“stylesheet” type=“text/css” href="./examples.css" /> <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”> </script> <script src=“http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js”> </script></pre> <pre> <script type=“text/javascript” src="./jquery.fullPage.js"></script> <script type=“text/javascript”> $(document).ready(function() { $(’#fullpage’).fullpage({ sectionsColor: [’#f2f2f2’, ‘#4BBFC3’, ‘#7BAABE’, ‘whitesmoke’, ‘#ccddff’] }); }); </script> </head> <body> <div id=“fullpage”> <div class=“section active” id=“section0”><h1>Plugin fullPage.js <br> Mueve el scroll del mouse</h1></div> <div class=“section” id=“section1”> <div class=“slide “><h1>Utilizando un plugin de Jquery</h1></div> <div class=“slide active”><h1>Aprendiendo JQuery</h1></div> <div class=“slide”><h1>Agregar un plugin a JQuery</h1></div> <div class=“slide”><h1>fullpage</h1></div> </div> <div class=“section” id=“section2”><h1>Pagina 1</h1></div> <div class=“section” id=“section3”><h1>Pagina 2</h1></div> </div> </body> </html> [/html] <strong><a href=“https://static.platzi.com/blog/uploads/2015/06/demo-tres-jquery.html”>DEMO</a></strong> Espero que esta serie de ejemplos te ayuden a iniciarte en el mundo de jQuery. Pero si lo que quieres es explorar y explotar todo el potencial de esta gran librería, no te pierdas el <a href=“https://platzi.com/cursos/frontend-online/” target=”_blank”>Curso Profesional de Front-end</a> en Platzi. Serás un profesional no solamente en jQuery, si no también en JavaScript, ECMAScript 6, Gulp y mucho más.</style>
Esta publicación del blog no ha envejecido nada bien 😕