How to Get href Value of Anchor Tag in jQuery

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.

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 href value of anchor tag in jquery

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.

how to find anchor tag href in jquery

Here, these are similar basic topics to learn many methods using Jquery.

  1. jQuery hasClass Function
  2. How to Get Radio Button Value jQuery By Id
  3. 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.

4 Comments

  1. 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 =)

Leave a Reply

Your email address will not be published. Required fields are marked *

JQUERY

Recent Posts

Related Post

How to Remove Last Character From String jQuery

We are providing the simple best method to remove last character from string jquery. Also, given an example of code delete the last character from string using jquery. Thus, you can see from string and input both types might remove the last character in the post. Here, The main code function of a slice(). which […]

Read more

How to fix WordPress jQuery is not defined

So, you are looking at how to fix ‘WordPress jQuery is not defined’. The major issue is some time WordPress ‘uncaught referenceerror: jquery is not defined’ or $ is not defined jQuery. Therefore, when does this error appear on the WordPress website? when jQuery is not defined on your WordPress project. they come to appear […]

Read more

jQuery hasClass Function & Multiple Classes Example

jQuery hasClass:- We are defining some point of jquery has class with example. So In this article, we have explained in detail what is the jQuery hasClass() and below are some points which we will see from the example. jQuery hasClass Now we use these functions because it shows us whether any event of the Html […]

Read more

x