Post
Ask Question

Attributes in jQuery


Introduction: Here we will discuss about the attributes used in the jQuery, In jQuery API there are attributes which contains many methods we will explain these one by one. Further these methods is used to get or set the attributes used in Dynamic Object Model. Let's see the methods name which will comes in it given below

Methods: There are some methods we will discuss about will be as

  1. .addClass()
  2. .attr()
  3. .hasClas()
  4. .html()
  5. .removeAttr()
  6. .removeClass()

Step 1: .addClass(className) is the method is used to add one or more class names can be added to the class attribute of each element. You may be added more than one class by separating or giving space between the class name to the set of matched element.

Syntax: Let see how we add two classes in it $("div:last").addClass("selected");

Code: Further the example is given below.
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <style type="text/css">
    div{margin:4px; font-size:16px;}
    .selected{color:Maroon;}
</style>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 </head>
<body>
    <form id="form1" runat="server">
    <div>Welcome
    </div>
    <div>Amit</div>
    <div>Maheshwari</div>
    </form>
    <script type="text/javascript">
        $("div:last").addClass("selected");
 </script>
 </body>
</html>

Output:

output

Step 2: .attr() is the method which is a general attribute the other two methods comes in this category name as

  1. .attr( attributeName )  is used to retrieve or get the value of an attribute for the first element in the set of matched elements. where the argument passed in the .attr method is the name of attribute which we have to retrieve or get. let see an example given below.

Code:
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <style type="text/css">
    i{color:Maroon; font-weight:200;}
    div{margin:8px; font-size:16px}
</style>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 </head>
<body>
    <form id="form1" runat="server">
    <p> My Name is<i id="i1">Khan</i></p>
    </form>
    <script type="text/javascript">
        $("i").attr("id");
 </script>
 </body>
</html>

Output:
Step_2_1_2fig.gif

  2. .attr(attributeName, value) is used to retrieve or get the name of attribute and also used to set the value of that attribute the above example will shows you how to set

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <style type="text/css">
    img{padding:10px; width:87px;}
    div{color:Red; font-size:16px}
</style>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 </head>
<body>
    <form id="form1" runat="server">
    <div>
    <img />
    </div>
    </form>
    <script type="text/javascript">
        $("img").attr({
            src: "aquarium-wallpaper-240x150-1111036.jpg",
            title: "Aquarium Image",
            alt: "Image"
        });
 </script>
 </body>
</html>

Output:


Step_2_2_2fig.gif

Step 3: .hasClass() is the method which is used to check whether the matched attribute has the class name which is defined and search the element which have the class matched.

let see how  it we write the multiple class name which is given below , p1,p2 are the two different class which is given below in figure first and it will return true if there is any match for class name p1,p2 and otherwise will return false.


Step_3_1fig.gif

It will return only true.

Step_3_2fig.gif

It will return false because p3 class is not matched with the attribute element.

Step_3_3fig.gif

Step 4: .html method is used to retrieve the html contents of the first element in the set of matched element

When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Consider the following HTML:

Step_4_1fig.gif

The content of <div id="d1" class="cl1"> can be set like this:

Step_4_2fig.gif

In the code above will replace everything which is inside <div id="d1" class="cl1">:

Step 5: .removeAttr() method is used to remove the attribute from each element in the set of each matched elements.

Syntax: .removeAttribute(AttributeName) now further we will explain it by given an example.

Let's look how will write the code to remove the attribute.

Step_5_1fig.gif

Step_5_2fig.gif

Step_5_3fig.gif

Step 6: .removeClass() is the method is used to remove one or more class which is being matched with the attribute elements let we see how we will do this.

Step_6_1fig.gif

Step_6_2fig.gif


Similar Articles