javascript vers Comment changer le href pour un lien hypertexte en utilisant jQuery




récupérer href jquery (8)

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


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

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

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


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

Quelques méthodes sans jQuery:

  • Si vous souhaitez modifier la valeur href de tous les éléments <a> , sélectionnez-les tous, puis parcourez la liste de nodelist : (example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • Si vous voulez changer la valeur href de tous les éléments <a> qui ont un attribut href , sélectionnez-les en ajoutant le sélecteur d'attribut [href] ( a[href] ): (example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • Si vous souhaitez modifier la valeur href des éléments <a> contenant une valeur spécifique, par exemple google.com , utilisez l'attribut selector a[href*="google.com"] : (example)

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

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

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

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

  • Si vous voulez changer la valeur href des éléments <a> qui satisfont plusieurs conditions: (example)

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

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


Cet extrait appelle lorsqu'un lien de la classe 'menu_link' est cliqué et affiche le texte et l'URL du lien. Le retour false empêche le suivi du lien.

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

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

Changez tous les liens vers Google pour 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 va changer 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 va changer le deuxième lien Google dans le contenu, mais pas le premier ou le 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/');

Changer le HREF du Wordpress Image du thème du thème 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 Appearance / Widgets et choisir l'une des zones du widget pied de page et utiliser un widget texte pour ajouter le shortcode suivant

[myjavascript]

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


Le moyen simple de le faire est:

Fonction Attr (depuis jQuery version 1.0)

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

ou

Fonction Prop (depuis la version 1.6 de jQuery)

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

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

Maintenant, il y a beaucoup de manières d'identifier l'ancre exacte ou le groupe d'ancres:

Assez simples:

  1. Sélectionnez l'ancre via le nom du tag: $("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 la classe active ): $("a.active")
  4. Sélection d'ancres avec un ID spécifique (ici dans l'exemple ID profileLink ): $("a#proileLink")
  5. Sélection de la première ancre href: $("a:first")

Plus utiles:

  1. Sélection de tous les éléments avec l'attribut href: $("[href]")
  2. Sélection de toutes les ancres avec href spécifique: $("a[href='www..com']")
  3. Sélection de toutes les ancres n'ayant pas d'href spécifique: $("a[href!='www..com']")
  4. Sélection de toutes les ancres avec href contenant une URL spécifique: $("a[href*='www..com']")
  5. Sélection de toutes les ancres avec href en commençant par une URL spécifique: $("a[href^='www..com']")
  6. Sélection de toutes les ancres avec href se terminant par une URL spécifique: $("a[href$='www..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 qui vont 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);
    });
   });

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

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

La différence entre prop et attr est que attr attrape l'attribut HTML où prop prend la propriété DOM.

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


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

... va modifier le href de tous les liens hypertexte pour pointer vers Google. Vous voulez probablement un sélecteur un peu plus raffiné cependant. Par exemple, si vous disposez d'une combinaison de balises d'ancrage de lien (lien hypertexte) et de cible de lien (alias «ancre»):

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

... Alors vous ne voulez probablement pas ajouter accidentellement des attributs href à eux. Pour des raisons de sécurité, nous pouvons spécifier que notre sélecteur ne fera correspondre les balises <a> qu'avec un attribut href existant:

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

Bien sûr, vous aurez probablement quelque chose de plus intéressant à l'esprit. Si vous voulez faire correspondre une ancre avec un href existant spécifique, 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 href correspond exactement à la chaîne http://www.google.com/ . Une tâche plus complexe pourrait correspondre, puis mettre à jour seulement une partie du href :

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

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





hyperlink