Introduccion a Jquery | Develop Site

Imagen de ernesto

Submitted by ernesto on

En este ejercicio vamos a hacer un ejemplo básico de como utilizar JQuery en tu servidor local

Para empezar creo la carpeta ejercicios-jquery y dentro de esta la carpeta jquery donde ira el archivo que voy a descargar desde jquery.com introduccion jquery

A continuacion puedes ver un ejemplo de como integrar JQuery a tu codigo

  1. <html>
  2. <title>Ejercicio Introduccion JQuery</title>
  3. <head>
  4. <meta charset="utf-8" />
  5. <sript src="jquery/jquery-1.11.3.js"></script>
  6. </head>
  7. <body>
  8. <div id="ejercicio">Ejercicio de introduccion a JQuery</div>
  9. <script type="text/javascript">
  10. $(document).on('ready', function(){});
  11. </script>
  12. </body>
  13. </html>

Hay otra manera de declarar JQuery en tu codigo

  1. <html>
  2. <title>Ejercicio Introduccion JQuery</title>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="jquery/jquery-1.11.3.js"></script>
  6. </head>
  7. <body>
  8. <div id="ejercicio">Ejercicio de introduccion a JQuery</div>
  9. <script type="text/javascript">
  10. $(document).ready(function(){});
  11. </script>
  12. </body>
  13. </html>

Y hay una tercera opcion

  1. <html>
  2. <title>Ejercicio Introduccion JQuery</title>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="jquery/jquery-1.11.3.js"></script>
  6. </head>
  7. <body>
  8. <div id="ejercicio">Ejercicio de introduccion a JQuery</div>
  9. <script type="text/javascript">
  10. $(funtion(){});
  11. </script>
  12. </body>
  13. </html>

Hagamos un ejercicio en el cual el texto aparece y desaparece

  1. <html>
  2. <title>Ejercicio Introduccion JQuery</title>
  3. <head>
  4. <meta charset="utf-8" />
  5. <script src="jquery/jquery-1.11.3.js"></script>
  6. </head>
  7. <body>
  8. <div id="ejercicio">Ejercicio de introduccion a JQuery</div>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.       $("#ejercicio").hide(3000).show(1000);
  12.  
  13. });
  14. </script>
  15. </body>
  16. </html>

Este es otro ejemplo usando CSS

  1. <html>
  2. <title>Ejercicio Introduccion JQuery</title>
  3. <head>
  4. <meta charset="utf-8" />
  5. <sript src="jquery/jquery-1.11.3.js"></script>
  6. </head>
  7. <body>
  8. <div id="ejercicio">Ejercicio de introduccion a JQuery</div>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.       $("#ejercicio").css({color:'white', backgroundColor:'blue'});
  12.  
  13. });
  14. </script>
  15. </body>
  16. </html>

Si tienes alguna duda o consulta envia tu mensaje o visita nuestras redes sociales

Español