คุณจะเปลี่ยน href สำหรับไฮเปอร์ลิงก์โดยใช้ jQuery ได้อย่างไร?

การใช้

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

จะแก้ไข href ของไฮเปอร์ลิงก์ทั้งหมดเพื่อชี้ไปที่ Google คุณอาจต้องการตัวเลือกที่ค่อนข้างละเอียดกว่านี้ ตัวอย่างเช่นหากคุณมีแท็ก anchor (ไฮเปอร์ลิงก์) และลิงค์เป้าหมาย (หรือที่รู้จักว่า "anchor") แท็ก anchor:

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

... จากนั้นคุณอาจไม่ต้องการเพิ่มแอhrefททริบิวต์เหล่านั้นโดยไม่ตั้งใจ เพื่อความปลอดภัยเราสามารถระบุได้ว่าตัวเลือกของเราจะจับคู่<a>แท็กกับhrefแอตทริบิวต์ที่มีอยู่เท่านั้น:

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

แน่นอนคุณอาจมีสิ่งที่น่าสนใจในใจมากขึ้น หากคุณต้องการจับคู่สมอกับที่มีอยู่hrefแล้วคุณอาจใช้สิ่งนี้:

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

นี้จะพบการเชื่อมโยงที่ตรงกับสตริงhref http://www.google.com/งานที่เกี่ยวข้องมากขึ้นอาจเป็นการจับคู่จากนั้นอัปเดตเฉพาะบางส่วนของhref:

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

ที่เลือกส่วนแรกเพียงการเชื่อมโยงที่ที่ href เริ่มต้นhttp://stackoverflow.comด้วย จากนั้นมีการกำหนดฟังก์ชันที่ใช้นิพจน์ทั่วไปอย่างง่ายเพื่อแทนที่ส่วนนี้ของ URL ด้วยอันใหม่ โปรดทราบความยืดหยุ่นนี้ช่วยให้คุณ - การปรับเปลี่ยนใด ๆ กับลิงค์สามารถทำได้ที่นี่

ด้วย jQuery 1.6 ขึ้นไปคุณควรใช้:

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

ความแตกต่างระหว่างpropและattrคือattrคว้าแอตทริบิวต์ HTML ในขณะที่propคว้าคุณสมบัติ DOM

คุณสามารถค้นหารายละเอียดเพิ่มเติมได้ในโพสต์นี้: .prop () vs .attr ()

ใช้attrวิธีการในการค้นหาของคุณ คุณสามารถสลับคุณลักษณะใด ๆ ด้วยค่าใหม่

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

ขึ้นอยู่กับว่าคุณต้องการเปลี่ยนลิงค์ที่เหมือนกันทั้งหมดเป็นอย่างอื่นหรือคุณต้องการควบคุมเพียงแค่ลิงค์ในส่วนที่กำหนดของหน้าหรือแต่ละทีคุณสามารถทำได้อย่างใดอย่างหนึ่ง

เปลี่ยนลิงก์ทั้งหมดไปยัง Google เพื่อให้ชี้ไปที่ Google Maps:

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

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

ในการเปลี่ยนลิงค์ในส่วนที่กำหนดให้เพิ่มคลาสของคอนเทนเนอร์ div เข้ากับตัวเลือก ตัวอย่างนี้จะเปลี่ยนลิงก์ของ Google ในเนื้อหา แต่ไม่ได้อยู่ในส่วนท้าย:

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

ในการเปลี่ยนแต่ละลิงก์ไม่ว่าจะอยู่ที่ไหนในเอกสารให้เพิ่ม id ในลิงค์จากนั้นเพิ่ม id นั้นให้กับตัวเลือก ตัวอย่างนี้จะเปลี่ยนลิงค์ Google อันที่สองในเนื้อหา แต่ไม่ใช่ลิงค์แรกหรือลิงค์ส่วนท้าย:

<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 จะขอคำตอบ jQuery อย่างชัดเจน แต่คุณไม่จำเป็นต้องใช้ jQuery สำหรับทุกสิ่งในวันนี้}

วิธีการบางอย่างที่ไม่มี jQuery:

• หากคุณต้องการเปลี่ยนhrefค่าขององค์ประกอบทั้งหมด <a>ให้เลือกทั้งหมดจากนั้นทำซ้ำผ่านnodelist : (ตัวอย่าง)

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

• หากคุณต้องการเปลี่ยนhrefค่าของ<a>องค์ประกอบทั้งหมดที่มีแอhrefททริบิวต์ให้เลือกโดยการเพิ่มแอ[href]ททริบิวเตอร์ selector ( a[href]): (ตัวอย่าง)

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

• หากคุณต้องการเปลี่ยนhrefค่าของ<a>องค์ประกอบที่มีค่าเฉพาะตัวอย่างเช่นgoogle.comใช้ attribute selector a[href*="google.com"]: (ตัวอย่าง)

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

  ในทำนองเดียวกันคุณยังสามารถใช้อีกตัวเลือกแอตทริบิวต์ ตัวอย่างเช่น

  • a[href$=".png"]สามารถนำมาใช้เพื่อเลือก<a>องค์ประกอบที่มีค่ากับปลายhref.png

  • a[href^="https://"]สามารถนำมาใช้เพื่อเลือก<a>องค์ประกอบที่มีhrefค่าที่นำหน้าhttps://ด้วย

• หากคุณต้องการเปลี่ยนhrefค่า<a>องค์ประกอบที่ตรงตามเงื่อนไขหลายข้อ: (ตัวอย่าง)

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

.. ไม่จำเป็นต้อง regex ในกรณีส่วนใหญ่

ตัวอย่างนี้จะเรียกใช้เมื่อมีการคลิกลิงก์ของคลาส 'menu_link' และแสดงข้อความและ URL ของลิงก์ Return false ป้องกันการเชื่อมโยงจากการติดตาม

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

วิธีง่ายๆในการทำเช่นนี้คือ:

ฟังก์ชั่น Attr (ตั้งแต่ jQuery เวอร์ชั่น 1.0)

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

หรือ

ฟังก์ชั่น Prop (ตั้งแต่ jQuery เวอร์ชั่น 1.6)

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

ข้อดีของวิธีดังกล่าวข้างต้นคือถ้าตัวเลือกเลือกสมอเดียวมันจะอัปเดตจุดยึดเท่านั้นและถ้าตัวเลือกส่งคืนกลุ่มของจุดยึดมันจะอัปเดตกลุ่มเฉพาะผ่านคำสั่งเดียวเท่านั้น

ตอนนี้มีหลายวิธีในการระบุจุดยึดหรือกลุ่มจุดยึดที่แน่นอน:

คนง่าย ๆ ค่อนข้าง:

1. เลือกสมอผ่านชื่อแท็ก: $("a")
2. เลือกจุดยึดผ่านดัชนี: $("a:eq(0)")
3. เลือกสมอสำหรับคลาสเฉพาะ (เช่นเดียวกับในคลาสนี้มีจุดยึดกับคลาสเท่านั้นactive):$("a.active")
4. การเลือกจุดยึดที่มี ID เฉพาะ (ที่นี่ในตัวอย่างprofileLink ID):$("a#proileLink")
5. การเลือกสมอแรก href: $("a:first")

สิ่งที่มีประโยชน์มากขึ้น:

6. การเลือกองค์ประกอบทั้งหมดด้วยแอตทริบิวต์ href: $("[href]")
7. การเลือกแองเคอร์ทั้งหมดที่มี href เฉพาะ: $("a[href='www.stackoverflow.com']")
8. การเลือกแองเคอร์ทั้งหมดที่ไม่มี href เฉพาะ: $("a[href!='www.stackoverflow.com']")
9. การเลือกแองเคอร์ทั้งหมดที่มี href มี URL เฉพาะ: $("a[href*='www.stackoverflow.com']")
10. การเลือกจุดยึดทั้งหมดด้วย href เริ่มต้นด้วย URL เฉพาะ: $("a[href^='www.stackoverflow.com']")
11. การเลือกแองเคอร์ทั้งหมดที่มี href ลงท้ายด้วย URL เฉพาะ: $("a[href$='www.stackoverflow.com']")

ตอนนี้หากคุณต้องการแก้ไข URL เฉพาะคุณสามารถทำได้ดังนี้:

ตัวอย่างเช่นหากคุณต้องการเพิ่มเว็บไซต์พร็อกซีสำหรับ URL ทั้งหมดที่ไปยัง google.com คุณสามารถติดตั้งได้ดังนี้:

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

หยุดใช้ jQuery เพื่อประโยชน์ของมัน! ง่ายมากด้วย 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");
   });

เปลี่ยน HREF ของรูปโลโก้ชุดรูปแบบ Wordpress Avada

หากคุณติดตั้งปลั๊กอิน ShortCode Exec PHP คุณสามารถสร้างรหัสย่อนี้ซึ่งฉันเรียกว่า myjavascript

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

ตอนนี้คุณสามารถไปที่ลักษณะ / วิดเจ็ตและเลือกหนึ่งในพื้นที่ส่วนท้ายวิดเจ็ตและใช้วิดเจ็ตข้อความเพื่อเพิ่มรหัสย่อต่อไปนี้

[myjavascript]

ตัวเลือกอาจเปลี่ยนแปลงได้ขึ้นอยู่กับภาพที่คุณใช้และถ้าเป็นเรตินาพร้อมใช้งาน แต่คุณสามารถหาได้โดยใช้เครื่องมือของนักพัฒนาซอฟต์แวร์

href ในแอททริบิวต์คุณสามารถเปลี่ยนได้โดยใช้จาวาสคริปต์ที่บริสุทธิ์ แต่ถ้าคุณมี jQuery ที่ฉีดเข้าไปในหน้าของคุณแล้วไม่ต้องกังวลฉันจะแสดงมันทั้งสองวิธี:

ลองนึกภาพคุณมีhrefด้านล่างนี้:

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

และคุณต้องการเปลี่ยนลิงค์ ...

การใช้JavaScript บริสุทธิ์โดยไม่ต้องใช้ห้องสมุดใด ๆ คุณสามารถทำได้:

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

แต่ในjQueryคุณสามารถทำได้:

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

หรือ

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

ในกรณีนี้ถ้าคุณมีการฉีด jQuery ไปแล้ว jQuery อาจจะดูสั้นกว่าและข้ามเบราว์เซอร์มากกว่า ... แต่นอกเหนือไปจากนั้นฉันก็ใช้JS...