02 Ago Como consultar y/o modificar los atributos de un nodo web con jQuery
Anteriormente hemos aprendido a consultar y modificar el html y el css de nodos web con jQuery.
En esta entrada veremos como consultar y modificar o insertar los atributos de las etiquetas.
Repasemos previamente que es un atributo.
Repaso. ¿Qué es un atributo?
Un atributo es cualquier información complementaria que acompaña a una etiqueta web.
Ejemplos de atributos web son:
href, alt, title, id, class, value, placeholder, name, style, …
Podéis consultar una lista completa en este enlace.
Por ejemplo en la imagen anterior tenemos los atributos:
- href, title, target, rel
La idea es que mediante javascript o jquery podemos bien consultar su valor o modificarlos a nuestro antojo.
Veamos como se hace.
Consultar el valor de los atributos de una etiqueta html
Dado el siguiente html:
<a href="/tutorial-html" class="enlace-1">soy el enlace 1</a>
<a href="/tutorial-css" class="enlace-2">soy el enlace 2</a>
<a href="/tutorial-javascript" class="enlace-3">soy el enlace 3</a>
<a href="/tutorial-jquery" class="enlace-4">soy el enlace 4</a>
<a href="/tutorial-wordpress" class="enlace-5">soy el enlace 5</a>
<a href="/tutorial-php" class="enlace-6">soy el enlace 6</a>Y el siguiente jQuery:
var enlaces = $("a");
enlaces.css({
"display":"inline-block",
"border":"1px solid #000",
"padding":"10px"
});Como se hace en jQuery
Veamos el resultado por la consola del navegador de la siguiente expresión:
//JQuery
//preguntar el valor del atributo href del nodo que ocupa la tercera posición.
enlaces.eq(2).attr("href");
Como se haría en Javascript partiendo de $
Veamos el resultado por la consola del navegador de la siguiente expresión:
//En JS
enlaces[1].href
enlaces[2].href
//En JQ
enlaces.eq(1).attr("href")
enlaces.eq(2).attr("href")
Fijaros que la información que obtenemos es muy parecida en javascript y en jquery aunque ligeramente distinta.
Modificar el valor de los atributos
Para modificar el valor del atributo de un nodo la nomenclatura cambia un poco.
Se pueden dar dos casos:
- Que deseemos modificar una única propiedad por instrucción.
- Que modifiquemos varios atributos a la vez.
Es muy similar a cuando queríamos modificar con jquery el css de cualquier etiqueta web.
Como se hace en jQuery
Para modificar propiedades de una en una escribiremos:
//de una en una
enlaces.attr("href","https://google.es");
enlaces.attr("target","_self");
enlaces.attr("title","te redirigirá a google");Para modificar todas a la vez escribiremos:
//varias a la vez
enlaces.css({
"href":"inline-block",
"target":"_self",
"title":"te redirigirá a google"
});Fijaros que en el caso de todo los atributos a la vez en una única instrucción se usa la nomenclatura de una variable de tipo objeto y que todos los campos son de tipo string.
Muy importante, las informaciones separan con coma (,) excepto el último (title).
Usando a $ pero instrucciones de Javascript
jQuery nos permite modificar todos los enlaces de golpe.
Sin embargo en javascript debíamos ir de enlace en enlace
for (var i = 0; i < enlaces.length; i++) {
enlaces[i].href= "https://google.es";
enlaces[i].target = "_self";
enlaces[i].title = "te redirigirá a google";
}A mi modo de ver un ejemplo poco práctico pero útil académicamente.
Para modificar un nodo concreto bastaría con intermediar la instrucción.eq(2) para el enlace 3 como ejemplo.
jQuery permite ahorrar muchas líneas de código y complejidad.
Sin embargo, una vez más incidir en que aprender javascript es imprescindible.
Resistir la tentación de usar jQuery si todavía no domináis como se escribe en Javascript puro.
Modificar o consultar el valor de un input en un formulario web
Un input no deja de ser un atributo más.
Aplica exactamente todo lo aprendido anteriormente.
El atributo que contiene el valor de un input es value.
Dado el siguiente html:
<input type="text" value="francesc" name="nombre">Podríamos usar la misma estrategia para consultar el valor del atributo value y/o modificarlo.
Sin embargo existe otra instrucción .val() más apropiada y sobre la que hablaremos en una futura publicación.
La diferencia entre .val() y .attr() la podéis encontrar en este hilo de stackoverflow.
¡Hola!
Querido lector,
Deseo que esta publicación te resulte de utilidad para no liarte entre javascript y jquery.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Ejemplo práctico de como desactivar el envío de un formulario que pide aceptación RGPD (antigua LOPD) mediante jQuery y preventDefault()
Es importante no liarse con Javascript. Se explica como modificar el css mediante jquery y sin perder de vista el JS puro.
Ejercicio dónde se resuelve el típico caso de lista de la compra con jQuery. Incluye solución.
Ejercicio jQuery en el que se plantea escribir un accordion. Incluye solución y explicación.
El primer paso para empezar a escribir jQuery es tener la certeza de que la librería efectivamente se está cargando. No serías el primero que lo hace todo bien pero no le funciona nada porqué le falla...
Como funciona la instrucción html() de jQuery y porqué no podemos usar innerHTML(). ¿Como deberíamos hacerlo para si poderla usar?
No Comments