Lesson 4 – Attributes and Properties

jQuery For Beginners Lesson 4 – Attributes and Properties

It is also possible to manipulate all the attributes and properties assigned to HTML elements in jQuery. Some of the most common properties developers tend to work with are ids, classes, tags, title, href, src, and rel.

Take the following markup for an image element as an example.

<img src="img.jpg" alt="Image" id="image" class="image1" title="an image">

The tag name in the above example is img whereas class, id, title, and alt are the attributes of the image element. Each of these attributes consists of a name and a value. jQuery enables you to access any element by manipulating its attributes. Similarly, we can also change its properties using the same method.

Get Attribute Method

You can use the attr() function to get the value of every attribute in the selected element. On the other hand, it is also possible to change or set the attribute values using attr() method.

In the following example, we get the value of title attribute of the emphasis <em> tag and set the same value on to the id attribute of the next div.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Attributes</title>
    https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

    
       $(document).ready(function() {
            var title = $("em").attr("title");
            $("#newdiv").text(title);
         });

     
</head>
<body>
   
      This is first paragraph.
      This is second paragraph.
      
   </div>
</body>
</html>

The output of the above code will be as under.

There are, in fact, a number of attribute methods you can employ to achieve different results such as applying styles to selected elements and setting the name attribute on to all the selected elements. Here is jQuery’s official reference page to learn more about attribute methods.

In the next lesson, we will learn document traversing in jQuery and how you can use it in your program.

Previous Lesson

Back to Course

Next Lesson