การตั้งค่าคุณลักษณะ href ที่รันไทม์

วิธีที่ดีที่สุดในการตั้งค่าhrefแอตทริบิวต์ของ<a>แท็ก ณ รันไทม์โดยใช้ jQuery คืออะไร

นอกจากนี้คุณจะรับค่าhrefคุณลักษณะของ<a>แท็กโดยใช้ jQuery ได้อย่างไร

ในการรับหรือตั้งค่าคุณสมบัติขององค์ประกอบ HTML คุณสามารถใช้element.attr()ฟังก์ชั่นใน jQuery

เพื่อรับแอตทริบิวต์hrefใช้รหัสต่อไปนี้:

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

ในการตั้งค่าแอตทริบิวต์hrefให้ใช้รหัสต่อไปนี้:

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

ในทั้งสองกรณีโปรดใช้ตัวเลือกที่เหมาะสม หากคุณตั้งระดับสำหรับองค์ประกอบสมอใช้และถ้าคุณได้ตั้งรหัสสำหรับองค์ประกอบสมอใช้'.class-name''#element-id'

ใน jQuery 1.6+ ควรใช้:

$(selector).prop('href',"http://www...")เพื่อตั้งค่าและ

$(selector).prop('href')เพื่อรับค่า

ในระยะสั้น.propที่ได้รับและค่าชุดบนDOMวัตถุและ.attrได้รับและชุดค่าในHTML ทำให้.propเร็วขึ้นเล็กน้อยและอาจเชื่อถือได้มากขึ้นในบางบริบท

ตั้งค่าhrefคุณสมบัติด้วย

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

และอ่านโดยใช้

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

โดยที่ "selector" เป็นตัวเลือก jQuery ที่ถูกต้องสำหรับ<a>องค์ประกอบของคุณ(".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>