This is a little tutorial i put together to help people starting out with jQuery to learn the basics.
So, first things first. Pop over to http://docs.jquery.com/Downloading_jQuery and download the latest version in whatever form you prefer, Minified, Packed or Uncompressed. If you are not fussed then i would suggest the packed version.
No, the first thing you should do is create a specific testing area, for example c:jquery. Then in that folder extract the jquery file into it, if the name of the js file isn't jquery then i would suggest you rename it to jquery.js to make the name of the file nice and easy to remember.
Now, on to the html.
Create a file, with whatever name you prefer, i will call mine 'myfirstjquery.htm' in that file i have created basic html as follows, i have also included
the jquery js file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My First jQuery Script with lotsofcode.com</title>
<script src="jquery.js"></script>
</head>
<body>
</body>
</html>
Now that we have the basic html we can start adding some Javascript.
Next, create a new div and assign an id to the div like so.
<div id="hello-lotsofcode">Hello LotsofCode</div>
Now, save the file, open it with a web browser and you should have a basic html page with the text 'hello Go back to your text editor and add the following
code to inbetween the opening and closing head tags.
<script>
$(document).ready(
function() {
// Code to be executed goes here ...
}
);
</script>
Everything that is called by jQuery needs to be wrapped in this loader above.
Now, to call the element we just created we simply use a CSS style declaration to call the element like so.
<script>
$(document).ready(
function() {
alert( $('#hello-lotsofcode').text() );
}
);
</script>
This should present you with an alert box with the words 'hello LotsofCode', now, we can change the text value by using a simular method like so
<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor');
}
);
</script>
Now, when you execute this code, you should see that your div has the content of hello from the visitor, this is because we used the method text with a value and assigned it to the id hello-lotsofcode element, it's pretty simple isn't it!
Now, to hide and display elements:
<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide();
}
);
</script>
And to show ...
<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').show();
}
);
</script>
The two above methods don't mean much on there own, but with an event handler we can have some fun.
So at the top of the page add two anchor links.
<a href="#" class="hide-text">Hide Text</a>
<a href="#" class="show-text">Show Text</a>
Then the jQuery code for this is as follows:
<script>
$(document).ready(
function() {
$('.hide-text').click(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide();
}
);
$('.show-text').click(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').show();
}
);
}
);
</script>
Nice results eh ... ? You can easily hide anddisplay elements on the page.
I did say this tutorial was for beginners and it is, i have emphasized on this because now i am going to show you some basic effects and i don't want you to assume they are going to be really complicated.
So, while working with the same file, we can add a nice fading effect to go along with our new text, like so:
<script>
$(document).ready(
function() {
$('#hello-lotsofcode').text('Hello from the visitor').hide().fadeIn('slow');
}
);
</script>
Note the chainability, all i have added is '.hide().fadeIn('slow')' to the end of the string so we hide the element and then immediately after we fade it in, take a look at the results.
Tags: AJAX, CSS, Javascript, jQuery, xHTML
