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.
I) So in your HTML file, you have to place this line of code somewhere in the header at the top.
<script src="http://www.tutorialspalace.com/wp-content/uploads/2011/05/https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
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.
So now you go into the HTML file, and place this code somewhere in the header,
<script src="http://www.tutorialspalace.com/wp-content/uploads/2011/05/jquery-1.3.2.min.js" type="text/javascript"></script>
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.
1: jQuery is a very lightweight JavaScript library. It can do many things, ie. CSS manipulation, HTML element manipulation, JS effects and animations, AJAX, and much more.
To start using the code for jQuery, you have to first write this somewhere in the header: <script type="text/javascript"> and then write this after it:
</script> All our JavaScript and jQuery code will go within these two pieces of code. To start off jQuery, we'll have to write this down first.
<script type="text/javascript">
$(document).ready(function(){
// jQuery functions will go here...
});
</script>
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
<script type="text/javascript">
$(document).ready(function(){
// jQuery functions will go here...
});
</script>
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:
$("h2").click(function() {
$(this).animate({fontSize: "40px" },500);
$(this).css({"color":"purple"});
});
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.
$(".b1").click(function() {
$("body").css({"background":"lightgreen"});
});
$(".b2").click(function() {
$("h2").slideUp("normal");
});
$(".b3").click(function() {
$("h2").fadeIn("slow");
});
$(".b4").click(function() {
$("p").text("Hello everyone. Wow this text came from NOWHERE. AMAZING.");
});
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.
Check out the demo of this tutorial HERE.
I hope you enjoyed this tutorial on jQuery, and hopefully you also learned something new.
No comments:
Post a Comment