jQuery Tutorial

jQuery Attributes

How to get attributes value of HTML elements in jQuery?

jQuery provides the powerful methods for reading and manipulating HTML elements and attributes.
attr() method is used to retrieve the attributes value or sets the value for attributes of HTML element.

How to get attribute value?

attr method gets the attribute value of particular HTML element.

attr("attribute_name")

Getting Attribute Value Example

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
           var title = $("p:first").attr("title");
           $("#divContent").text(title);
        });
      </script>		
   </head>	
   <body>
   <p title="first main div">This is first paragraph content.</p>
   <div id="divContent"></div>
   </body>
</html>

Output:

   <p title="first main div">This is first paragraph content.</p>
   <div id="divContent">first main div</div>

How to set attribute value?

attr method sets the value for attribute of particular HTML element.

attr("attribute_name", "value")

Setting Attribute Value Example

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
           $("img").attr("src", "wp-includes/images/images.png");
           $("img").attr("alt", "codingpointer website");
        });
      </script>		
   </head>	
   <body>
   <img />
   </body>
</html>

Output:

<img src="wp-includes/images/images.png" alt="codingpointer website" />

Setting Attribute Value using properties object

// properties are collection key/value objects.
attr(properties)

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
           $("img").attr({"src": "wp-includes/images/images.png", "alt": "codingpointer website"});
        });
      </script>		
   </head>	
   <body>
   <img />
   </body>
</html>

Output:

<img src="wp-includes/images/images.png" alt="codingpointer website" />

What is attributes?

Attributes carry additional information about an HTML element and it is key/value pair format.
<input id="txtname" type="text" value="test"/> here, "type","value", "id" are attributes of the input elements.

Get and Set Properties of HTML Element

prop() method is used get and set value for DOM properties of HTML element.

What is property?

Property is a representation of an attribute in the HTML DOM tree. once the browser parse HTML document, corresponding DOM node will be created which is an object thus having properties like align, alt, autofocus, baseURI, checked so on..

prop method example

<html>
   <head>
      <title>The jQuery Example</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        $(document).ready(function(){
          $("a:first").prop("href", "javascript:alert('hi, thanks for visiting!');");
          $("p").text($("a:first").prop("href"));
        });
      </script>		
   </head>	
   <body>
   <a>webpage link.</a>
    <p></p>
   </body>
</html>

Output: