Jquery
Selectors:
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.
0 comments:
Post a Comment