jQuery is a Javascript library that makes writing advanced javascript code a breeze. If you already know some
javascript, taking of with jQuery will be really easy.
For this tutorial we'll be working with the following basic document, to which we'll be adding or replacing functions.
First you have to ad jquery to your page. You can download it from here.
All your jQuery code should be inside this
$(document).ready(function() {
//insert your jQuery code here.
});
The jQuery document ready function tells your browser to execute the code within it after the document finished loading.
It doesn't take into account images. This is of great advantage because the code that is usually used is window.onload(), but this
takes place only after all the images are loaded, so this make your page execution smoother.
On this tutorial we are going to see 5 main things you can do with jQuery. Select page elements, manipulate them, changing their style,
attach events to them, and animate them.
Identifiying Page Elements
jQuery gives us powerful ways to identify elements of a web page. The $ object produce a set of matches, which
can be just one element or an array of elements. On it's simplest form you will do this,
$('#myelement');
If you were going to write this with common javascript it will be,
document.getElementById('myelement');
You can not just identify elements by id, you can also identify them by class, something that you can't do easily with
regular javascript.
$('a'); //this will select all the anchors in a document
$('span.myclass'); //this will select all the spans in your document with a myclass class.
jQuery goes even further and gives you some selectors, that you can use to specify even further what you want to select.
For example the first will match only the first element of the ones selected.
$('span.myclass:first') //this will match the first span with a myclass class
You can also use traversing to find the elements that you want to work with
For example:
$('span.myclass').not('#myelement'); //this will match all the spans with a myclass class except the one with an id of #myelement
$('span.myclass').children(); //this will match all children of the spans with a myclass class
Manipulate
Once you have identified the element with which you want to work on your page you can manipulate it. For example you can
change the content of an element,
$('#myelement').html("<b>Hello my Lady<b>");
Other functions to change the contents of an element are append, prepend, before, and after.
You can see all the ways of manipulation over here http://docs.jquery.com/Manipulation
For example you'll use append like this.
$('span.myclass').append("<b>Hello my Lady</b>"); //this will append <b>Hello my Lady</b> to all the selected elements.
Changing Style
Once you have the element with which you want to work identified you can easily change it's style.
For example:
$('span.myclass').css( {"border": "2px solid blue", background: "green" } ); //this will add a blue border of 2px and a green background color
Of course you can also retrieve the css properties of an object.
var color = $('#myelement').css("background-color"); //this will retrieve the background color of myelement
Events
With jQuery you can easily assign actions to events on a webpage. For each event there's a jQuery function.
For example if you want to assign an action to the click event of a page element you'll do this.
$('#myelement').click( function() {
//What to do when clicked.
});
Similarly, if you want to generate a click event you'll do this.
$('#myelement').click(); //this will generate a click event.
Another example is submit:
$('#myform').submit( function() {
//What to do when submitted.
});
$('#myform').submit(); //this will generate a form submission.
You can see a complete list of events here.
Animation
jQuery comes with a set of animation functions that you can use to add interactivity to your site.
For example to show an element:
$("p").show(); //this will show the element
You can also give the animation a speed.
$("p").show("slow"); // this will show the element slowly
or you can also set the speed in miliseconds
$("p").show(3000); // this will show the element in 3 seconds
There's also a more advanced animate function that you can use to make even more complex animations.
Conclusion
So as you can see, jQuery is a really powerful library that once you know how to use will take
your developing to a higher level.
| 
