Scope and Uses and implementation of JQuery

There are three pieces to most examples of jQuery usage: the HTML document itself, CSS files to style it, and JavaScript files to act on it. For our first example, we'll use a page with a book excerpt that has a number of classes applied to portions of it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8"/>

<title>Through the Looking-Glass</title>

<link rel="stylesheet" href="alice.css"

type="text/css" media="screen" />

<script src="jquery.js" type="text/javascript"></script>
<script src="alice.js" type="text/javascript"></script>

</head>

<body>

<h1>Through the Looking-Glass</h1>

<div class="author">by Lewis Carroll</div>

<div class="chapter" id="chapter-1">

<h2 class="chapter-title">1. Looking-Glass House</h2>

<p>There was a book lying near Alice on the table,

and while she sat watching the White King (for she

was still a little anxious about him, and had the

ink all ready to throw over him, in case he fainted

again), she turned over the leaves, to find some

part that she could read, <span class="spoken">

"&mdash;for it's all in some language I don't know,"

</span> she said to herself.</p>

<p>It was like this.</p>

<div class="poem">

<h3 class="poem-title">YKCOWREBBAJ</h3>

<div class="poem-stanza">

<div>sevot yhtils eht dna ,gillirb sawT'</div>

<div>;ebaw eht ni elbmig dna eryg diD</div>

<div>,sevogorob eht erew ysmim llA</div>

<div>.ebargtuo shtar emom eht dnA</div>

</div>

</div>

<p>She puzzled over this for some time, but at last

a bright thought struck her. <span class="spoken">

"Why, it's a Looking-glass book, of course! And if

I hold it up to a glass, the words will all go the

right way again."</span></p>

<p>This was the poem that Alice read.</p>

<div class="poem">

<h3 class="poem-title">JABBERWOCKY</h3>

<div class="poem-stanza">

<div>'Twas brillig, and the slithy toves</div>

<div>Did gyre and gimble in the wabe;</div>

<div>All mimsy were the borogoves,</div>

<div>And the mome raths outgrabe.</div>

</div>

</div>

</div>

</body>

</html>