Following are the steps to download jQuery:

jQuery is available in two different major versions at the time of writing:

Though the Application Programming Interface (API) is the same for both major versions, the difference lies in the support offered for certain browsers. The 2.x line does not support old browsers, such as IE 6, 7, and 8, while the 1.x line continues with this support. So, if the end users of your application will not be using old browsers, you can download the 2.x version.

The jQuery library consists of a single JavaScript (.js) file and can be downloaded in the following formats:

To download the file, simply right-click on the required version, 1.x or 2.x, and the required format: uncompressed or compressed. Save the file in a location of your choice as shown in the following screenshot:

Note the following naming convention for the jQuery library:

The compressed (minified) version is clearly distinct from the uncompressed version because of the .min.js extension. The minified file uses code optimization techniques, such as removing whitespaces and comments as well as reducing variable names to one character. This version is difficult to read, so the uncompressed version is preferred when debugging.

On the download page, there is also a map file available with the .min.map extension. Sometimes, when bugs appear in the production environment necessitating troubleshooting, the use of the minified file for debugging can be difficult. The map file simplifies this process. It maps the compressed file back to its unbuilt state so that during debugging, the experience becomes similar to using the uncompressed version.

The Understanding CDN for jQuery recipe.

The following CDNs are available for jQuery files:

To include jQuery on a web page, the URL of the respective CDN can be used so that files can be directly served from the CDN instead of using the local copies. The following table summarizes the respective CDN URLs for jQuery files:

CDNs consist of servers situated in data centers in strategic locations across the globe. When a client requests a resource from a CDN, the server that is geographically closest to the client processes the request. These servers are also known as edge servers. In addition to this, edge servers have a caching mechanism to serve various assets. All this helps you improve the client's response time.

The Using NuGet Package Manager to download jQuery recipe

To launch NuGet for a particular project, go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution... as shown in the following screenshot:

Alternatively, right-click on the project in the Solution Explorer tab, and select Manage NuGet Packages.

Perform the following steps to download jQuery using NuGet Manager:

The NuGet Package Manager downloads the selected version of jQuery in the Scripts folder. Any other version existing in the Scripts folder is deleted. The Scripts folder will look like the following screenshot:

The files downloaded by NuGet are as follows (the version numbers may change in the future):

The Downloading jQuery from jQuery.com recipe

Following are the steps to create a project by using Empty template:

Following are the steps to include jQuery using script block:

The Downloading jQuery from jQuery.com recipe

Following are the steps to add jQuery to ASP.NET web project using the ScriptManager control:

This is how the ScriptManager control works:

The Adding jQuery to an empty ASP.NET web project using a script block recipe

To incorporate jQuery in an ASP.NET Master Page, follow these steps:

On running the application, when the Default.aspx content page is loaded, the HTML markup from the Master page adds the reference to the jQuery library. This makes the content page jQuery-ready so that any jQuery code can be executed.

To check whether the jQuery reference has been added to the page, run the project and launch Default.aspx in the browser. Right-click on the page in the browser window and select View Source. The jQuery reference will be seen on the page, as shown in the following screenshot:

The Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe

In the Page_Load event handler of Default.aspx.vb, use the RegisterClientScriptInclude method to generate a script block on the page, as follows:

For VB, the code is as follows:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
   Page.ClientScript.RegisterClientScriptInclude("jquery",   Page.ResolveUrl("~/Scripts/jquery-2.1.4.js"))
End Sub

For C#, the code is as follows:

protected void Page_Load(object sender, EventArgs e)
{
   Page.ClientScript.RegisterClientScriptInclude("jquery",   Page.ResolveUrl("~/Scripts/jquery-2.1.4.js"));
}

The RegisterClientScriptInclude method requires two parameters: the key and URL. It adds the script block with the path to the jQuery library in the <form> element, as shown in the following screenshot. The Page.ResolveUrl method is used to return a URL relative to the site root:

Since the jQuery library is added to the <form> element, all the jQuery code should be written in the <form> element instead of the <head> element, preferably toward the end of the page before closing the <form> element.

The Adding jQuery to an empty ASP.NET web project using a script block recipe

Here are the steps to create an ASP.NET web application using the default web application template:

When you follow the preceding steps, this is how the web application is mapped to the jQuery library:

The Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe

If a jQuery reference is added to the <head> element, then include the following <script> block in the <head> element. Otherwise, include the <form> element, preferably before the <form> tag is closed:

<script type="text/javascript">
   $(document).ready(function () {
      var fontStyle = "Arial";
      var fontSize = 28;
      $("#<%=lblMessage.ClientID%>").css("font-family", fontStyle);
      $("#<%=lblMessage.ClientID%>").css("font-size", fontSize);
      $("#<%=lblMessage.ClientID%>").text("Hello World!!");
});
</script>

Following are the steps to print Hello World!! in a web project using jQuery:

The Hello World in ASP.NET MVC using jQuery recipe

Follow these steps to bundle jQuery in ASP.NET MVC:

Bundling jQuery in ASP.NET MVC can be done by following these steps:

The Using a CDN to load jQuery in MVC recipe

This recipe is a continuation of the previous recipe, Bundling jQuery in ASP.NET MVC. So, follow all the steps described in the previous recipe.

Following are the steps to load jQuery in MVC:

Following are the steps to load jQuery in MVC using CDN:

The Hello World in ASP.NET MVC using jQuery recipe

Use the MyMvcApplication project created in the Bundling jQuery in ASP.NET MVC recipe.

Following are the steps to write simple jQuery code:

Following are the steps to print Hello World in ASP.NET MVC using jQuery:

The Bundling jQuery in ASP.NET MVC recipe

Debugging jQuery code in Visual Studio can be done by performing the following steps:

The Hello World in a web project using jQuery recipe