JQuery Introduction Step By Step Tutorial - Part 2: You can get jQuery from the official jQuery website (http://jquery.com). May be you will get several jQuery versions at their website. Take the latest uncompressed version of the library.
Actually, we don't need any compilation. We just need to place jQuery library (with .js extension) on our site.
For practice, create a folder named "jquery" within www/test. Place jQuery library within it. May you get file named like jquery-1.2.3.js. To simplify, rename file become "jquery.js".
For use it, we just call library like following code in our header html:
<script src="jquery.js" type="text/javascript"></script>
Ok, it's time to try. Create a file named "myfirstjquery.html". Enter following code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First JQuery</title>
<link rel="stylesheet" href="mycss.css" type="text/css" media="screen">
<script src="jquery.js" type="text/javascript"></script>
<script src="myjs.js" type="application/javascript"></script>
</head>
<body>
<div id="container">
<H1>My First Song</H1>
<div class="author">Every children</div>
<div class="song" id="song-1">
<H2 class="song-title">1. Playgroup</H2>
<p>This is very popular playgroup song</p>
<div class="lyric">
<h3 class="lyric-title">Twinkle-Twinkle Little Start</h3>
<div class="lyric-text">
<div>Twinkle-twinkle little start</div>
<div>How I wonder what you are</div>
<div>...</div>
</div>
</div>
<div class="lyric">
<h3 class="lyric-title">Babablackship</h3>
<div class="lyric-text">
<div>Babablackship have you any wool</div>
<div>Yes sir, yes sir, three bag full</div>
<div>...</div>
</div>
</div>
</div>
</div>
</body>
</html>
Then, create a CSS file named "mycss.css". Enter following code:
@charset "utf-8";
/* CSS Document */
body {
font: 75% Arial, Helvetica, sans-serif;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.2em;
margin-bottom: .5em;
}
h3 {
font-size: 1.0em;
margin-bottom:0;
}
.lyric{
margin: 0 2em;
}
Ok, point your browser to http://localhost/test/jquery/myfirstjquery.html. You may get like this:
Next, we will modify this page use jQuery.
