JQuery kullanarak bir köprü href nasıl değiştirebilirsiniz?

kullanma

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

tüm köprülerin href değerini Google'ı gösterecek şekilde değiştirir. Muhtemelen biraz daha rafine bir seçici istersiniz. Örneğin, bağlantı kaynağı (köprü) ve bağlantı hedefi ("bağlantı" olarak da bilinir) bağlantı etiketleri bir karışımınız varsa:

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

... O zaman muhtemelen hrefonlara yanlışlıkla özellikler eklemek istemezsiniz . Güvenlik için, seçicimizin yalnızca <a>mevcut bir hrefözelliğe sahip etiketlerle eşleşeceğini belirtebiliriz :

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

Elbette, aklınızda daha ilginç bir şey olacak. Bir çapayı mevcut belirli biriyle eşleştirmek istiyorsanız href, aşağıdakine benzer bir şey kullanabilirsiniz:

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

Bu href, dizeyle tam olarak eşleşen bağlantıları bulur http://www.google.com/. Daha ilgili bir görev eşleşiyor olabilir, ardından aşağıdakilerin yalnızca bir kısmını güncelleyebilir href:

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

Href nerede ilk bölümü seçer yalnızca bağlar başlar ile http://stackoverflow.com. Daha sonra, URL'nin bu kısmını yenisiyle değiştirmek için basit bir normal ifade kullanan bir işlev tanımlanır. Bunun size sağladığı esnekliğe dikkat edin - bağlantıda her türlü değişiklik burada yapılabilir.

JQuery 1.6 ve üstü ile şunları kullanmalısınız:

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

Arasındaki fark propve attrolmasıdır attroysa HTML niteliğini kapar propkapmak DOM özelliği.

Bu yayında daha fazla ayrıntı bulabilirsiniz: .prop () vs .attr ()

Aradığınızda attryöntemi kullanın . Herhangi bir özelliği yeni bir değerle kapatabilirsiniz.

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

Başka bir şeye ait tüm özdeş bağlantıları değiştirmek isteyip istemediğinize veya yalnızca sayfanın belirli bir bölümündeki veya her birinin ayrı ayrı olanları üzerinde kontrol sahibi olmak isteyip istemediğinize bağlı olarak, bunlardan birini yapabilirsiniz.

Tüm Google bağlantılarını Google Haritalar'ı gösterecek şekilde değiştirin:

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

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

Belirli bir bölümdeki bağlantıları değiştirmek için, kapsayıcı div sınıfını seçiciye ekleyin. Bu örnek, içerikteki Google bağlantısını değiştirecek ancak altbilgide değişmeyecektir:

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

Belgede nerede olurlarsa olsunlar tek tek bağlantıları değiştirmek için, bağlantıya bir kimlik ekleyin ve ardından bu kimliği seçiciye ekleyin. Bu örnek, içerikteki ikinci Google bağlantısını değiştirecek, ancak altbilgideki ilk veya birinciyi değiştirmeyecektir:

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

_{OP açıkça bir jQuery cevabı istemesine rağmen, bu günlerde her şey için jQuery kullanmanıza gerek yok.}

JQuery olmadan birkaç yöntem:

• Eğer değiştirmek istiyorsanız hrefdeğerini tüm <a> unsurları aracılığıyla tüm ve sonra yinelemeyi onları seçin nodelist : (örnek)

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

• Gerçekten bir özniteliği hrefolan tüm <a>öğelerin değerini değiştirmek istiyorsanız href, [href]öznitelik seçicisini ( a[href]) ekleyerek bunları seçin : (örnek)

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

• Örneğin , belirli bir değer içeren öğelerin hrefdeğerini değiştirmek istiyorsanız , öznitelik seçiciyi kullanın : (örnek)<a>google.coma[href*="google.com"]

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

  Benzer şekilde, diğer özellik seçicileri de kullanabilirsiniz . Örneğin:

  • a[href$=".png"]değeri ile biten <a>öğeleri seçmek için kullanılabilir .href.png

  • a[href^="https://"]seçmek için kullanılabilecek <a>olan unsurları hrefdeğerlere öneki ile https://.

• Birden çok koşulu karşılayan öğelerin hrefdeğerini değiştirmek istiyorsanız <a>: (örnek)

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

Çoğu durumda normal ifadeye gerek yoktur .

Bu snippet, 'menu_link' sınıfının bir bağlantısı tıklatıldığında çağrılır ve bağlantının metni ve URL'si gösterilir. Return false, bağlantının izlenmesini önler.

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

Bunu yapmanın basit yolu:

Attr işlevi (jQuery sürüm 1.0'dan beri)

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

veya

Prop işlevi (jQuery sürüm 1.6'dan beri)

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

Ayrıca, yukarıdaki yolun avantajı, seçici tek bir bağlantı seçerse, yalnızca bu bağlantıyı güncelleyecek ve seçici bir bağlantı grubu döndürürse, belirli grubu yalnızca bir deyimle güncelleyecektir.

Şimdi, tam çapayı veya çapa grubunu tanımlamanın birçok yolu var:

Oldukça Basit Olanlar:

1. Etiket adıyla bağlantı seçin: $("a")
2. Dizinden çapa seçin: $("a:eq(0)")
3. Belirli sınıflar için çapa seçin (bu sınıfta olduğu gibi yalnızca sınıflı çapalar active ):$("a.active")
4. Belirli bir kimliğe sahip bağlantıların seçilmesi (burada örnek olarak) profileLink kimliğinde):$("a#proileLink")
5. İlk çapa href'in seçilmesi: $("a:first")

Daha faydalı olanlar:

6. Href özelliğine sahip tüm öğeleri seçme: $("[href]")
7. Belirli href ile tüm çapaları seçme: $("a[href='www.stackoverflow.com']")
8. Belirli bir href içermeyen tüm çapaların seçilmesi: $("a[href!='www.stackoverflow.com']")
9. Belirli bir URL içeren href içeren tüm bağlantıların seçilmesi: $("a[href*='www.stackoverflow.com']")
10. Belirli bir URL ile başlayan href ile tüm çapaları seçme: $("a[href^='www.stackoverflow.com']")
11. Belirli bir URL ile biten href içeren tüm çapaları seçme: $("a[href$='www.stackoverflow.com']")

Şimdi, belirli URL'leri değiştirmek istiyorsanız, bunu şu şekilde yapabilirsiniz:

Örneğin, google.com'a gidecek tüm URL'ler için proxy web sitesi eklemek istiyorsanız, aşağıdaki gibi uygulayabilirsiniz:

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

Sadece uğruna jQuery kullanmayı bırakın! Bu yalnızca JavaScript ile çok basittir.

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

Wordpress Avada Theme Logo Resim HREF'ini değiştirme

ShortCode Exec PHP eklentisini kurarsanız, myjavascript olarak adlandırdığım bu Kısa Kodu oluşturabilirsiniz

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

Artık Görünüm / Pencere Öğeleri'ne gidip altbilgi pencere öğesi alanlarından birini seçebilir ve aşağıdaki kısa kodu eklemek için bir metin pencere öğesi kullanabilirsiniz

[myjavascript]

Seçici, kullandığınız görüntüye ve retinaya hazır olup olmadığına bağlı olarak değişebilir, ancak her zaman geliştirici araçlarını kullanarak anlayabilirsiniz.

href bir özellikte, bu yüzden saf JavaScript kullanarak değiştirebilirsiniz, ancak sayfanıza zaten jQuery enjekte edildiyse, endişelenmeyin, her iki şekilde de göstereceğim:

hrefAşağıdakilere sahip olduğunuzu düşünün :

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

Ve bağlantıyı değiştirmek istiyorsun ...

Herhangi bir kütüphane olmadan saf JavaScript kullanarak şunları yapabilirsiniz:

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

Ama ayrıca jQuery'de şunları yapabilirsiniz:

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

veya

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

Bu durumda, zaten jQuery enjekte varsa, muhtemelen jQuery bir daha kısa ve daha çapraz tarayıcı bakmak ... ama bunun dışında ben ile gitmek JS...