JQuery is a free open source JavaScript Library.It simplifies the task of creating highly responsive web pages and works across all modern browsers.
jQuery makes it simple getting and manipulating page contents and has a sophisticated effects library like animation without using additional plugins.
JQuery leverages your existing knowledge of CSS. JQuery makes it easy working with sets of elements like say paragraphs in a page of list items in an ordered list.
It is possible to perform multiple operations on a set of elements with onle line of code known as statement chaining.
Visual Studio 2010 has default support for jQuery.
If you start a New Web Site in Visual Studio 2010 you can see that a Script folder is present.
Inside that you can see 3 jquery files. jquery-1.4.1.js is the developer version which is of 165 kb size. jquery-1.4.1.min.js is the minified or production version which is of 71 kb and jquery-1.4.1-vsdoc.js which is the version with extra comments that enable visual studio intellisense for jQuery.
I strongly recommend you exploring these three jquery files.
Add a script referencet to the jquery library and let's explore the first example.
$("document").ready(function Hello() {
alert("Welcome to JQeury");
});
The $() function (an alias for the jQuery() function) returns a special JavaScript object containing an
array of the DOM elements that match the selector.
document.ready() function gets triggered after the whole DOM tree of the page gets loaded.
jQuery Selectors and filters
jQuery selectors and filters retrieve contents from the document so it can be manipulated using other functions. This is the query part of jQuery.
JQuery selectors return an array of objects that match the selection criteria. JQuery filters operate on a selector to further refine the results array that the selector returns.
Thing to be noted is that the array that selector returns is not a set of DOM elements. It is a collection of jQuery objects that provide a large number of predefined functions for further operating on the objects.
Selector | Intend |
tagname | Find all elements that are named tagname |
#identifier | Finds all elements with ID of identifier |
.className | Finds all elements that have class attibute with the value of className |
tag.className | Gets elements of type tag that have a class attribute with the value of className |
tat#id.className | Retrive the tag element that has a ID of id and a class attribute with the value of className |
You can observe that jQuery have borrowed heavily from CSS making it easy for a person with knowledge in CSS to the transformed to jQuery.
For example, if you want to hide all the paragrahs in a page. The jQuey command will be :
$("p").hide()<%@ 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">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script>
$("document").ready(function () {
$("p").hide()
});
</script>
<title>Shalvin jQuery</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<p>
Shalvin Specializations</p>
<p>
Asp .net</p>
<p Id = "Orm" >
Entity Framework</p>
<p>
C#</p>
<p>
VB .Net</p>
<p>
SQL</p>
</body>
</html>
Suppose you want to hide only the paragrph with the id Orm the jQuery command will be as follows:
$("#Orm").hide()
To be continued..
