HTML and CSS Reference
In-Depth Information
NOTE
The file you download will have a different name than
jquery.js
,
because it will include the jQuery version number. You'll have to
rename it as
jquery.js
or use the full filename in your
<script>
tag. You can download jQuery in production or development config-
urations. The production configuration is “minified”—compressed
so that it downloads as quickly as possible. Unfortunately, the
minified file is unreadable by humans, so if you think you may
need to look at the jQuery source, download the development ver-
sion. Just be sure to replace it with the minified version when you
make your site live.
16
jQuery is built around the idea of selecting objects on the page and then performing
actions on them. In some ways, it's similar to CSS. You use a selector to define an ele-
ment or set of elements, and then you write some code that is applied to those elements.
Here's an example of a page that includes a simple jQuery script:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Example
</title>
<script src=”jquery.js”></script>
<script>
$(document).ready(function() {
$(“a”).click(function(event) {
alert(“You clicked on a link to “ + this.href );
});
});
</script>
</head>
<body>
<a href=”1.html”>
A link
</a>
</body>
</html>
The first
<script>
tag includes the external jQuery script. The second contains the script
I wrote. This script causes an alert to be displayed whenever a user clicks a link. As you
can see, the JavaScript is unobtrusive—all of it is inside the
<script>
tag. I'll break it
down line by line.
