miércoles, 21 de agosto de 2019

jQuery modificando los id, las etiquetas y las clases

Podemos actuar sobre DOM usando jQuery. En este caso veremos cómo actuar sobre:
  • los id
  • las etiquetas <p>, <div>, ...
  • las clases: class

Versión 1

Si ejecutáramos únicamente el código HTML veríamos la siguiente página.


Y después de que el código JS entre en acción lo que vemos es la siguiente página.


Pero el código JS se ejecuta inmediatamente por lo que la primera imagen nunca llega a verse. Lo que vemos es la segunda imagen que ya es el resultado después de que se ha ejecutado el código JS.

HTML

  • El el body tenemos un h1 con una class que hemos llamado 'inicio'.
  • Un párrafo <p> con un identificador id que hemos llamado 'parrafo'.
  • Y finalmente disponemos de un <div> vacío.
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery hola mundo</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 class="inicio">Interactuando con jQuery</h1>  
   <p id="parrafo">Parrafo uno.</p>  
   <div></div>  
  </body>  
 </html>

JavaScript + jQuery

  • Accedemos a los id como en CSS mediante el símbolo almohadilla , hashtag o numeral #, en este caso '#parrafo'.
  • Accedemos a las clases, como en CSS, mediante el punto, en este caso '.inicio'.
  • Accedemos a las etiquetas, simplemente poniendo de que etiqueta se trata, en este caso 'div'.
 $(function(){  
  $('#parrafo').text("El párrafo uno se ha modificado.");  
  $('.inicio').css({'background-color':'yellow'});  
  $('div').text("Texto creado en un div.");  
 });

Versión 2

Hemos creado la versión 2 para evitar el problema que hemos detectado en la versión anterior. En la versión 1 conseguimos que el código JS se ejecute, pero lo hace tan rápidamente que no nos deja ver la página inicial. Este es el motivo por el que hemos creado un botón en HTML, de forma que hasta que no se pulse no entra en acción la función jQuery que lanza el procedimiento que modifica los id, clases y etiquetas.

En el siguiente enlace puedes ver la versión 2 en acción.

HTML

Hemos creado un botón con la etiqueta <button> que es más moderna que los botones que se creaban anteriormente en HTML escribiendo <input type="button">. Observe que con este sistema dentro de la etiqueta <button> no incluimos ninguna función JS que lance ningún procedimiento. De esta forma queda realmente separado el código HTML del código JS.

Antiguamente lo que se hacía es mezclar códigos HTML y JS en una misma línea como la siguiente.

<input type="button" value="Click me" onclick="msg()">

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery hola mundo</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 class="inicio">Interactuando con jQuery</h1>  
   <p id="parrafo">Parrafo uno.</p>  
   <div></div>  
   <br>  
   <button id="boton">Púlsame</button>  
  </body>  
 </html>

JavaScript + jQuery

Creamos la función $("#boton").click(function(){} y dentro de ella incluimos las tres líneas de código que modifican el DOM cambiando los id, clases y etiquetas. Al estar dentro de la función que únicamente se ejecuta al detectar el click del botón, únicamente se modificará el DOM cuando el botón haya sido pulsado.

 $(function(){  
  $("#boton").click( function() {  
   $('#parrafo').text("El párrafo uno se ha modificado.");  
   $('.inicio').css({'background-color':'yellow'});  
   $('div').text("Texto creado en un div.");  
  });  
 });
en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)