Как изменить href гиперссылки с помощью jQuery

StackOverflow https://stackoverflow.com/questions/179713

  •  05-07-2019
  •  | 
  •  

Вопрос

Как изменить 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 в том, что <=> захватывает атрибут HTML, тогда как <=> захватывает свойство 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/');

Чтобы изменить ссылки в данном разделе, добавьте класс контейнера 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/');

Чтобы изменить отдельные ссылки независимо от того, где они находятся в документе, добавьте идентификатор в ссылку, а затем добавьте этот идентификатор в селектор. В этом примере будет изменена вторая ссылка 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> элементы, выделите их все, а затем выполните итерацию по список узлов: (пример)

    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-адрес ссылки. Возвращаемое значение 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;
});

Хватит использовать jQuery только ради этого! Это так просто, только с JavaScript. 

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

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

Простой способ сделать это заключается в следующем :

Функция Attr (начиная с jQuery версии 1.0) 

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

или

Функция опоры (начиная с jQuery версии 1.6)

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

Кроме того, преимущество вышеуказанного способа заключается в том, что если selector выберет один якорь, он обновит только этот якорь, и если selector вернет группу привязок, он обновит конкретную группу только с помощью одного оператора.

Сейчас существует множество способов определить точный якорь или группу якорей:

Довольно Простые Из Них:

  1. Выберите привязку через название тега : $("a")
  2. Выберите привязку через индекс: $("a:eq(0)")
  3. Выберите привязку для определенных классов (так как в этом классе только привязки с классом active) : $("a.active")
  4. Выбор якорей с определенным идентификатором (здесь, в примере profileLink Идентификационный номер) : $("a#proileLink")
  5. Выбор первой привязки href: $("a:first")

Более полезные из них:

  1. Выбор всех элементов с атрибутом href : $("[href]")
  2. Выбор всех якорей с определенным href: $("a[href='www.stackoverflow.com']")
  3. Выбор всех якорей, не имеющих определенного href: $("a[href!='www.stackoverflow.com']")
  4. Выбор всех якорей с href, содержащих определенный URL: $("a[href*='www.stackoverflow.com']")
  5. Выбор всех якорей с помощью href, начинающихся с определенного URL: $("a[href^='www.stackoverflow.com']")
  6. Выбор всех якорей с 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);
    });
   });

 $("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 one будет выглядеть короче и более кроссбраузерным...но в остальном я использую JS один...

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top