JQuery Attributes

In addition to manipulating elements via selectors, JQuery attributes contains functions which can retrieve values of attributes of any element and change them. Attributes modify HTML elements. For instance an “img” tag contains a “src” attribute which points towards the physical location of the image. Similarly “a” tag contains “href” attribute that contains the link.

Selecting JQuery Attributes

The attr() function selects the attribute of the element on which it is called. The attr() method takes name of the attribute to select as a parameter. The following explains how to select attribute of any element using JQuery.

<!DOCTYPE html>
<html>

    <head>
        
         <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
            var linkadd = $("a").attr("href");
            $("#linkid").text(linkadd);
         });
      </script>
        
   </head>
	
   <body>
      <div>
         <a href="www.google.com">This is a link</a>
          <p>This link points to:</p>
          <p id = "linkid"></p>
      </div>
   </body>

</html>

Download Code
Run Code

The above web page contains a link with an href attribute. The “href” attribute points to www.google.com. If you look at the script section in the header, you will see that, the factory function $ selects the “a” tag and then calls the attr() method on it. The parameter passed to attr() is the “href”. This means that the attr() method will select the value inside this “href” attribute i.e. the link to google.com and will store it in “linkadd” variable.

Next, the “text” function is called on the selected element with id “linkid”. This function changes text of selected element. The “linkadd” variable is passed to this function. This will change the text of paragraph with id “linkid” to www.google.com.

Setting JQuery Attributes

The attr() function can also set the value for any given attribute of the html element. For setting, attribute values, attr() function takes two parameter: name and value. The name specifies the name of the attribute to set, and the value specifies the value that should be assigned to the selected attribute. The following example demonstrates this concept.

<!DOCTYPE html>
<html>

    <head>
        
         <title>JQuery attribute selectors</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
          $(document).ready(function() {
            $("#linkid").attr("href","http://www.google.com");
         });
      </script>
        
   </head>
	
   <body>
      <div>
         <a id="linkid">This is a link</a>
          
      </div>
   </body>

</html>

Download Code
Run Code

The above code selects the elements with id “linkid” and set the value of their “href” attribute to “http://www.google.com”

<<< JQuery SelectorsJQuery Applying Styles >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .