javascript - vers - récupérer href jquery




Comment changer le href pour un lien hypertexte en utilisant jQuery (7)

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


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.


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/


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

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

Utilisez la méthode attr sur votre recherche. Vous pouvez remplacer n'importe quel attribut par une nouvelle valeur.

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

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.


$("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