Как изменить href гиперссылки с помощью jQuery
-
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');
Простой способ сделать это заключается в следующем :
Функция Attr (начиная с jQuery версии 1.0)
$("a").attr("href", "https://stackoverflow.com/")
или
Функция опоры (начиная с jQuery версии 1.6)
$("a").prop("href", "https://stackoverflow.com/")
Кроме того, преимущество вышеуказанного способа заключается в том, что если selector выберет один якорь, он обновит только этот якорь, и если selector вернет группу привязок, он обновит конкретную группу только с помощью одного оператора.
Сейчас существует множество способов определить точный якорь или группу якорей:
Довольно Простые Из Них:
- Выберите привязку через название тега :
$("a")
- Выберите привязку через индекс:
$("a:eq(0)")
- Выберите привязку для определенных классов (так как в этом классе только привязки
с классом
active
) :$("a.active")
- Выбор якорей с определенным идентификатором (здесь, в примере
profileLink
Идентификационный номер) :$("a#proileLink")
- Выбор первой привязки href:
$("a:first")
Более полезные из них:
- Выбор всех элементов с атрибутом href :
$("[href]")
- Выбор всех якорей с определенным href:
$("a[href='www.stackoverflow.com']")
- Выбор всех якорей, не имеющих определенного href:
$("a[href!='www.stackoverflow.com']")
- Выбор всех якорей с href, содержащих определенный URL:
$("a[href*='www.stackoverflow.com']")
- Выбор всех якорей с помощью href, начинающихся с определенного URL:
$("a[href^='www.stackoverflow.com']")
- Выбор всех якорей с 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
один...