jQuery is a matured open source library that makes life easy when doing some client side programming or scripting. It simplifies the way javascript is written. It is light weight, fast and works on modern browsers, thus its widely accepted among the web developers and even Visual Studion 2010 and ASP.net 4.0 now comes with it.

Its power lies in selecting, transversing and manipulating  DOM, animating and adding effects to elements in a page, handle control events, as well as implementing AJAX behaviour.

jQuery is a file of javascript code, that can be added to a page thus making it possible to use the set of features in the library. The library and its minified version can be downloaded from jquery.com

With Visual Studion 2010, if you create a new ASP.net website, by default the Scripts folder is added to the website which contains the following files:
jquery-1.4.1-vsdoc.js - used by Visual Studio code-completion feature(Intellisense)
jquery-1.4.1.js -this is used during development
jquery-1.4.1.min.js - this is the minified version suitable for production environment

To harness the power of jQuery on a page, the first thing to do is to add the script attribute to the page.


Now, ensure that the entire document has been loaded by the browser before executing any code, thus this can be achieved by adding the following inside the body tag in the page.

<script type="text/javascript">

        $(document).ready(function () {

            //your jquery codes appear here

        });

    </script>

Before we dive into writing codes, there are some things that needs to be known, jQuery is much about finding an item in the DOM and then manipulating it. The base selector function in jQuery is jQuery() or $() used for locating or selecting elements in the page.

Elements in a page can be selected in three ways
 
Selecting elements by Id for example $("#button1") will return a reference to button1 in the page.
Selecting elements by tag name for example $("h3") will return a reference to all the h3 elements found in the DOM.
Lastly elements can be selected based on cascading style sheet class name, thus $(".turnred") will return a reference to all the elements having css class turnred.

Now, lets do some animations on an html text input with Id txtEfissy, this text input will possess a watermark effect in which when it has not yet recieved focus, it will contain the text "jQuery rocks" with silver colour, and border colour of black, but the moment it receives focus, the border colour turns green, the text "jQuery rocks" is removed and the text input now has a black colour, when it loses focus, if the text input still remain empty then the text "jQuery rocks" is put back into the text input.


  Our Html text Input with water mark effect 
 
 

  the jquery code is below

 

<script type="text/javascript">

        $(document).ready(function () {

            $("#txtEfissy").css("color", "Silver");

            $("#txtEfissy").css("border-color", "Black");

            $("#txtEfissy").focus(function clearContent() {

                var s = $("#txtEfissy").val();

                if (s.trim() == "jQuery rocks") {

                    $("#txtEfissy").val("").css("color", "Black");

                    $("#txtEfissy").css("border-color", "Green");

                }

            }).blur(function returnContent() {

                var s = $("#txtEfissy").val();

                if (s.trim() == "") {

                    $("#txtEfissy").val("jQuery rocks ").css("color", "Silver");

                    $("#txtEfissy").css("border-color", "Black");

                }

            });

 

        });  

    </script>

Now, this can equally be done on an ASP.net  webform textbox server control, but to ensure that the textbox Id remains the same as the Id set at design time, the textbox's ClientIDMode is said to static.

I hope this article is helpful, I will suggest further reading at jquery.com