This video tutorial will show beginners exactly how to get started with jQuery.

To Download this video, Click Here

Text Content:

This tutorial is aimed at complete beginners. An assumption is made that you have a basic working knowledge of JavaScript syntax.

JQuery library can be downloaded at www.jquery.com. Here, we use the uncompressed version since this is for only learning purposes. The compressed version is to be used in actual website designs.

Visual Web Developer is used to develop.

First, the library is added to the solution. Add page “index.htm” to the solution. Delete the “Default.aspx” and “Web.Config” files in the solution.

Change the title to “JQuery for Absolute Beginners”. Click and drag the jQuery Library from Solution Explorer to add the script tag in the head section of the page.

Lets create a paragraph which we don’t want to display unless the user clicks a button.
Just create a paragraph with some data in it.
Create an Anchor tag to perform an operation on it. The anchor tag points to nowhere (href=”#”), has the id “paragraphAnchor” and Inner Text “Click To Read Paragraph”.
To achieve the aimed functionality, javascript code is added to the header tag.
<script type=”text/javascript”> tag is added to the head section.

The very first thing that needs to be done in jQuery is to add an abbreviation of the jQuery symbol – the DOLLAR ($) sign.
After dollar sign, type:

$(document).ready(function()  – this is same as in .NET kind-of functionality with “.”. This line tells that jQuery, when the page is ready to be manipulated, a function is going to be executed (without any parameters). A function is just lines of code that is going to instruct what to do.

Then, include a Javascript block with “{” and “}” and then close the paranthesis with “)”. – (this was opened after “ready” keyword)

Now, within the block, some code is written to hide the paragraph we created previously.

$(”p”).hide();
This code is used to get the paragraph. p can be in single or double quotes.

When this code is executed in the browser, the paragraph is invisible (i.e. hidden).

Also, when multiple paragraphs are there in the document, the code is going to hide all of them. To avoid this and target the functionality to a single paragraph, an id=”paragraph1″ is added to the required paragraph. And accordingly, in the jQuery code, the $(”p”).hide(); code is replaced with:

$(”p#paragraph1″).hide();

Note that the selector is as same as CSS syntax. This is why jQuery is so attractive.

We can make the paragraph visible in the next part of this tutorial.