Introduction
This article is an introduction to jQuery. It is for those people who heard off jQuery but never used it or don’t know where to start from.
What is JQuery?
jQuery is a powerful JavaScript library, yes it is not a language.
jQuery helps us to write clean and less code.
Example:
You may use jQuery functions and objects to find and manipulate HTML elements.
Where to Start?
To use jQuery you have to include the jQuery library in .aspx page in the same way as we include external JavaScript files.
There are two ways to achieve this:
- Download the latest JavaScript library here and include it in your project solution.
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>
- Point to hosted JavaScript library at Microsoft.
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
Now you can use the JQuery functions and objects.
What about Visual Studio’s Intellisense for jQuery?
There are two versions of jQuery library available for download.
Minified version (compressed) - Size is less, white spaces are removed, non-readable.
Regular version (non-Compressed) - Size is comparatively more, readable.
As if for now the Visual Studio Intellisense documentation is available for JQuery 1.4.1 so we will use jQuery 1.4.1 version here although 1.4.2 version of jQuery is available. The procedure remains same for other versions of jQuery library.
For Visual Studio’s Intellisense support for jQuery download the regular version of library here and Visual Studio Intellisense documentation for jQuery here.
Keep both files (jquery-1.4.1.js and jquery-1.4.1-vsdoc.js) under the same folder in project solution. The Intellisense will pick up the documentation file and will provide support for jQuery.
If the intellisense doesn’t work for jQuery please install this hotfix: KB958502 - JScript Editor support for “-vsdoc.js” IntelliSense doc. files.
Is jQuery hard to learn?
No, jQuery is easy to learn, below example will help to understand the syntax and the way to use jQuery in your website.
Example:
This example hides <b> element smoothly using jQuery on button's click event.
<html>
<head>
<title>JQuery Demo</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Button").click(function() {
$("b").hide(1000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server"> <b>Bold Contents Here.</b><br /> <input type="button" id="Button" runat="server" value="Hide Contents" /></form>
</body>
</html>
Basic Syntax of JQuery:
$(Selector).action()
$:
Indicates it is a jQuery.
Selector:
Id of an element (prefixed by #), HTML element itself, CSS class (prefixed by . (Period)) Etc.
Examples:
$(“#myButton”) - selects html element with id “myButton”.
$(“p”) - selects html paragraphs.
$(“.myclass”) - selects html elements which have their class ”myclass”
action():
A action (function) to be fired on that element.
Lets now intercept the code:
$(document).ready(function() {
$("#Button").click(function()
{
$("b").hide(1000);
});
});
The first line of code checks whether the document has finished loading and is ready for jQuery operations on HTML loaded.
The third line attaches a functions which is to be fired on button’s click. This function hides all <b> elements smoothly (1000 represents time in milliseconds for delay in hiding the element).
Where to go now from here?
This was just an introduction to jQuery. jQuery has much more capabilities and features like CSS manipulations, AJAX and JavaScript animations and effects.
You can study jQuery library in depth here.
Hope this article provides help to jQuery beginners.
