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
'firstjquery.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.
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 in between 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 similar 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 and display 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.
No comments:
Post a Comment