jQuery – Conseguir el valor href de un enlace

Con la librería JavScript jQuery, podemos capturar el atributo href de un enlace. Veamos varios ejemplos de cómo hacerlo. Aquí tenéis el artículo jQuery – Conseguir el valor href de un enlace:

En el primer ejemplo, vamos a ver cómo una vez cargado el documento, al hacer click sobre elementos de enlace (etiqueta <a>) vamos a capturar el valor de su atributo href y lo vamos a mostrar como alerta.

Veamos el primer ejemplo:

$(document).ready(function() {
  $("a").click(function(event) {
    var href = $('a').attr('href');
    alert(href);
    event.preventDefault();
  });
});

Todos los eventos de los elementos enlace, serán capturados y ejecutado el código. En el ejemplo. como podéis ver, a todos los enlaces del web, miramos el valor de href y lo mostramos en un alert.

Pero, veamos cómo podemos contretar un poco mas con sólo los enlaces que nos pueda interesar. Fijaos en el siguiente enlace al que le hemos añadido la clase zonalink:

<a href="https://blog.trescomatres.com" target="_blank" class="zonalink">Mi enlace</a>

Pues en el siguiente código podéis ver como capturamos el evento click a los elementos con clase zonalink:

$(".zonalink").click(function(event) {
  var href= $(this).attr('href');
  alert(href);
  event.preventDefault();
});

Como hemos comentado, en este caso, sólo a los enlaces con clase .zonalink se mostrará el link. Fijaos que utilizamos $(this).attr(‘href’). El this se refiere al enlace que hace saltar el evento. Los enlaces a los que se le aplicaría, son a los del estilo:

Espero que os sea de utilidad el artículo: jQuery – Conseguir el valor href de un enlace


Más información