JQuery: A Quick Start Guide

ASP.NET Community

Rate me:

4.59/5 (10 votes)

26 Oct 2013CPOL2 min read

32.4K

This article is an introduction to JQuery. It is for those people who always heard JQuery but never used it or don’t know where to start from.What is

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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.
HTML
```
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script> 
```

Point to hosted JavaScript library at Microsoft.

HTML

<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

<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:

JavaScript

$(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:

JavaScript

$(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.

This article was originally posted at http://wiki.asp.net/page.aspx/1486/jquery-a-quick-start-guide

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

ASP.NET Community

United States

The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, ~~googling~~live-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.

The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.

This is a Collaborative Group

754 members

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.