런타임시 href 속성 설정

jQuery를 사용하여 런타임에 태그 의 href속성 을 설정하는 가장 좋은 방법은 무엇입니까 <a>?

또한 jQuery를 사용 href하여 <a>태그 의 속성 값을 어떻게 얻 습니까?

HTML 요소의 속성을 가져 오거나 설정하려면 element.attr()jQuery 에서 함수를 사용할 수 있습니다 .

href 속성 을 얻으려면 다음 코드를 사용하십시오.

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

href 속성 을 설정하려면 다음 코드를 사용하십시오.

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

두 경우 모두 적절한 선택기를 사용하십시오. anchor 요소의 클래스를 설정 한 '.class-name'경우 사용 하고 anchor 요소 의 id를 설정 한 경우을 사용하십시오 '#element-id'.

jQuery 1.6 이상에서는 다음을 사용하는 것이 좋습니다.

$(selector).prop('href',"http://www...")값 을 설정 하고

$(selector).prop('href')가치 를 얻기 위해

즉, .propGET 및 SET 값을에 DOM의 객체, 및 .attr의 값을 얻고 설정 HTML . 이것은 .prop일부 상황에서 조금 더 빠르고 더 안정적입니다.

로 href속성을 설정

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

그리고 그것을 사용하여 그것을 읽으십시오

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

여기서 "selector"는 <a>요소에 대한 유효한 jQuery 선택기입니다 (가장 간단한 항목의 이름은 ".myClass"또는 "#myId").

도움이 되었기를 바랍니다 !

세 가지 솔루션에 대한 소규모 성능 테스트 비교 :

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

여기에서 직접 테스트를 수행 할 수 있습니다 https://jsperf.com/a-href-js-change

다음과 같은 방법으로 href 값을 읽을 수 있습니다

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

여기에서 직접 테스트를 수행 할 수 있습니다 https://jsperf.com/a-href-js-read

<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>