Як ви можете змінити href для гіперпосилання за допомогою jQuery?

Використання

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

змінить href усіх гіперпосилань, щоб вказувати на Google. Ви, мабуть, хочете дещо вдосконаленого селектора. Наприклад, якщо у вас є поєднання тегів прив'язки джерела (гіперпосилання) та цілі посилання (він же "прив'язка"):

<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:

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

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

Щоб змінити посилання в заданому розділі, додайте клас дільниці контейнера до селектора. Цей приклад змінить посилання 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/');

Щоб змінити окремі посилання незалежно від місця їх потрапляння в документ, додайте ідентифікатор до посилання, а потім додайте цей ідентифікатор до селектора. У цьому прикладі буде змінено друге посилання 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/');

_{Незважаючи на те, що ОП явно попросила відповідь на jQuery, вам не потрібно використовувати jQuery для всього цього дня.}

Кілька методів без jQuery:

• Якщо ви хочете змінити hrefзначення всіх <a> елементів, виберіть їх усі, а потім повторіть через ноделіст : (приклад)

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

• Якщо ви хочете змінити hrefзначення всіх <a>елементів, які насправді мають hrefатрибут, виберіть їх, додавши [href]селектор атрибутів ( 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, скористайтеся селектором атрибутів 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";
  });

..не потрібна регулярна виразка, в більшості випадків.

Цей фрагмент викликає при натисканні на посилання класу 'menu_link' та показує текст та URL-адресу посилання. Неправильне повернення запобігає дотриманню посилання.

<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/") 

або

Підтримка функції (з версії jQuery 1.6)

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

Також перевага вищезгаданого способу полягає в тому, що якщо селектор вибере єдиний якір, він оновить лише цей якір, і якщо селектор поверне групу якоря, він оновить конкретну групу лише через одне твердження.

Зараз існує маса способів визначення точного якоря чи групи якорів:

Досить прості:

1. Виберіть якор через ім'я тегу: $("a")
2. Виберіть якір через індекс: $("a:eq(0)")
3. Виберіть якір для конкретних класів (як у цьому класі лише якір із класом active):$("a.active")
4. Вибір якорів із конкретним ідентифікатором (тут, наприклад, profileLink ідентифікатор):$("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

Якщо ви встановите плагін PHP ShortCode Exec, ви можете створити цей Код, який я назвав myjavascript

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

Тепер ви можете перейти в «Вигляд / віджети» і вибрати одну з областей віджетів нижнього колонтитулу та скористатися текстовим віджетом, щоб додати такий короткий код

[myjavascript]

Селектор може змінюватись залежно від того, яке зображення ви використовуєте та чи готово сітківка, але ви завжди можете це визначити, використовуючи інструменти для розробників.

href в атрибуті, так що ви можете змінити його за допомогою чистого JavaScript, але якщо у вас вже введено 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одним ...