jQuery

jQuery Essentials

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. Below is a list of links for the major jQuery Web sites.

How to Include a jQuery Library File in Your Project

In order to be able to use jQuery in an HTML page you need to link the HTML page to the jQuery library file using a <script> element. The value of the source attribute for the <script> element can be either a locally stored jQuery library file or it can be the URL of a content distribution network's (CDN) jQuery file location.

Your options for including the jQuery library file in your HTML page(s) are listed below:

Linking the jQuery Library Manually

Step 1: Use the link provided above to locate the most recent jQuery download from the jQuery Website and download the file to your computer. Once the file has been downloaded copy the jQuery.js file into a Scripts folder off your Web site's root.

Step 2: Drag and drop the jQuery.js file into the <head> section of the HTML document where you want jQuery to be available. The reference should read: <script src="jquery.js"></script>.

Linking the jQuery Library to a Visual Studio Project

Step 1: In Visual Studio open the Tools menu and rest your mouse over the NuGet Package Manager option to reveal a flyout menu and then select Manage NuGet Packages for Solution from the flyout menu.

Step 2: When the NuGet Package Manager opens type "jQuery" into the search box and the jQuery package shown in figure xx should appear. In the right-hand column click on the Install button to begin the package installation process. You should get a Preview dialog box stating that jQuery is about to be added to your solution, click the OK button.

Step 3: Once the package installation is complete verify that jQuery.js has been added to the Scripts folder in your solution.

Using a Content Delivery Network (CDN) Reference to the jQuery Library

Step 1: In the <head> section of any HTML document where you want to have jQuery available type the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

jQUery Core

jQuery Selector

In order to target an element in your HTML page you can use several jQuery options:

$("element");
$("#id");
$(".class");

Selecting by element type or class name will return an array of zero or more DOM nodes whereas selecting by id value will return only the specified node.

To apply a jQuery method to a node use the .method notation, for example:

$("#fName").animate(...);

In the example above a DOM node with the id of "fName" is selected and then animated as instructed by the parameters passed to the jQuery animate() method.

Displaying what key is pressed

$(document).keypress(function(event){ alert(String.fromCharCode(event.which)); })

jQuery Demo for Class

Download this HTML file for a demo of jQuery by right-clicking on the link and choosing save link as.