Configuración de href de anclaje mediante jquery frente al elemento de dom nativo

De dos de las respuestas a esta pregunta surgió una pregunta mía.

Dado

 

use jQuery para cambiar el ancla de enseñanza a

  

Hubo dos respuestas casi idénticas:

 $('a[href^="#"]').each(function(index, element){ var $ele = $(element), oldHref = $ele.attr('href'); $ele.attr('href', '//example.com/page'+ oldHref); }); 

y

 $('a[href^="#"]').each(function(i,el){ el.href = "http://www.example.com/pageslug" + el.href; }); 

El que envuelve el elemento dom nativo a un objeto jQuery da el resultado esperado, mientras que el que usa la propiedad “.href” no lo hace. ( Violín )

¿Qué está pasando con .href allí?

element.href devuelve la propiedad href del elemento, que es una URL absoluta, mientras que attr('href') devuelve lo que está en el atributo, esa es la diferencia.

  

 element.href // returns absolute URL, as in http://stackoverflow.com#test $(element).prop('href') // jQuery version of the above, returns absolute URL element.getAttribute('href') // returns the attributes value, as in #test $(element).attr('href') // jQuery version of getAttribute, returns #test