We are going to look into 4 important attributes of JQuery
4 important attributes of JQuery
JQuery is nothing but JavaScript library and it contents
lot of classes to play with web user interface. And a good JQuery
implementation can reduce server load very much. So it’s very much essential to
use JQuery to develop rich user interface.
There are lot of attributes are there in JQuery but lets look into 4 popular attribute among them it’s functionality
practically.
Attributes are used to set some property of HTML
element. Basically using those attributes we can change element property, their look in run time. So, lets start with them.
Add
class
If you know css and familiar with concept of class ,then
you can understand it easily. Using
assClass attribute to can assign a css class to an attribute.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
p{ margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:green; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<p>Sourav</p>
<p>and</p>
<p>Kayal</p>
<script>
$("p").last().addClass("selected highlight");
</script>
</form>
</body>
</html>
html property
Using html property we can set any html code to an existing
HTML element. In below code you can see 3 div tags in the body and
within script tag content of div tag. So, when needed we can set
content in run time.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div></div>
<div></div>
<div></div>
<script>
$("div").html("This is added by html attribute");
</script>
</form>
</body>
</html>
Value
Value is one of the important attribute of JQuery.
Using Value attribute we can get selected value of drop down/checkbox/radio
button by user. So when event will occur by user we can get value of those
element immediately.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<select id="single">
<option>Sourav</option>
<option>Kayal</option>
</select>
<script>
$("select").change(function () {
var singleValues = $("#single").val();
alert(singleValues);
});
</script>
</form>
</body>
</html>
hasClass
has class attribute is needed basically
for Styling purpose. We can use hasClass attribute to make-up an element with
certain condition or depending on look of other element. Example code is given
below.
<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="ASP.NET.WebForm6"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<style>
p { margin:
8px; font-size:16px; }
.selected { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
</head>
<body>
<form id="form1" runat="server">
<p>This paragraph is black and is the first
paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">Atleast one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</form>
</body>
</html>
