Установка атрибута href во время выполнения

202

Каков наилучший способ установить hrefатрибут<a> тега во время выполнения с помощью jQuery?

Кроме того, как вы получаете значение hrefатрибута <a>тега, используя jQuery?

javascript jquery html

378

Чтобы получить или установить атрибут элемента HTML, вы можете использовать element.attr()функцию в jQuery.

Чтобы получить атрибут href , используйте следующий код:

var a_href = $('selector').attr('href');

Чтобы установить атрибут href , используйте следующий код:

$('selector').attr('href','http://example.com');

В обоих случаях, пожалуйста, используйте соответствующий селектор. Если вы установили класс для элемента привязки, используйте '.class-name'и, если вы установили идентификатор для элемента привязки, используйте '#element-id'.

— Стаут Джо
источник

1

Я использовал это, чтобы получить HREF. оповещения ($ ( "# публиковать-ссылку") Attr ( "HREF").); И это дало мне предупреждение "неопределенный".

— Гаутамлакум

3

это, вероятно, означает, что ваша ссылка для публикации является классом, а не идентификатором. try: alert ($ (". publish-link"). attr ("href")); вместо этого

— Джим Толлан

3

@ lakum4stackof: было бы полезно, если бы вы опубликовали точный тег

ааа извините Ты прав. Я применил класс, и я использовал «#» в коде jquery. он работал с предупреждением ($ (". publish-link"). attr ("href")); Спасибо. :)

— гаутамлакум

18

В jQuery 1.6+ лучше использовать:

$(selector).prop('href',"http://www...")чтобы установить значение, и

$(selector).prop('href')чтобы получить значение

Короче говоря, .propполучает и устанавливает значения в объекте DOM , а также .attrполучает и устанавливает значения в HTML . Это делает .propнемного быстрее и, возможно, более надежным в некоторых контекстах.

— Gerbus
источник

1

согласитесь, ".prop" получит полный путь, например: http: //www.../index.html, а .attr получит только: "index.html"

— DevWL

14

Установите hrefатрибут с

$(selector).attr('href', 'url_goes_here');

и читать это с помощью

$(selector).attr('href');

Где «селектор» - это любой допустимый селектор jQuery для вашего <a>элемента («.myClass» или «#myId», чтобы назвать самые простые из них).

Надеюсь это поможет !

— Валентин Флахсел
источник

Я использовал это, чтобы получить HREF. оповещения ($ ( "# публиковать-ссылку") Attr ( "HREF").); И это дало мне предупреждение "неопределенный".

— Гаутамлакум

@ lakum4stackof вы, скорее всего, выполнили этот код предупреждения ДО того, как вы установите свой hrefатрибут, предполагая, что ваш селектор правильный.

— Валентин Флахсел

2

try: alert ($ (". publish-link"). attr ("href")); поскольку ваш элемент может быть классом, а не идентификатором. на самом деле, вероятно, используя $ (this), если оно внутри вашего мероприятия

— Джим Толлан

2

Небольшое сравнение тестов производительности для трех решений:

$(".link").prop('href',"https://example.com")
$(".link").attr('href',"https://example.com")
document.querySelector(".link").href="https://example.com";

Здесь вы можете выполнить тест самостоятельно https://jsperf.com/a-href-js-change

Мы можем прочитать значения href следующими способами

let href = $(selector).prop('href');
let href = $(selector).attr('href');
let href = document.querySelector(".link").href;

Здесь вы можете выполнить тест самостоятельно https://jsperf.com/a-href-js-read

— Камил Келчевски
источник

Ницца! Как ни странно, я получаю противоположные результаты от вас, но интересно иметь возможность управлять ими самостоятельно.

— HoldOffHunger

@HoldOffHunger да - очень интересно - какая у вас машина, ОС и браузер?

— Камиль Келчевски,

1

FF59, Win10. Результаты, похоже, снова немного изменились (возможно, это зависит от количества открытых вкладок), но в основном это то же самое: imgur.com/a/MLDnTWM Машина: 10-летняя плата Intel (dp55wg), четырехъядерный процессор 3.1 ГГц, 16 ГБ оперативной памяти ddr3, gtx1070.

— HoldOffHunger

1

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>

— Нананг HD
источник

1

Ответы, содержащие только код, не так полезны, как ответы с рабочим кодом и полезными объяснениями. В этом случае стоило бы объяснить этот ответ 5-летнему.

— Сомнат Мулук