Web.JS.Jquery.Elementos.

Published in

Enredando con la WEB.

4 min readMar 20, 2018

Una de las cosas chulas que tiene Jquery, es que puede manejar a su antojo cualquier elemento html, ya sea texto, etiquetas, atributos…, incluso css.

Textos, Valores y Atributos.

text() Devuelve el texto que hay entre las etiquetas. Algo así como el innerHTML de JS.
html() Devuelve el texto que hay entre las etiquetas. La diferencia que hay respecto a text(), es que visualiza las etiquetas de texto marcado, es decir, aquellas que puedan afectar a parte del texto, las mostraría literalmente pero sin ver los resultados.
val() Devuelve el valor de un campo <input>. Sólo se puede utilizar en campos de formularios, para lo demás se debe utilizar text() o html().
attr() Permite añadir atributos a los elementos html.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#boton1").click(function(){
        alert("Text: " + $("#parrafo").text());
    });
    $("#boton2").click(function(){
        alert("HTML: " + $("#parrafo").html());
    });
    $("#boton3").click(function(){
        alert("Val: " + $("#campo").val());
    });
    $("#boton4").click(function(){
        $("#parrafo2").attr("href","https://www.google.es");
    });
});</script>
</head>
<body><p id="parrafo">Un texto en <b>negrita</b> para el párrafo.</p>
<p><a id="parrafo2">Google</a></p><button id="boton1">Text()</button>
<button id="boton2">html()</button>
<button id="boton3">val()</button>
<button id="boton4">Añadir un HREF</button><p>Campo: <input type="text" id="campo" value="Valor del campo"></p></body>
</html>

Estos 3 procesos no sólo sirven para que nos muestre los valores, también pueden cambiarlo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#boton1").click(function(){
        $("#parrafo").text("Cambiando el texto al parrafo");
    });
    $("#boton2").click(function(){
        $("#parrafo3").html("Cambiando el texto del <b>párrafo 3</b>");
    });
    $("#boton3").click(function(){
        $("#campo").val("El nuevo valor del campo");
    });
    $("#boton4").click(function(){
        $("#enlace").attr("href","https://bing.es");
    });
});
</script>
</head>
<body>
  <p id="parrafo">Un texto en <b>negrita</b> para el párrafo.</p>
  <p id="parrafo2"><a id="enlace" href="https://www.google.es">Enlace.</a></p>
  <p id="parrafo3">Un texto para el parrafo 3.</p>
  <button id="boton1">Text()</button>
  <button id="boton2">html()</button>
  <button id="boton3">val()</button>
  <button id="boton4">Cambiando un HREF</button>
  <p>Campo: <input type="text" id="campo" value="Valor del campo"></p>
</body>
</html>

En los métodos text() y html() la sintaxis es sencilla, es meter entre comillas el valor que queremos cambiar.
En el caso de los atributos es la siguiente; attr(“atributo”,” valor”).

Si no lo he dicho, es porque se me habrá escapado en los apuntes pasados. El signo de + sirve para concatenar textos.

También se pueden añadir más de un atributo a la vez de la siguiente forma:

$("button").click(function(){
    $("a").attr({
        "href" : "https://www.duckduckgo.com",
        "title" : "El navegador que no te rastrea"
    });
});

En este ejemplo añadimos a una etiqueta <a> los atributos href y title.

Añadiendo elementos HTML.

append() Añade contenido al final del elemento.
prepend() Añade contenido al principio del elemento.
after() Añade contenido antes del elemento seleccionado.
before() Añade contenido después del elemento seleccionado.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#boton1").click(function(){
        $("p").append(" <b>Texto Final</b>.");
    });
    $("#boton2").click(function(){
        $("ol").append("<li>Elemento Final</li>");
    });
    $("#boton3").click(function(){
        $("p").prepend(" <b>Texto Principio</b>.");
    });
    $("#boton4").click(function(){
        $("ol").prepend(" <li>Elemento Principio</li>");
    });
    $("#boton5").click(function(){
        $("p").before("<b>Texto Antes</b>");
    });
    $("#boton6").click(function(){
        $("ol").after("<b>Elemento después</b>");
    });});
</script>
</head>
<body>  <p>Texto del párrafo.</p><ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>
<br>  <button id="boton1">Añadir texto al final</button>
  <button id="boton2">Añadir elemento al final</button>
  <button id="boton3">Añadir texto al principio</button>
  <button id="boton4">Añadir elemento al principio</button>
  <button id="boton5">Añadir texto antes</button>
  <button id="boton6">Añadir elemento después</button></body>
</html>

Borrando elementos HTML.

remove() Borra el elemento seleccionado.
empty() Borra todos los hijos del elemento seleccionado.

$("div").remove(); Borra un contenedor y todo lo que contenga.$("p").remove(".test"); /* el método remove() puede acceptar parámetros. En este ejempo borra todas aquellas etiquetas <p> cuya clase sea .test.*/$("p").remove(".test, .demo"); /* Se puede indicar más de un parámetro, siempre separándolo mediante comas. En este ejemplo borra todas aquellas etiquetas <p> cuyas clases sean .test y .demo. */$("div").empty(); Borra todos sus hijos, dejando el <div> sin nada dentro.

Clases de quita y pon.

También podemos añadir/quitar clases a nuestro antojo en los elementos html.

<!DOCTYPE html>
<html>
<head>
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>
  $(document).ready(function(){
      $("#botonAñadir").click(function(){
          $("h1, h2, p").addClass("blue");
          $("div").addClass("grande");
      });      $("#botonBorrar").click(function(){
          $("h1, h2, p").removeClass("blue");
          $("div").removeClass("grande");
      });      $("#botonBorrar2").click(function(){
        $("h1, h2, p").toggleClass("blue");
        $("div").toggleClass("grande");
      });
  });
</script><style>
  .grande {
      font-weight: bold;
      font-size: 40px;
  }  .blue {
      color: blue;
  }
</style>
</head>
<body>  <h1>Encabezado tipo 1</h1>
  <h2>Encabezado tipo 2</h2>  <p>Texto del párrafo 1.</p>
  <p>Texto del párrafo 2.</p>  <div>Este es el texto grandote.</div><br>  <button id="botonAñadir">Añadir clases.</button>
  <button id="botonBorrar">Borrar clases.</button>
  <button id="botonBorrar2">Borrar clases 2.</button></body>
</html>

addClass() Crea una clase para un elemento seleccionado.
removeClass() Borra y clase para un elemento seleccionado.
toggleClass() Hace exactamente lo mismo que las dos instrucciones anteriores, es decir, crea la clase y la borra.

Modificando atributos CSS.

No sólo se puede cambiar los atributos HTML con Jquery, también nos podemos beneficiar que cambiar cualquier parámetro CSS. Si sintaxis es la siguiente:

elemento.css("propiedad")
elemento.css("propiedad","valor")
elemento.css({"propiedad":"valor","propiedad":"valor")}

Si sólo se le indica valor, devuelve el resultado de la propiedad.
Se puede cambiar sólo un atributo y la coma se usa para diferenciar la propiedad y el valor.
Si lo queremos hacer de forma múltiple, es decir, cambiar varias propiedades a la vez, usamos los dos puntos para diferenciar la propiedad y el valor, separando cada propiedad mediante la coma. Veamos unos ejemplos:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#boton1").click(function(){
        alert("Fondo = "+$("p").css("background-color"));
    });
    
    $("#boton2").click(function(){
        $("p").css("background-color", "yellow");
    });
    
    $("#boton3").click(function(){
        $("p").css({"background-color": "grey", 
                    "font-size": "200%"});
    });
  });
</script>
</head>
<body>  <h2>Encabezado tipo 2</h2>  <p style="background-color:#00ff00">This is a paragraph.</p>  <button id="boton1">Valor del fondo</button>
  <button id="boton2">Cambiar fondo</button>
  <button id="boton3">Cambiar Varios</button></body>
</html>

Otros atributos con los que podemos trabajar:

width() Te devuelve el Ancho.
height() Te devuelve el Largo.
innerWidth() Te devuelve el Ancho incluyendo el padding.
innerHeight() Te devuelve el Largo incluyendo el padding.
outerWidth() Te devuelve el Ancho incluyendo el padding y border.
outerHeight() Te devuelve el Largo incluyendo el padding y el border.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $("#boton1").click(function(){
      var txt = "";
      txt=txt + "Width: " + $("#resultados").width() + "</br>";
      txt=txt + "Height: " + $("#resultados").height() + "</br>";
      txt=txt + "Inner width: " + $("#resultados").innerWidth() + "</br>";
      txt=txt + "Inner height: " + $("#resultados").innerHeight() + "            </br>";
      txt=txt + "Outer: " + $("#resultados").outerWidth() + "</br>";
      txt=txt + "Outer: " + $("#resultados").outerHeight();
      $("#resultados").html(txt);
    });
    
    $("#boton2").click(function(){
        $("#resultados").width(500).height(500);
    });
  });</script>
<style>
  #resultados {
    height: 120px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: lightblue;
  }
</style>
</head>
<body>  <div id="resultados"></div>
  <br>  <button id="boton1">Dame los valores del div</button>
  <button id="boton2">Agranda div</button></body>
</html>

Como se ve en el ejemplo, width o height no sólo sirve para darnos el valor que tenga en el elemento seleccionado, también nos permite modificarlo de forma que hagamos más grande el <div>.

Continúa por Jquery Efectos.