jQuery is the best thing that ever happened to the web. it has made the life of web developers significantly easier. with its cool effects and animations plus the amazing AJAX it really stands apart from other javascript libraries. plus its easy as pie to learn. i've finally decided to write down a tutorial for newbies. so lets begin:
downloading jQuery:
note that there are two compression levels production and development. for now download the development level. download the file rename it
(its in .txt format, change the extension to .js). create a new folder and put it in there:
so far so good. now lets start html.
HTML:
offcourse jquery works on a webpage so we'll need to create one. just create a new text document in the folder we have kept jquery. give it whatever name you want:
this is going to be our html file(we'll change the extension later on). now lets get to some code. code the newly created text file like this:
keeping it simple we have added only a heading(h1) and a paragraph(p). now we'll animate them using jQuery.
jQuery Time:
in the same folder create a new text document name it myscript.js(change the extension):
this is going to be our script file which we will use for jquery animations and effects. getting to jquery code now. whenever we write down jquery code we enclose it in a document.ready function. how it looks like is shown here:
jQuery(document).ready(function(){
//everything else in here
});
for those who are already familiar with javascript understanding the above code will be no trouble. coming back to our tutorial, to start what we will do is use create a very basic animation i.e. whenever our webpage is loaded the paragraph will fadeout. to do that we'll add the following code to our myscript.js file:
jQuery(document).ready(function(){
jQuery("p").fadeOut('slow');
});
now to test our animation lets go back to our would be webpage. we'll add a reference to our .js files in the head section so now our webpage will look like:
now change the extension of our text file from .txt to .html and open it in a web browser. ta-da congratulations you have just created your first jQuery animation. notice that how the paragraph slowly fades out whenever the page is loaded(hit F5).
for a more cool effect add more text to the paragaph(in multiple lines) & customize the myscript.js file like this:
jQuery(document).ready(function(){
jQuery("p").hide();
jQuery("h1").toggle(function(){
jQuery("p").animate({height: 'show', opacity: 'show'}, 'slow');
},function(){
jQuery("p").animate({height: 'hide', opacity: 'hide'}, 'slow');
});
});
this creates a cool animation effect hiding and showing the paragraph whenever we click on the heading(h1).
Final word:
thats all for now folks. start experimenting play with the code, read up jquery's
documentation. and i will be back with more.
