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.
wow, it really is easy. Thanks for making this very useful tutorial. Maybe a demo would be a good thing to add?
I will be adding a demo and download shortly.
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?
nice! hmmmm
Very easy tutorial to follow- will be using some f this at my website soon!
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
hiiiiiii
i hv tried ur code bt i think i m doing some mistakes
can u provide me the full code for this function........
I think this I a very good tutorial for beginners.
This is very useful ..
thanks ..
Really, it is very usefull.
Very nice Tutorial, way better than others
Dankie!!
How do I get to the Second Lesson
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.
Nice tutorial... fine...
I couldn't get what "jagadishwor" says!!!
Thank for great tutorial! Great for the start with this.
Good tutorial for beginners... Easy to follow and test quickly...... Thanks
Great Job. Very useful and nice tutorial.
Nice Tutorial .I am really happy.Because this is my first learning jquery tutorial.
Its really good and helpful for beginners.....
its really a quick startup material. Good for all beginners.
Nice Tutorial
Its really good, I got the basic concept of jQuery. Thanks
it's 2010 now and this tutorial has given me a great heads up on this technology
Thank you! This tutorial is very helpful for a JQuery beginner
nice work....
thank u...
Thank you! Very helpful tutorial.
It is very nice tutorial for beginners.
Thank you
Thanks a lot
Awesome! I have seen other tutorials but they leave out the most important thing:
$(document).ready(
function() {
// Code to be executed goes here ...
}
);