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.
March 18th, 2008 at 9:12 am
wow, it really is easy. Thanks for making this very useful tutorial. Maybe a demo would be a good thing to add?
March 18th, 2008 at 10:18 am
I will be adding a demo and download shortly.
May 6th, 2008 at 1:40 pm
I'm trying to make a jQuery image fade-in & fade-out to the next image automatically every 5ish seconds. Any ideas how i would do that?
November 14th, 2008 at 7:06 am
nice! hmmmm
December 12th, 2008 at 12:19 pm
Very easy tutorial to follow- will be using some f this at my website soon!
December 30th, 2008 at 4:02 pm
Hi nice article, I have one very easy and short which will work on a button click here is the code
$(document).ready(function(){ // This Function check for ready position
$("button").click(function () { //When you press the button if div is visible it will hide it.
$("div:visible").hide("slow");
}
);
$("button").click(function () { //And if div is hidden it will show it
$("div:hidden").show("slow");
}
);
}
);
In above example your contents will not be shown when ready. To show contains use following line after ready function
$("div:hidden").show("slow");
Have some style for div
div { width:auto; height:auto; margin:5px; border:3px outset green; float:left; }
Now Create the Button:
Show hide div
And at the last use div:
This is the Test layer for show or hide your page.
can get download at http://www.jagadishwor.com.np
February 11th, 2009 at 5:06 am
I think this I a very good tutorial for beginners.
May 28th, 2009 at 9:58 am
This is very useful ..
thanks ..
June 17th, 2009 at 3:53 am
Really, it is very usefull.
June 24th, 2009 at 6:58 am
Very nice Tutorial, way better than others
Dankie!!
June 24th, 2009 at 7:00 am
How do I get to the Second Lesson
July 16th, 2009 at 1:19 pm
A tutorial made easy, I like it... On my website I also like to give others easy tutorials, only Java at this moment but there is going to be a lot more... HTML, CSS, PHP, JS, etc...
Keep on making these tutorials, your doing a good job.
Thanks.
July 25th, 2009 at 9:32 am
Nice tutorial... fine...
I couldn't get what "jagadishwor" says!!!
July 28th, 2009 at 8:03 am
Thank for great tutorial! Great for the start with this.
July 30th, 2009 at 1:21 pm
Good tutorial for beginners... Easy to follow and test quickly...... Thanks
August 6th, 2009 at 5:57 am
Great Job. Very useful and nice tutorial.
August 19th, 2009 at 4:17 am
Nice Tutorial .I am really happy.Because this is my first learning jquery tutorial.
August 19th, 2009 at 10:10 am
Its really good and helpful for beginners.....
September 17th, 2009 at 8:52 pm
its really a quick startup material. Good for all beginners.
October 5th, 2009 at 9:10 am
Nice Tutorial
October 13th, 2009 at 10:01 pm
Its really good, I got the basic concept of jQuery. Thanks