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
.addClass()- .attr()
- .hasClas()
- .html()
- .removeAttr()
- .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
-
.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
![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]()