Css link href jquery

Как изменить href для гиперссылки, используя jQuery

изменит href всех гиперссылок, чтобы указать на Google. Вы, вероятно, хотите еще более изысканный селектор. Например, если у вас есть ссылка ссылок на ссылки (гиперссылка) и ссылка (или «якорь») якорных тегов:

. Тогда вы, вероятно, не хотите случайно добавлять атрибуты href к ним. Для безопасности тогда мы можем указать, что наш селектор будет соответствовать только тегам с существующим атрибутом 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 новой. Обратите внимание на гибкость, которую это дает вам — здесь можно было бы внести какие-либо изменения в ссылку.

«в HTML имена элементов нечувствительны к регистру, но в XML они чувствительны к регистру». — w3.org/TR/CSS21/selector.html

Для полноты, поскольку это все еще время от времени связано, я добавлю, что начиная с jQuery 1.4, последний пример не требует использования each — теперь возможно следующее: $(selector).attr(‘href’, function() < return this.replace(/. /, '. '); >);

@DavidHedlund Небольшое исправление: вы пропустили href : . return this.href.replace(/. /, ‘. ‘); >);

С jQuery 1.6 и выше вы должны использовать:

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

Разница между prop и attr заключается в том, что attr захватывает атрибут HTML, тогда как prop захватывает свойство DOM.

Вы можете найти более подробную информацию в этом сообщении: .prop() vs.attr()

Было бы attr получить объяснение, почему вы должны использовать prop over attr , для тех, кто придет к вопросу и обнаружит, что attr очевидно, прекрасно работает в новых версиях jQuery .

@womble использует prop быстрее, чем attr потому что обновляет dom, а не модифицирует HTML. jsfiddle.net/je4G5

@Popnoodles Есть больше вопросов, чем это, но было бы слишком долго, чтобы объяснить все их здесь. Так что читатели должны просто взглянуть на сообщение, связанное с Womble. Тем не менее, резюме здесь было бы неплохо, в противном случае эта часть информации вроде бы теряется ..

Используйте метод attr для поиска. Вы можете отключить любой атрибут с новым значением.

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

Это сработало для меня, если я установил в теге a. Просто хотел уточнить, что в случае, если кто-то попытается установить name = «mylink» аналогично ответу выше и ожидать, что это сработает.

В зависимости от того, хотите ли вы изменить все идентичные ссылки на что-то еще или вы хотите контролировать только те, что указаны в данном разделе страницы или каждый отдельно, вы можете сделать один из них.

Измените все ссылки на Google, чтобы они указывали на Карты Google:

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

Чтобы изменить ссылки в данном разделе, добавьте класс div контейнера в селектор. Этот пример изменит ссылку Google в содержании, но не в нижнем колонтитуле:

 

. link to Google in the content.

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

Чтобы изменить отдельные ссылки независимо от того, где они попадают в документ, добавьте идентификатор в ссылку, а затем добавьте этот идентификатор в селектор. В этом примере будет изменена вторая ссылка Google в контенте, но не первая или нижняя колонтитула:

 

. link to Google in the content.

. second link to Google in the content.

Links: Google
$("a#changeme").attr('href', 'http://maps.google.com/');

Несмотря на то, что OP явно задал ответ на jQuery-ответ, в наши дни вам не нужно использовать jQuery.Суб >

Несколько методов без jQuery:

var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >); 
var anchors = document.querySelectorAll('a[href]'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >); 
var anchors = document.querySelectorAll('a[href*="google.com"]'); Array.prototype.forEach.call(anchors, function (element, index) < element.href = "http://stackoverflow.com"; >); 
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 предотвращает слежение за ссылкой.

Option 1 Option 2 $('.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/") 

Функция Prop (с версии jQuery 1.6)

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

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

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

Довольно простые:

  1. Выберите имя тега с привязкой: $(«a»)
  2. Выберите привязку через индекс: $(«a:eq(0)»)
  3. Выберите привязку для определенных классов (как в этом классе только привязывается с active классом): $(«a.active»)
  4. Выбор якорей с определенным идентификатором (здесь в примере ID 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 info"> 
Поделиться
3
 $("a[href^='http://stackoverflow.com']") .each(function() < this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "http://stackoverflow.com"); >); 

Источник

The attr() method will change the href of all hyperlinks to point to Google. For instance, you have a mix of link source and link target anchor tags:

And you don't want to add href attributes to them. Then, you can specify the selector to match the tags with an existing href attribute:

In case you want to match an anchor with a specific existing href, then you can do the following:

html> html> head> title>Title of the document title> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> head> body> a href="www.example.com">Link a> script> $("a[href]").attr("href", "https://www.w3docs.com"); script> body> html>

Then you should update only some part of the href attribute:

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

The first part only selects links where the href starts with http://stackoverflow.com. Then, a function is specified, which uses a regular expression to replace this part of the URL with a new one.

The attr() Method

The .attr() method is used to get the attribute value for the first element in the matched set. To get the value for each element, the looping construct methods, namely — .each() or .map() methods of jQuery are used.

One of the main benefits this method suggests is that it can be called directly on a jQuery object and chained to other methods.

Источник

Читайте также:  What is selection java
Оцените статью