Cài đặt thuộc tính trong thời gian chạy

Cách tốt nhất để đặt hrefthuộc tính của <a>thẻ khi chạy bằng jQuery là gì?

Ngoài ra, làm thế nào để bạn có được giá trị của hrefthuộc tính của <a>thẻ bằng jQuery?

Để có được hoặc đặt thuộc tính của một phần tử HTML, bạn có thể sử dụng element.attr()hàm trong jQuery.

Để có được thuộc tính href , hãy sử dụng đoạn mã sau:

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

Để đặt thuộc tính href , hãy sử dụng mã sau:

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

Trong cả hai trường hợp, vui lòng sử dụng bộ chọn thích hợp. Nếu bạn đã đặt lớp cho phần tử neo, hãy sử dụng '.class-name'và nếu bạn đã đặt id cho phần tử neo, hãy sử dụng '#element-id'.

Trong jQuery 1.6+, tốt hơn là sử dụng:

$(selector).prop('href',"http://www...")để đặt giá trị và

$(selector).prop('href')để có được giá trị

Nói tóm lại, .proplấy và đặt các giá trị trên đối tượng DOM , và .attrlấy và đặt các giá trị trong HTML . Điều này làm cho .propmột chút nhanh hơn và có thể đáng tin cậy hơn trong một số bối cảnh.

Đặt hrefthuộc tính với

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

và đọc nó bằng cách sử dụng

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

Trong đó "bộ chọn" là bất kỳ bộ chọn jQuery hợp lệ nào cho <a>phần tử của bạn (".myClass" hoặc "#myId" để đặt tên cho các bộ chọn đơn giản nhất).

Hi vọng điêu nay co ich !

So sánh thử nghiệm hiệu suất nhỏ cho ba giải pháp:

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

Tại đây bạn có thể tự thực hiện kiểm tra https://jsperf.com/a-href-js-change

Chúng ta có thể đọc giá trị href theo những cách sau

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

Tại đây bạn có thể tự thực hiện kiểm tra 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>