JQuery Attribute

Attribute in JQuery

Some of the most basic components we can manipulate when it comes to DOM elements are the properties and JQuery attribute assigned to those elements.

Some of the more common properties are :

i)ClassName
ii)TagName
iii)Id
iv)href
v)title
vi) rel
vii) src


Get Attribute Value:

The attr() method can be used to either fetch the value of an attribute from the first element in the matched set or set attribute values onto all matched elements.

Example:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = “text/javascript”
         src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>
      </script>
      <script type = “text/javascript” language = “javascript”>
         $(document).ready(function() {
            var title = $(“em”).attr(“title”);
            $(“#divid”).text(title);
         });
      </script>
   </head>
   <body>
      <div>
         <em title = “Bold and Brave”>This is first paragraph.</em>
         <p id = “myid”>This is second paragraph.</p>
         <div id = “divid”></div>
      </div>
   </body>
</html>

Set Attribute Value:

The attr(name, value) method can be used to set the named attribute onto all elements in the wrapped set using the passed value.

Example:

<html>
   <head>
      <title>The jQuery Example</title>
      <base href=”https://www.tutorialspoint.com” />
      <script type = “text/javascript”
         src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>
      </script>
      <script type = “text/javascript” language = “javascript”>
         $(document).ready(function() {
            $(“#myimg”).attr(“src”, “/jquery/images/jquery.jpg”);
         });
      </script>
   </head>
   <body>
      <div>
         <img id = “myimg” src = “/images/jquery.jpg” alt = “Sample image” />
      </div>
   </body>
</html>

Applying Styles:

The addClass( classes ) method can be used to apply defined style sheets onto all the matched elements. You can specify multiple classes separated by space.

Example:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = “text/javascript”
         src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”>
      </script>
      <script type = “text/javascript” language = “javascript”>
         $(document).ready(function() {
            $(“em”).addClass(“selected”);
            $(“#myid”).addClass(“highlight”);
         });
      </script>
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style> 
   </head>
   <body>
      <em title = “Bold and Brave”>This is first paragraph.</em>
      <p id = “myid”>This is second paragraph.</p>
   </body>
</html>

Here is a complete list of attribute methods in different situation  :

Sr.No.   Selector      Description
1.$(“#myID”).attr(“custom”)This would return value of attribute custom for the first element matching with ID myID.
2.$(“img”).attr(“alt”, “Sample Image”)This sets the alt attribute of all the images to a new value “Sample Image”.
3.$(“input”).attr({ value: “”, title: “Please enter a value” });Sets the value of all <input> elements to the empty string, as well as sets The jQuery Example to the string Please enter a value
4.$(“a[href^=https://]”).attr(“target”,”_blank”)Selects all links with an href attribute starting with https:// and set its target attribute to _blank.
5.$(“a”).removeAttr(“target”)This would remove target attribute of all the links.
6.$(“form”).submit(function() {$(“:submit”,this).attr(“disabled”, “disabled”);});This would modify the disabled attribute to the value “disabled” while clicking Submit button.
7.$(“p:last”).hasClass(“selected”)This return true if last <p> tag has associated class selected
8.$(“p”).text()Returns string that contains the combined text contents of all matched <p> elements.
9.$(“p”).text(“<i>Hello World</i>“)This would set “<I>Hello World</I>” as text content of the matching  <p> elements.
10.$(“p”).html()This returns the HTML content of the all matching paragraphs.
11.$(“div”).html(“Hello World”)This would set the HTML content of all matching <div> to Hello World
12.$(“input:checkbox:checked”).val()Get the first value from a checked checkbox.
13.$(“input:radio[name=bar]:checked”).val()Get the first value from a set of radio buttons.
14.$(“button”).val(“Hello”)Sets the value attribute of every matched element <button>.
15.$(“input”).val(“on”)This would check all the radio or check box button whose value is “on”.
16.$(“select”).val(“Orange”)This would select Orange option in a dropdown box with options Orange, Mango and Banana.
17.$(“select”).val(“Orange”, “Mango”)This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.

Spread the love

Leave a Comment

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