Hey everyone! In this tutorial I’ll be teaching you how to include the jQuery library in your HTML file, and I’ll also teach you some of the basic syntax and cool effects of jQuery. Let’s get started.
Okay, so there are two ways you can include the jQuery library in your HTML file. One is to directly link to the source file located at Google Libraries.
Second is to download the jQuery library from their website, and include it within the same folder where your other files are located. First I’ll teach you
how to include it using Google Libraries.
II) The second way to include the library is to go to jquery.com and click on download. You’ll download a whole zip file of folders and files, but what we’re interested
in for now is the core jQuery source. So you’ll open the folder “js” and you’ll see the file “jquery-1.3.2.min.js”, (the numbers might be a little different, but more or less
this is how the file will look like) this is the one you want to use. So you’ll copy this file and paste it into the folder that contains your other files, like the HTML and CSS.
And now you have jQuery included in your files! Let’s start using some of its functions. By the way, dont forget to create a CSS file where all our styling will go for our
HTML elements. Link it to the HTML file as shown above in the picture.
The way jQuery works is by this simple syntax: $(selector).action() — It selects something within your HTML file, and then performs some action on it. The dollar sign
is a definition for the jQuery Library. A simple example would be $(“#header”).hide() This example hides the div with ID header. Divs are defined by the symbol “#” and classes
by the symbol “.” (Just like in CSS).
2: Okay, so let’s get on to an actual example. Shown below is how we’re going to set up our HTML and CSS files to test out some new jQuery functions.
Okay so within the header in the HTML file, we write
Take out the line that says “// jQuery functions will go here…” and we’ll add a jQuery function for our title first! Okay so the syntax will be:
What this does is, when h2 is clicked, it calls a function and within that function it will animate only THAT h2 to make its size 40px, and it’ll do it within half a second because
the number 500 stands for 500 milliseconds. Then it will alter the h2’s CSS properties and change the color to purple. (Try this out at the demo page)
Now let’s add some new functions to the buttons we declared within our HTML.
When button (b1) is clicked, it will make the background color of the whole page lightgreen (targeting “body” affects the whole page).
When button (b2) is clicked, it will slide up the title (h2).
When button (b3) is clicked, it will fadeIn the title (h2). Nothing will happen when the title is already showing, because something can’t fade IN when it’s already
showing, so to see the effect you have to first hide the title by clicking the second button.
When button (b4) is clicked, it will place some text into the document.
There are a lot more events to choose from rather than only the “click” event that I showed off. You can replace click with hover, keydown, click, keyup, toggle, and much much more.
Three is also a lot more effects and HTML/CSS manipulations to choose from. You can get the full documentation on the jquery website.