jQuery Get Attribute, Set Attribute, Remove Attribute

Filed Under: jQuery

Today we will look into following examples – jQuery get attribute, jQuery set attribute and jQuery remove attribute.

jQuery Get Attribute

The most basic components we can manipulate using jQuery is through the attributes and properties of the HTML DOM elements.

Everything is a node in the HTML Document Object Model. The attributes are available through its node properties.

The most common properties include the class name, tag name, id, href, title, rel, search etc.

jQuery gives us the means to manipulate the properties of the HTML elements. We can modify the attributes later on after getting access to those properties.

jQuery Get Attribute Example

jQuery .attr() method is used for getting the value from the first matched element.

In this example ‘title’ attribute of <em> is fetched using the .attr() method in jQuery.


<html>
<head>
<title>jQuery get attribute example</title>
   <script type="text/javascript" 
   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      var title = $("em").attr("title");
	  alert(title);
      $("#divid").text(title);
   });

   </script>
</head>
<body>
   <div>
      <em title=" my title attribute">jQuery get attributes</em>
      <p id="myid">getting my title attribute- success.</p>
      <div id="divid"></div>
   </div>
</body>
</html>

Below images show the output produced by above HTML file.

jQuery get attribute

jQuery get attribute example

jQuery Set Attribute

For setting attributes we pass two parameters, name and value in the attr() method. This will set all elements with the named attribute using the value passed by the method.

jQuery set attribute syntax: attr(name, value) – name could be any html attribute.

In below example the value of the ‘alt’ is set using the attr(name, value) method.


<html>
<head>
<title>jQuery set attribute example</title>
   <script type="text/javascript" 
   src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" language="javascript">

   $(document).ready(function() {
      $("#myimg").attr("alt", "Setting New Image");
   });

   </script>
</head>
<body>
   <div>
      <img id="myimg" src="no-image.png" alt="old Image" />
   </div>
</body>
</html>

Just open the above HTML page into any browser and use developer feature to inspect the elements, below image is for Chrome browser.

jQuery set attribute

Notice that alt attribute value is updated using our jQuery set attribute code.

Attributes are the basic components of the html elements helps to manipulate in jQuery. You can change the attributes in the way you want once you get access to those properties. Many methods are available in jQuery for the modifications of these attributes.

jQuery attribute methods

Some other useful jQuery method to manipulate DOM element attributes are:

  1. attr( properties ): We have already seen it’s usage, however we can use this method to set multiple key-value properties too.

    Syntax: selector.attr({ FirstProperty : First value , second Property: Second value})

    
    $( "img" ).attr({
      src: "/images/jquery.gif",
      title: "jQuery Image",
      alt: "Sample jQuery Image"
    });
    
  2. removeAttr( name ): This method is used to remove attribute from the matched elements.

    Syntax: selector.removeAttr( name ) where name is the name of the element’s attribute.

    $("table").removeAttr("border"); Here the attribute border of the table is removed using this method.

  3. hasClass( class ): This method is used to find a specified class is present on the any of the matched elements. It will return a Boolean value.

    Syntax: selector.hasClass( class )

    $("p#pID").hasClass("myClass"); – Here myClass is the CSS class name.

  4. removeClass( class ): This method is used to remove all the specified classes.

    Syntax: selector.removeClass( class )

    $("p#pID").removeClass("myClass"); – Here myClass is the CSS class name

  5. html( ): This method is used to find and get the first HTML element from the set of matched HTML elements.

    Syntax: selector.html( ), for example $( "div" ).html();

  6. text( ): This method is used get the combined text contents of matched elements. This method cannot be used for input or form elements.

    Syntax: selector.text( )

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

    In this example text method is used to get the title of the element.

These are the commonly used attribute methods in jQuery. There are many more methods than we have in this list. You can use these methods in a variety of ways in different situations.

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages