Comment pouvez-vous changer le href pour un lien hypertexte en utilisant jQuery?

En utilisant

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

modifiera le href de tous les hyperliens pour pointer vers Google. Vous voulez probablement un sélecteur un peu plus raffiné. Par exemple, si vous avez un mélange de balises d'ancrage source de lien (hyperlien) et cible de lien (aka "ancre"):

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

... Dans ce cas, vous ne voudrez probablement pas leur ajouter accidentellement des hrefattributs. Pour des raisons de sécurité, nous pouvons spécifier que notre sélecteur ne fera correspondre les <a>balises qu'avec un hrefattribut existant :

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

Bien sûr, vous aurez probablement quelque chose de plus intéressant à l'esprit. Si vous souhaitez faire correspondre une ancre avec une existante spécifique href, vous pouvez utiliser quelque chose comme ceci:

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

Cela trouvera des liens où le hrefcorrespond exactement à la chaîne http://www.google.com/. Une tâche plus impliquée peut correspondre, puis mettre à jour uniquement une partie de href:

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

La première partie sélectionne liens uniquement lorsque le href commence avec http://stackoverflow.com. Ensuite, une fonction est définie qui utilise une simple expression régulière pour remplacer cette partie de l'URL par une nouvelle. Notez la flexibilité que cela vous donne - toute sorte de modification du lien pourrait être effectuée ici.

Avec jQuery 1.6 et supérieur, vous devez utiliser:

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

La différence entre propet attrest que attrsaisit l'attribut HTML tandis que propsaisit la propriété DOM.

Vous pouvez trouver plus de détails dans cet article: .prop () vs .attr ()

Utilisez la attrméthode lors de votre recherche. Vous pouvez changer n'importe quel attribut avec une nouvelle valeur.

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

Selon que vous souhaitez modifier tous les liens identiques en quelque chose d'autre ou que vous souhaitez contrôler uniquement ceux d'une section donnée de la page ou chacun individuellement, vous pouvez effectuer l'une d'entre elles.

Modifiez tous les liens vers Google afin qu'ils pointent vers Google Maps:

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

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

Pour modifier les liens dans une section donnée, ajoutez la classe div du conteneur au sélecteur. Cet exemple changera le lien Google dans le contenu, mais pas dans le pied de page:

<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/');

Pour modifier des liens individuels, quel que soit leur emplacement dans le document, ajoutez un identifiant au lien, puis ajoutez cet identifiant au sélecteur. Cet exemple modifie le deuxième lien Google dans le contenu, mais pas le premier ni celui du pied de page:

<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/');

_{Même si l'OP a explicitement demandé une réponse jQuery, vous n'avez pas besoin d'utiliser jQuery pour tout de nos jours.}

Quelques méthodes sans jQuery:

• Si vous souhaitez modifier la hrefvaleur de tous les <a> éléments, sélectionnez-les tous, puis parcourez la liste de nœuds : (exemple)

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

• Si vous souhaitez modifier la hrefvaleur de tous les <a>éléments qui ont réellement un hrefattribut, sélectionnez-les en ajoutant le [href]sélecteur d'attribut ( a[href]): (exemple)

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

• Si vous souhaitez modifier la hrefvaleur des <a>éléments qui contiennent une valeur spécifique, par exemple google.com, utilisez le sélecteur d'attribut a[href*="google.com"]: (exemple)

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

  De même, vous pouvez également utiliser les autres sélecteurs d'attributs . Par exemple:

  • a[href$=".png"]pourrait être utilisé pour sélectionner des <a>éléments dont la hrefvaleur se termine par .png.

  • a[href^="https://"]pourraient être utilisés pour sélectionner des <a>éléments avec des hrefvaleurs qui sont préfixées avec https://.

• Si vous souhaitez modifier la hrefvaleur des <a>éléments qui remplissent plusieurs conditions: (exemple)

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

..pas besoin de regex, dans la plupart des cas.

Cet extrait de code est invoqué lorsqu'un clic sur un lien de la classe 'menu_link' est affiché, et affiche le texte et l'url du lien. Le retour faux empêche le lien d'être suivi.

<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 manière la plus simple de le faire est:

Fonction Attr (depuis la version 1.0 de jQuery)

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

ou

Fonction Prop (depuis jQuery version 1.6)

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

En outre, l'avantage de la méthode ci-dessus est que si le sélecteur sélectionne une seule ancre, il mettra à jour cette ancre uniquement et si le sélecteur renvoie un groupe d'ancres, il mettra à jour le groupe spécifique via une seule instruction.

Maintenant, il existe de nombreuses façons d'identifier l'ancre exacte ou le groupe d'ancres:

Très simples:

1. Sélectionnez l'ancre via le nom de la balise: $("a")
2. Sélectionnez l'ancre via l'index: $("a:eq(0)")
3. Sélectionnez l'ancre pour des classes spécifiques (comme dans cette classe uniquement les ancres avec classe active):$("a.active")
4. Sélection d'ancres avec un ID spécifique (ici dans l'exemple d' profileLink ID):$("a#proileLink")
5. Sélection de la première ancre href: $("a:first")

Les plus utiles:

6. Sélection de tous les éléments avec l'attribut href: $("[href]")
7. Sélection de toutes les ancres avec href spécifique: $("a[href='www.stackoverflow.com']")
8. Sélection de toutes les ancres n'ayant pas de référence spécifique: $("a[href!='www.stackoverflow.com']")
9. Sélection de toutes les ancres avec href contenant une URL spécifique: $("a[href*='www.stackoverflow.com']")
10. Sélection de toutes les ancres avec href commençant par une URL spécifique: $("a[href^='www.stackoverflow.com']")
11. Sélection de toutes les ancres avec href se terminant par une URL spécifique: $("a[href$='www.stackoverflow.com']")

Maintenant, si vous souhaitez modifier des URL spécifiques, vous pouvez le faire comme suit:

Par exemple, si vous souhaitez ajouter un site Web proxy pour toutes les URL allant sur google.com, vous pouvez l'implémenter comme suit:

$("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);
    });
   });

Arrêtez d'utiliser jQuery juste pour le plaisir! C'est tellement simple avec JavaScript uniquement.

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");
   });

Changer le HREF de l'image du logo du thème Wordpress Avada

Si vous installez le plugin PHP ShortCode Exec, vous pouvez créer ce Shortcode que j'ai appelé myjavascript

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

Vous pouvez maintenant aller dans Apparence / Widgets et choisir l'une des zones de widget de pied de page et utiliser un widget de texte pour ajouter le shortcode suivant

[myjavascript]

Le sélecteur peut changer en fonction de l'image que vous utilisez et si elle est prête pour la rétine, mais vous pouvez toujours le découvrir à l'aide des outils de développement.

href dans un attribut, vous pouvez donc le changer en utilisant du JavaScript pur, mais si vous avez déjà injecté jQuery dans votre page, ne vous inquiétez pas, je vais le montrer dans les deux sens:

Imaginez que vous avez ceci hrefci - dessous:

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

Et vous aimez changer le lien ...

En utilisant du JavaScript pur sans bibliothèque, vous pouvez faire:

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

Mais aussi dans jQuery vous pouvez faire:

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

ou

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

Dans ce cas, si vous avez déjà injecté jQuery, probablement jQuery un look plus court et plus cross-browser ... mais à part ça, je vais avec JScelui ...