Here, I am displaying how to get href value of anchor tag in jquery. Also, given some examples of multiple ways to implement to get href value using jquery.
Note: Firstly require jquery library CDN link. As well as, know about jquery selector and get attributes. Follow the below section steps.
Table of Contents
Get href Value of Anchor Tag in jQuery
In this paragraph, showing jquery scripting code with the help of Html. This is the best simple example to ‘get anchor tag value in jquery‘
<!DOCTYPE html>
<html>
<head>
<title>how to get href value in jquery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div>
<a href="https://wlearnsmart.com/">W learn Smart</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
event.preventDefault();
var get = $(this).attr('href');
alert(get);
console.log(get);
});
});
</script>
</body>
</html>Thus, in this code added anchor tag for getting attribute of href. So, then we include scripting tag conditions.
Here, we are showing some main points you can add and make multiple ways to get href value of anchor tag in jquery.
- Firstly, include the jquery CDN link on the header section.
- Then, add anchor tags in the body section.
- After that, including the scripting section and add conditions to get href value using jquery.
1: Here, this is a jquery CDN link to add.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2: Added anchor tag in the body section using Html.
<a href="https://wlearnsmart.com/">W learn Smart</a>3: Including the scripting tag with the condition.
$(document).ready(function() {
$('a').click(function() {
event.preventDefault();
var get = $(this).attr('href');
alert(get);
console.log(get);
});
});Afterward, I create a page load function. As well as, apply selector and given selector path a. In this selector, you can add any other ways to get href value. likewise, class, id, ul, and li so on.
So then, I insert click function with the connect selector.
Then, created a variable which namely is var get in this variable to store attribute value. After that, we can display href value where you can want.
How to Get href Value using Class
Similarly, I am displaying an example of getting href value with the use of a class. So, you can see in the below section.
<div class="getval">
<a href="https://wlearnsmart.com/">W learn Smart</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.getval a').click(function() {
event.preventDefault();
var get = $(this).attr('href');
alert(get);
console.log(get);
});
});As an example, we are added getval class for use of selector to get href value in jquery. you can see the output in this image.
How to Get Anchor Tag Value using Id
Here, I am stating get anchor tag value with the use of selector id. Now, you can see in the code.
<div id="data">
<a href="https://wlearnsmart.com/">W learn Smart</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#data a').click(function() {
event.preventDefault();
var get = $(this).attr('href');
alert(get);
console.log(get);
});
});Find Anchor Tag href in $
Thus, we are showing an example of multiple anchor tag href in jquery. You can see this code.
Firstly, created multiple anchor tags with the href value using jquery and find specific anchor tag value with this function of code.
<div class="multipleanchor">
<a href="https://wlearnsmart.com/">W learn Smart</a>
<a href="first">First</a>
<a href="Second">Second</a>
<a href="Third">Third</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.multipleanchor a').click(function() {
event.preventDefault();
var get = $(this).attr('href');
alert(get);
console.log(get);
});
});Under, created multiple anchor tags and change values of attributes href values. Then, get attribute value one by one with the on click event.
Now, you can see multiple anchor tags output in this image.
Here, these are similar basic topics to learn many methods using Jquery.
- jQuery hasClass Function
- How to Get Radio Button Value jQuery By Id
- JavaScript Change Image onclick Event
Conclusion
Finally, I explain some methods to get href value of anchor tag in jquery. So, if any other query asks in the comment section. we will solve and provide the best method.
Also, one more thing includes the CDN link it is required otherwise you can not able to get href attributes value. Above the code, we have to provide full code.
I love what you guys are usually up too. Such clever work and reporting!
Keep up the very good works guys I’ve incorporated you guys
to my blogroll.
Most Welcome…
Wonderful work! This is the kind of info that
are supposed to be shared across the internet. Disgrace on Google for not positioning this submit higher!
Come on over and visit my website . Thanks =)
Thanks…
Have you ever considered about adding a little bit more than just your articles?
I mean, what you say is important and all. But just imagine if you added some great images or videos to give your posts more, “pop”!
Your content is excellent but with images and videos, this site could certainly be one of
the most beneficial in its niche. Superb blog!
Hi! Someone in my Facebook group shared this site with us so I came to look it over. I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Wonderful blog and brilliant design.
Hi! Someone in my Myspace group shared this site
with us so I came to check it out. I’m definitely loving the information. I’m book-marking and
will be tweeting this to my followers! Terrific blog and fantastic style and design.
Wow, superb blog format! How lengthy have you been running a blog for? you make running a blog glance easy. The total glance of your site is fantastic, let alone the content material!!
I am truly grateful to the holder of this web site who has shared this great post at at this time.