JQuery Selectors and Attributes:
Jquery selectors are the most important aspects of the Javascript library.
Basic syntax is: $(selector).action ()
In jQuery, the $ sign is just an alias to jquery ()
Selectors are the elements in the html document. It allows you to select and manipulate html elements.
Elements by Id:
It is the most commonly used selector type. It is used to select a single, unique element. The fastest way to select element is by its ID selector. We can match elements based on Id with ‘#’ operator.
Syntax is: $(‘#Idofelement’).action ()
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txtCaption').val("www.Jqueryjohn.com");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtCaption" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Elements by Class:
It is used to select all the elements with the given class. We can match elements based on the class name with dot (.) operator.
Syntax is: $(‘.className’).action ()
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.Txt').val("Jqueryjohn.com");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtCaption" class="Txt" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Elements by TagName:
It is used to select the elements based on the Tag Names.
Syntax is: $(‘TagName’).action ()
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnHide').click(function () {
$('div').hide();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtCaption" class="Txt" runat="server"></asp:TextBox>
<asp:Button ID="btnHide" runat="server" Text="Hide" />
</div>
</form>
</body>
</html>
The above example hides all the elements with the tagname ‘div’. Inside the button click event I am using ‘return false’, which is used to restrict server side calls. If the client side function returns true only, it will redirect to server side.
Jquery Attributes:
<p id="idAttr" title="Jquery Attributes" lang="en">Sample Text</p>
From the above element,
Tag Name is – p
Attributes are – id, lang, title
Set Attributes value:
The attr (name, value) method used to set the attributes using the passed values.
$('p').attr ("style", "background-color: Red");
Get Attributes value:
The attr () method used to fetch the value of the attribute
var values = $('p').attr("title");
alert(values);
Remove Attributes value:
The removeAttr () method used to remove the value of the attribute
$('p').removeAttr("style");
Add Class (Css Stylesheet):
The addClass () method used to add cascading style sheet classes to the element.
$('p').addClass("Yellow");
Remove Class (Css Stylesheet):
The removeClass () method used to remove cascading style sheet classes to the element.
$('p').removeClass("Yellow");
Example - Jquery
Attributes:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$('#btnGet').click(function () {
var
values = $('p').attr("title");
alert(values);
return
false;
});
$('#btnSetAttr').click(function
() {
$('p').attr("style", "background-color
:Red");
return
false;
});
$('#btnRemoveAttr').click(function () {
$('p').removeAttr("style");
return false;
});
$('#btnAddClass').click(function () {
$('p').addClass("Yellow");
return
false;
});
$('#btnRemoveClass').click(function () {
$('p').removeClass("Yellow");
return
false;
});
});
</script>
<style
type="text/css">
.Yellow
{
background-color:
Yellow;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<p id="idAttr" title="Jquery Attributes" lang="en">
Jqueryjohn.com
</p>
<asp:Button ID="btnGet" runat="server" Text="Get Attribute" />
<asp:Button ID="btnSetAttr" runat="server" Text="Set Attribute" />
<asp:Button ID="btnRemoveAttr" runat="server" Text="Remove Attribute" />
<asp:Button ID="btnAddClass" runat="server" Text="Add Class" />
<asp:Button ID="btnRemoveClass" runat="server" Text="Remove Class" />
</div>
</form>
</body>
</html>
In the next lesson, I will explain about ‘Animation
and Effects in jQuery’.
Go to Lesson Three- Animation
and Effects in jQuery
Learning Jquery.. Thnks John. Nice work. Keep it up .. :)
ReplyDeleteThank you. Keep learning Maniraj...
Delete