Bienvenido sean a este post, hoy veremos como manipular atributos del DOM.
Si bien en posts anteriores hemos hablado sobre addClass y removeClass, las cuales agregan y remueven una clase respectivamente, y tambien a toggleClass con el cual podemos alternar entre mostrar y ocultar las clases permitiendo que tengamos a disposicion una forma extraordinaria para manejar las mismas, pero a su vez jQuery nos permite manipular los atributos tipo id, rel o href mediante el metodo attr y removerlos con el metodo removeAttr, pero para entender este concepto vamos a necesitar trabajar con un ejemplo y para ello vamos a crear un directorio y en este crearemos una serie de archivos, el primero se llamara libro.html y le agregaremos el siguiente codigo:
libro.html
<html>
<head>
<title>La sombra sobre Innsmouth</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="codigo.js"></script>
</head>
<body>
<div id="contenedor">
<h1 id="titulo">La sombra sobre Innsmouth</h1>
<div id="autor">por H.P. Lovecraft</div>
<h2>Capitulo 1</h2>
<div class="capitulo">
<p>Durante el invierno de 1927-28, los agentes del Gobierno Federal realizaron una extraña y secreta investigación sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>
<p>En cambio, a los más perspicaces les sorprendió el extraordinario número de detenciones, el desacostumbrado despliegue de fuerza pública que se empleó para llevarlas a cabo, y el silencio que impusieron las autoridades en torno a los detenidos. No hubo juicio, ni se llegó a saber tampoco de qué se les acusaba; ni siquiera fue visto posteriormente ninguno de los detenidos en las cárceles ordinarias del país. Se hicieron declaraciones imprecisas acerca de enfermedades y campos de concentración, y más tarde se habló de evasiones en varias prisiones navales y militares, pero nada positivo se reveló. La misma ciudad de <a href="https://es.wikipedia.org/wiki/Innsmouth">Innsmouth</a> se había quedado casi despoblada. Sólo ahora empiezan a manifestarse en ella algunas señales de lento renacer.</p>
<p>Las quejas formuladas por numerosas organizaciones liberales fueron acalladas tras largas deliberaciones secretas; los representantes de dichas sociedades efectuaron algunos viajes a ciertos campos y prisiones, y como consecuencia, tales organizaciones perdieron repentinamente todo interés por la cuestión. Más difíciles de disuadir fueron los periodistas; pero finalmente, acabaron por colaborar con el Gobierno. Sélo un periódico -un diario sensacionalista y de escaso prestigio por esta razón- hizo referencia a cierto submarino capaz de grandes inmersiones que torpedeó los abismos de la mar, justo detrás del <a href="https://hplovecraft.fandom.com/es/wiki/Arrecife_del_Diablo">Arrecife del Diablo</a>. Esta información, recogida casualmente en una taberna marinera, parecía un tanto fantástica ya que el arrecife, negro y plano, queda por lo menos a milla y media del puerto de Innsmouth.</p>
</div>
<div id="footer">
<p>Desde aqui puedes leer el <a href="https://web.seducoahuila.gob.mx/biblioweb/upload/Lovecraft,%20H.P.%20-%20La%20Sombra%20Sobre%20Innsmouth.pdf">relato completo</a></p>
</div>
</div>
</body>
</html>
Esta va a ser nuestra pagina base, es simple donde tendremos unos parrafos sobre los cuales trabajaremos, al comienzo hemos agregado primero el link que se encargara de cargar el archivo de estilo (estilo.css), despues cargaremos nuestra libreria de jQuery desde la pagina del sitio, y despues llamaremos al archivo donde estara nuestro codigo de jQuery con el cual trabajaremos, y por ultimo unos div con los cuales trabajaremos tambien, nuestro siguiente paso sera crear un archivo llamado estilo.css, en el mismo directorio, y le agregaremos el siguiente codigo:
estilo.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
a {
color: #06581f;
}Estos seran estilos simples para los elementos dentro de la pagina que creamos anteriormente, simplemente estableceremos tamaños de fuentes, margenes, algunos colores, y pequeños detalles para dar un mejor aspecto, ahora si comenzaremos con el tema de hoy y para ello crearemos un nuevo archivo con el nombre de codigo.js y le agregaremos el siguiente codigo inicial:
codigo.js
$(document).ready(function() {
$('div.capitulo a').attr({
rel: 'external',
title: 'Visita el sitio para saber mas'
});
});En este caso tomaremos todo los links que se encuentren en el div con la clase capitulo, a traves de la funcion attr, en este pasaremos un objeto de tipo coleccion donde pasaremos dos parametros, el primero es rel y el segundo sera el titulo para cuando nos posemos arriba de cualquiera de los links, con esto comentado si probamos la pagina actualmente cuando pasemos por un link nos saldra el siguiente mensaje:
Ahora tomemos el codigo anterior y modifiquemoslo de la siguiente manera:
$(document).ready(function() {
$('div.capitulo a').attr({
rel: 'external',
title: 'Visita el sitio para saber mas',
id: function(indice, viejo) {
return 'link-' + indice;
}
});
});Es similar al anterior pero agregamos un nuevo atributo, en este caso el id y utilizaremos una funcion anonima, los dos valores que tenemos de argumento representan el indice actual del elemento y el anterior respectivamente pero este segundo por el momento no lo usaremos, despues devolveremos como identificacion la palabra link seguida del valor en indice, para ver estos cambios deberan inspeccionar la pagina y veran lo siguiente en el tag del link:
Observen como se agregaron todos los atributos pero observen el id como se le agrego el indice correspondiente, con esto comentado volvamos al codigo anterior y hagamos la siguiente modificacion:
$(document).ready(function() {
$('div.capitulo a').attr({
rel: 'external',
title: function() {
return "Aprende sobre " + $(this).text()
+ " en este sitio.";
},
id: function(indice, viejo) {
return 'link-' + indice;
}
});
});En este caso tomamos el atributo title le quitamos el mensaje que mostraba y devolvemos un mensaje indicando que se puede aprender sobre donde apunta el link y para ello usamos a this y la funcion text para que tome el texto del link y lo ponga ahi, dando una mejor indicacion sobre cada link, si prueban la pagina y nos posamos sobre un link se vera de la siguiente forma
Como pueden ver de una forma muy practica podemos agregar atributos a los tags que necesitemos, antes de finalizar les dejo un archivo con el codigo final trabajado en este post:
En resumen, hoy hemos visto como manipular atributos de un tag, la funcion que nos permite esto, como se aplica, los efectos despues de aplicados en cada uno de los distintos casos que trabajamos, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 