JavaScript

JavaScript tutorial 42: Methods in jQuery( attr() and val() ).

In the previous knowledge bit, we have studied about Methods in jQuery and we have given a brief overview of jQuery text() and HTML() method. Now in this knowledge bit, we will discuss more Methods in jQuery that are attr() and Val() method. We will demonstrate the purpose of these methods.

Methods in jQuery

Before starting with jQuery methods lets create simple HTML page skeleton which we are going to use in this lesson. Here is the source code for the HTML age below:

Source Code

<!DOCTYPE html>
<html>
<head>
<title>Including jQuery</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Including jQuery to Project</h1>
<h2><a href="http://Geeksread.com">GeeksRead.com</a></h2>
<ul>
<li id="selectID">HTML</li>
<li class="byclass">CSS</li>
<li class="byclass">JavaScript <a href="https://geeksread.com">vist our site</a></li>
</ul>
<p>Your Name: <input type="text" name="user"></p>
<img src="img/img2.jpg" width="300px">
<img src="img/img2.jpg" width="300px">
<img src="img/img2.jpg" width="300px">

</body>
</html>       

 

Here we have HTML skeleton which consists of heading 1, heading 2, image tag, input text, and lists. You can also notice there that we have jQuery included into our site via CDN. This is how our website would look like:

 

Methods in jQuery

Now let’s go and move toward Methods in jQuery.

attr() Method:

The first method we are going to discuss there is attribute method, so this method is used to retrieve the very first matched value of an attribute. It is also used to set the value of one or more attribute for every matched element. So by using attr() method we can retrieve an attribute, styling, text or inner HTML and then we can also set them by passing an argument to the method.

Example:

In this example, we will try to change the source of the image. Like you can notice in above site screenshot that our site have an image. Now what we will do, we just replace the image source with another image. Soto that we first select the image by using the dollar sign and then change the source of the image using attr() method. Here is the code below:

 

$("img").attr("src");       

 

This code is used to select the image or used to retrieve the source of the image. Now let see how we can manipulate the image source.

 

$("img").attr("src", "img/img1.jpg");       

 

Here in attr() method, we have passed two attributes one is src which is used to identify the image and another is the source of the image. Both attributes are written in quotation and separated by the comma.

Here is the output of the code below:

 

attr Method in jQuery

 

You can notice in the above output that the image is changed to new one.

Example:

Now let’s suppose we have three images on our site and if we want to change the source of the first image or the source of an image then we use nth-of-type(1) and inside parentheses, we write the order of the image which we want to change. Like for the first image write 1 and for the second image write 2. Here is the demonstration below:

Here is the demo page of our website:

 

attr method in jquery example

 

Now if we want to change the source of the middle image, then we write nth-of-type(2), because the order of the image is 2. Here is the demonstration below:

 

$("img:nth-of-type(1)").attr("src", "img/img1.jpg");       

 

Here is the output below where you can notice that the source of the middle image is changed to another image.

 

methods in jquery example

 

Similarly, if we want to change the source of the 3rd image then we can do this way.

 

The attr() method is used to retrieve and manipulate HTML attribute. If you just give it one argument like source and then you will not pass the second argument then it will only return the value of the source. And if we provide the second argument like new source then it will update the previous source.

Val() Method

The Val abbreviation value, The Val() method is used to extract the value from an input. The Val() method is a jQuery method for value. If we write Val() method without any argument then it will return the value of the input. And it will replace the value if we pass the argument inside parentheses. Here is the demonstration below:

You can notice that our site have the input box with no value, here is the demonstration below:

 

Val method in Jquery

 

If we want to retrieve the value of input textbox then it will return the empty string, because our input box has no value.

 

Val method in Jquery example

 

Now, if we want to set any value to input box then we pass attribute inside quotes, and what val() method do, it will set the value to the input box. Here is the demonstration below:

$(“input”).val(“Welcome to GeeksRead!”);

When we run this code then it will set the value to the input box. You can notice in below screenshot:

 

 

Now let’s write something in your input text box, and then try to retrieve that value. So to do that we will select the input text and then write val() method without any arguments. Here is the demonstration below:

 

 

You can notice that we first write “Geeks read” in our textbox and then in the console, we try to retrieve that value using Val() method.

The attribute method is used to access the specific attribute or to set the attribute that we want. And the value method Val() is used to retrieve the value or to set the value of any sort of input.

Conclusion:

In this knowledge bit, we have studied two more Methods in jQuery, attribute and value method, and we have learned that how we can access the attribute and then set the attribute value. And we have also learned that how we can retrieve and set the value of any type of input tag.

 

You can have a look at our whole JavaScript series as well.

Click to comment

Most Popular

To Top