The use of the JQuery functionality we are reviewing today requires that you include the JQuery Javascript library into your code. Every page that you create which relies upon JQuery functionality must include a <script> tag in the XHTML that indicates where the browser can find the JQuery files.
Downloading the JQuery files
To begin creating a project that uses JQuery, you must download the JQuery library. Here are the relevant URLs:
- the core JQuery library (required for all JQuery projects)
- the JQuery UI library (required if you want to use the JQuery UI components)
This will give you copies of the JQuery library files.
Setting up your project workspace
Then, as usual in web development, you will need to set up a project folder for the new project For example, if my project is called “my_project”, I will need to create the following project files and folders within my workspace folder, which we’ll call “my_workspace”:
- /my_workspace/my_project/
- /my_workspace/my_project/images/
- /my_workspace/my_project/scripts/
- /my_workspace/my_project/styles/
The you will need to put the minimum necessary files into these folders:
- /my_workspace/my_project/index.html
- /my_workspace/my_project/styles/main.css
If you are using JQuery, then you must copy the JQuery files you downloaded into the scripts/ folder for this project:
- /my_workspace/my_project/scripts/jquery-1.3.2.js
… and any other JQuery-related libraries, such as “ui.core.js” if you are using the JQuery UI, would go into this same scripts folder
Including JQuery into XHTML files
Once you have downloaded the JQuery library files, and you have properly set up your project workspace, you are ready to write XHTML code.
To include JQuery into your XHTML, you must use <script> tags in the <head> section of your XHTML document. These tell the browser where to find the JQuery code.
For example, the minimum amount of XHTML code necessary for a JQuery project would look like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>The Title of Your Page</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
//use jquery to detect when the page has fully loaded
$(document).ready(function() {
//put code here that you want to run after the page fully loads
});
</script>
</head>
<body>
<!-- the contents of the page go here -->
</body>
</html>
Related posts:
- Class 6 – Some Useful JQuery Plugins
- Class 6 – Introduction to JQuery
- Clas 6 – Deconstructing JQuery Syntax
- Class 6 – Recap of JQuery Examples
- Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery