Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 2: Working with jQuery CHAPTER 6 287


After locating jQuery, click the Install button. The installation will start and, in a moment,
you’ll see a green check box on jQuery, indicating that the installation has completed suc-
cessfully. Click the Close button and look at the Solution Explorer window, as shown in
Figure 6-10. If your project didn’t have a Scripts folder, a Scripts folder was added. Inside the
Scripts folder, you’ll find the latest release of jQuery. There is a file for IntelliSense and a com-
plete jQuery library file. Finally, there is a minimized version of jQuery, which is the file you
use at production time to minimize bandwidth usage.

FIGURE 6-10 he completed installation of jQueryT

Using jQuery


You’re probably still trying to understand what jQuery is and how you benefit from using it,
so the first feature to learn is how to use jQuery to locate an element or a group of elements.
First, the jQuery library must be referenced on the page on which you will be using it. In this
first example, the basic QUnit Test.html file is used, and the jQuery library is added so that the
file contains the following HTML.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Content/qunit.css" />
<script type="text/javascript" src="Scripts/qunit.js"></script>
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="Scripts/default.js"></script>
<script type="text/javascript" src="Scripts/tests.js"></script>
</head>
<body>
Free download pdf