¿Cómo puede cambiar el href para un hipervínculo usando jQuery?

Utilizando

$("a").attr("href", "http://www.google.com/")

modificará la href de todos los hipervínculos para apuntar a Google. Sin embargo, es probable que desee un selector algo más refinado. Por ejemplo, si tiene una combinación de etiquetas de anclaje de origen de enlace (hipervínculo) y destino de enlace (también conocido como "ancla"):

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

... Entonces probablemente no quieras agregarles hrefatributos accidentalmente . Por seguridad, entonces, podemos especificar que nuestro selector solo hará coincidir las <a>etiquetas con un hrefatributo existente :

$("a[href]") //...

Por supuesto, probablemente tengas algo más interesante en mente. Si desea hacer coincidir un ancla con una existente específica href, puede usar algo como esto:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Esto encontrará enlaces donde hrefcoincide exactamente con la cadena http://www.google.com/. Una tarea más complicada podría ser la coincidencia y luego actualizar solo una parte de href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Los selecciona primera parte establece enlaces sólo donde el href comienza con http://stackoverflow.com. Luego, se define una función que utiliza una expresión regular simple para reemplazar esta parte de la URL con una nueva. Tenga en cuenta la flexibilidad que esto le brinda: cualquier tipo de modificación al enlace se podría hacer aquí.

Con jQuery 1.6 y superior, debe usar:

$("a").prop("href", "http://www.jakcms.com")

La diferencia entre propy attres que attrtoma el atributo HTML mientras que proptoma la propiedad DOM.

Puedes encontrar más detalles en esta publicación: .prop () vs .attr ()

Use el attrmétodo en su búsqueda. Puede cambiar cualquier atributo con un nuevo valor.

$("a.mylink").attr("href", "http://cupcream.com");

Dependiendo de si desea cambiar todos los enlaces idénticos a otra cosa o si desea controlar solo los que están en una sección determinada de la página o cada uno individualmente, puede hacer uno de estos.

Cambie todos los enlaces a Google para que apunten a Google Maps:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Para cambiar los enlaces en una sección determinada, agregue la clase div del contenedor al selector. Este ejemplo cambiará el enlace de Google en el contenido, pero no en el pie de página:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Para cambiar enlaces individuales independientemente de dónde se encuentren en el documento, agregue una identificación al enlace y luego agregue esa identificación al selector. Este ejemplo cambiará el segundo enlace de Google en el contenido, pero no el primero o el del pie de página:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

_{A pesar de que el OP solicitó explícitamente una respuesta jQuery, no necesita usar jQuery para todo en estos días.}

Algunos métodos sin jQuery:

• Si desea cambiar el hrefvalor de todos los <a> elementos, selecciónelos todos y luego repita la lista de nodos : (ejemplo)

  var anchors = document.querySelectorAll('a');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

• Si desea cambiar el hrefvalor de todos los <a>elementos que realmente tienen un hrefatributo, selecciónelos agregando el [href]selector de atributos ( a[href]): (ejemplo)

  var anchors = document.querySelectorAll('a[href]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

• Si desea cambiar el hrefvalor de los <a>elementos que contienen un valor específico, por ejemplo google.com, use el selector de atributos a[href*="google.com"]: (ejemplo)

  var anchors = document.querySelectorAll('a[href*="google.com"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

  Del mismo modo, también puede usar los otros selectores de atributos . Por ejemplo:

  • a[href$=".png"]podría usarse para seleccionar <a>elementos cuyo hrefvalor termine con .png.

  • a[href^="https://"]podría usarse para seleccionar <a>elementos con hrefvalores con el prefijohttps:// .

• Si desea cambiar el hrefvalor de los <a>elementos que satisfacen múltiples condiciones: (ejemplo)

  var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
  Array.prototype.forEach.call(anchors, function (element, index) {
      element.href = "http://stackoverflow.com";
  });

..no hay necesidad de expresiones regulares, en la mayoría de los casos.

Este fragmento se invoca cuando se hace clic en un enlace de la clase 'menu_link', y muestra el texto y la URL del enlace. El retorno falso evita que se siga el enlace.

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

La forma simple de hacerlo es:

Función Attr (desde jQuery versión 1.0)

$("a").attr("href", "https://stackoverflow.com/") 

o

Función prop (desde jQuery versión 1.6)

$("a").prop("href", "https://stackoverflow.com/")

Además, la ventaja de la forma anterior es que si el selector selecciona un solo ancla, actualizará ese ancla solamente y si el selector devuelve un grupo de ancla, actualizará el grupo específico a través de una sola declaración.

Ahora, hay muchas maneras de identificar el ancla o grupo de anclajes exactos:

Muy simples:

1. Seleccione el ancla a través del nombre de la etiqueta: $("a")
2. Seleccionar ancla a través del índice: $("a:eq(0)")
3. Seleccione el ancla para clases específicas (como en esta clase solo las anclas con clase active):$("a.active")
4. Selección de anclas con ID específica (aquí en profileLink ID de ejemplo ):$("a#proileLink")
5. Selección del primer ancla href: $("a:first")

Más útiles:

6. Selección de todos los elementos con atributo href: $("[href]")
7. Selección de todos los anclajes con href específico: $("a[href='www.stackoverflow.com']")
8. Seleccionar todos los anclajes que no tienen href específicos: $("a[href!='www.stackoverflow.com']")
9. Selección de todos los anclajes con href que contiene URL específica: $("a[href*='www.stackoverflow.com']")
10. Selección de todos los anclajes con href que comienzan con una URL específica: $("a[href^='www.stackoverflow.com']")
11. Selección de todos los anclajes con href que terminan con una URL específica: $("a[href$='www.stackoverflow.com']")

Ahora, si desea modificar URL específicas, puede hacerlo como:

Por ejemplo, si desea agregar un sitio web proxy para todas las URL que van a google.com, puede implementarlo de la siguiente manera:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });

¡Deja de usar jQuery por el simple hecho de hacerlo! Esto es tan simple solo con JavaScript.

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Cambiar el HREF de la imagen del logotipo de Wordpress Avada Theme

Si instala el complemento PHP ShortCode Exec, puede crear este Shortcode que llamé myjavascript

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

Ahora puede ir a Apariencia / Widgets y elegir una de las áreas de widgets de pie de página y usar un widget de texto para agregar el siguiente shortcode

[myjavascript]

El selector puede cambiar según la imagen que esté usando y si está lista para la retina, pero siempre puede resolverlo utilizando herramientas de desarrolladores.

href en un atributo, para que pueda cambiarlo usando JavaScript puro, pero si ya tiene jQuery inyectado en su página, no se preocupe, lo mostraré en ambos sentidos:

Imagina que tienes esto a hrefcontinuación:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

Y te gusta cambiarlo el enlace ...

Usando JavaScript puro sin ninguna biblioteca puedes hacer:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

Pero también en jQuery puedes hacer:

$("#ali").attr("href", "https://stackoverflow.com");

o

$("#ali").prop("href", "https://stackoverflow.com");

En este caso, si ya ha inyectado jQuery, probablemente jQuery one se vea más corto y más cruzado ... pero aparte de eso, voy con el JS...