jQuery es ideal para manipular elementos en una página web. Pero para usarlo efectivamente, necesitas saber qué elemento es y qué funciones de jQuery (jQ) se puede usar en los elementos que desea manipular. En este artículo, voy a mostrar los elementos más comunes y cómo puedes usar jQ para obtener y establecer valores de elementos.
También te mostrare cómo obtener y configurar el código HTML en el interior un elemento HTML para cambiar el contenido de su página web.
jQuery te permite interactuar y manipular elementos en sus páginas web. Los elementos HTML componen las páginas HTML y se indican con etiquetas, que son letras o palabras entre corchetes angulares, < y >. Por ejemplo, la etiqueta HTML <img> es un elemento de imagen.
Resumen de elementos
En el siguiente código HTML,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Mi página de prueba</title>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert(jQuery('img').attr('height'));
});
</script>
</head>
<body>
<p>Esta es mi página para testear.</p>
<img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen.">
</body>
</html>
Este código contiene ocho elementos, que analizo en la próxima sección, HTML comunes: <html> </html>, <head> </head>, <title> </title>, <script> </script> (usado dos veces), <body> </body>, <img>,y <p> </p>.
Cuando abre este contenido en un navegador (vea la Figura 2-1), lo único visible son los elementos título, el texto en el elemento <p> y el cuadro de alerta de la función jQ en el segundo elemento <script>.
Con la excepción del elemento <html> que rodea todo lo demás en el código HTML, los elementos siempre se anidan dentro de otros elementos. Por ejemplo, la línea de texto, “Esta es mi página para testear.” está dentro de las etiquetas <p> </p>, que están dentro de las etiquetas <body>, que están dentro de las etiquetas <html>.
Cuando pienses en elementos, ten en cuenta estas reglas de orden:
✓ Un elemento dentro de otro elemento es el elemento secundario del elemento externo.
✓ El elemento externo es el padre del elemento interno.
✓ Un elemento individual puede, y a menudo es, simultáneamente ser padre e hijo.
Elementos HTML comunes
Es posible que ya estés familiarizado con HTML. Si no, aquí hay una mirada más cercana a algunos de los elementos HTML más comunes que debes conocer:
✓ <html> </html>: Le dice al navegador web que todo dentro de las etiquetas debe considerarse una página web.
✓ <head> </head>: Contiene información que controla cómo está la página desplegada. Elementos responsables del código JavaScript y CSS. Llamadas a otros archivos generalmente se colocan entre estas etiquetas.
✓ <title> </title>: Contiene el título de la página web, que se muestra en barra de título en la parte superior del navegador.
✓ <body> </body>: Contiene todo el contenido de la página.
✓ <style> </style>: Controla la apariencia y el comportamiento de los elementos en una página web.
✓ <script> </script>: Hace que JavaScript y otro código especificado estén disponibles, ya sea llamando a un archivo o colocando código entre estas etiquetas. jQuery es incluido en la página con esta etiqueta.
✓ <strong> </strong>: Convierte en negrita cualquier texto dentro de la etiqueta.
✓ <h1> </h1>: Crea texto de encabezado.
✓ <div> </div>: Crea un contenedor de contenido.
✓ <p> </p>: Crea un párrafo.
✓ <a> </a>: Crea un hipervínculo.
✓ <img />: Muestra una imagen. Ten en cuenta que esta etiqueta no tiene una etiqueta de cierre, por lo que se utiliza un carácter de barra dentro de la etiqueta para indicar el final de la etiqueta.
✓ <form> </form>: Crea un formulario web que puede enviar información por el usuario a otra página web que puede procesar esta información.
✓ <input> </input>: Crea un elemento de formulario, como un botón de opción, cuadro texto de entrada, o un botón “Enviar”. Se usa como un elemento secundario dentro de <form></form>
✓ <br />: Inserta un salto de línea. No se necesita una etiqueta de final coincidente.
✓ <table> </table>: Crea una tabla, junto con etiquetas secundarias <tr> </tr> y <td> </td>.
Obteniendo y Configurando Valores de Elemento
jQ te permite obtener y establecer valores asociados con sus elementos. En esta sección, escribo los valores de los atributos de los elementos y muestro cómo obtenerlos y cómo cambiar los elementos estableciendo valores para ellos con jQ.
Una característica de jQuery que lo hace tan poderoso es que te permite manipular los valores de los atributos de los elementos. Un atributo es una palabra de código HTML que controla un aspecto del elemento. Por ejemplo, considera este elemento <img>:
<img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen.">
Esta línea de código tiene los siguientes cuatro atributos:
✓ src: La URL o ubicación del archivo de imagen para mostrar
✓ height: La altura de la imagen en píxeles
✓ width: El ancho de la imagen en píxeles
✓ alt: El texto que aparece en lugar de una imagen si no es posible mostrarla.
Estos son algunos de los muchos valores de atributo posibles que un elemento <img> puede tener. Otros elementos tienen diferentes atributos. El valor de un atributo es el texto que sigue al signo igual después del nombre del atributo. Este valor generalmente está rodeado por comillas dobles. Por ejemplo, en el elemento <img> anterior, el atributo de altura tiene un valor de 28.
Obteniendo valores de atributo de un elemento
Si quieres el valor de un atributo, puedes usar la función jQuery attr(). La función attr() toma el nombre de un atributo como argumento, como attr('src'), y la función da el valor de ese atributo, es decir, la información en el lado derecho del signo igual.
En esta línea de código:
var imageSource = $('img').attr('src');
Para usar el método attr(), llama a un método de función en la biblioteca jQuery. Debes incluir una llamada al nombre de la función jQ en tu código. La función $ le dice al navegador que use la función jQ y especifica en qué elemento estás interesado. El $ es una forma abreviada de llamar a jQ. La siguiente línea de código funciona de la misma manera que el código anterior:
imageSource = jQuery('img').attr('src');
Este código almacena el valor del atributo src de un elemento <img> en la variable imageSource.
Una variable es un lugar para almacenar valores. Piensa en una variable como una caja que contiene lo que está al otro lado del signo =. En el ejemplo anterior, creé una variable llamada imageSource y almacenaba en ella lo que sea que esté en el atributo src de la etiqueta <img>.
En los siguientes pasos, obtienes el valor del atributo src. Entonces lo guardas en una variable y muéstralo en un cuadro de alerta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Mi página de prueba</title>
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var imageFile = $('img').attr('src');
alert (imageFile);
});
</script>
</head>
<body>
<p>Esta es mi página para testear.</p>
<img src="/imagenes/win10.png" height="28" width="28" alt="Esto es una prueba de imagen.">
</body>
</html>
La primera línea dice, obtener el valor del atributo src para el elemento <img> y guárdalo en la variable imageFile. La segunda línea dice, mostrar en un cuadro de alerta el valor almacenado en la variable imageFile.
{ctype_code_a}var imageFile = $('img').attr('src');
alert (imageFile);
Puedes nombrar tus variables como desees, siempre que el nombre no contenga espacios ni caracteres especiales. Utiliza las letras y evita números. Lo mejor es darle a tus variables nombres significativos, para que recuerdes el propósito de cada variable.
Guarde el código anterior en un archivo y luego ábrelo en un navegador Web. Verás un cuadro de alerta que muestra el directorio de origen y el nombre de archivo de la imagen en la página, como se muestra en la Figura 1.
Figura 1
Mostrar un valor de atributo en un cuadro de alerta no es un truco particularmente útil. Pero el punto aquí es entender cómo obtener esos valores y almacenarlos en variables.
Hay reglas específicas para nombrar variables:
✓ Los nombres de las variables de JavaScript pueden comenzar por una letra, el carácter $ o un guion bajo.
✓ Los nombres solo pueden contener letras, números, el carácter $ y guiones bajos, no puede contener espacios en blanco u otros caracteres especiales.
✓ No se pueden usar palabras reservadas como nombres de variable.
