Встановлення атрибута 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")); І це насторожило мене "невизначено".

— gautamlakum

3

це, ймовірно, означає, що ваше посилання на публікацію - це клас, а не ідентифікатор. спробуйте: alert ($ (". опублікувати-посилання"). attr ("href")); натомість

— jim tollan

3

@ lakum4stackof: Буде корисно, якщо ви опублікуєте точний

ах вибачте ти правий. Я застосував клас, і я використав "#" у коді jquery. він працював з попередженням ($ (". опублікувати-посилання"). attr ("href")); Дуже дякую. :)

— gautamlakum

18

У jQuery 1.6+ краще використовувати:

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

$(selector).prop('href')щоб отримати значення

Коротше кажучи, .propотримує та встановлює значення для об'єкта DOM , а також .attrотримує та встановлює значення в HTML . Це робить .propтрохи швидшим і, можливо, більш надійним у деяких контекстах.

— Гербус
джерело

1

погодьтеся, ".prop" отримає повний шлях на зразок: http: //www.../index.html, тоді як .attr отримає лише: 'index.html'

— DevWL

14

Встановіть hrefатрибут за допомогою

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

і читати, використовуючи

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

Де "selector" - будь-який дійсний селектор jQuery для вашого <a>елемента (".myClass" або "#myId", щоб назвати найпростіші).

Сподіваюсь, це допомагає!

— Валентин Флаксель
джерело

Я використовував це для отримання href. попередження ($ ("# опублікувати-посилання"). attr ("href")); І це насторожило мене "невизначено".

— gautamlakum

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

— Валентин Флаксель

2

спробуйте: alert ($ (". опублікувати-посилання"). attr ("href")); оскільки ваш елемент може бути класом, а не ідентифікатором. насправді, ймовірно, використовує $ (це), якщо він знаходиться всередині вашої події

— jim tollan

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 так - дуже цікаво - яка ваша машина, ОС та браузер?

— Kamil Kiełczewski

1

FF59, Win10. Результати, схоже, знову змінилися (можливо, це залежить від # відкритої вкладки), але все-таки ті самі: imgur.com/a/MLDnTWM Машина: 10-річна плата Intel (dp55wg), чотирьохядерний 3.1GHz, 16gb ddr3 ram, 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>

— Nanang HD
джерело

1

Відповіді лише для коду не так корисні, як відповіді, які мають робочий код плюс корисні пояснення. У цьому випадку варто було б пояснити цю відповідь 5-річному віку.

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