JQuery, the very very basics - Lesson 2
Continue on with the series of lessons I learned about some of the very basics of JQuery. Thanks to all of you who has generously kicked, dzoned, redditted my first of N posts on this topic:
JQuery, the very very basics - Lesson 1
So it is nice to be able to use a combination of JQuery selectors to grab an array of elements, however, it would be better if we know how to inspect them one by one and operate on them.
size() and each(iterator)
To determine the size of the set we just selected, we use the size() command.
For example, to list all the ids of the <p> elements we just selected, we can use a for ... loop and the size() command:
To cut the chase even more, we can use the each() command, which takes a literal function as parameter to deal with each element in the set. The element can be accessed using the this keyword. So rewrite the above code:
Get and set attributes' values
attr(name) and attr(name, value)
Well, you probably have guessed it. The first attr() command lets you access the value of an attibute designated by the name, the second attr() command assign the named attribute with the value specified in the second parameter.
For example, I have a dummy <p> element as such:
<p id="p1" title="test">Test, test</p>
$('p#p1').attr('title') returns the value of the attribute title ('test'),
$('p#p1').attr('title', 'more than a test') change the title's value to "more than a test".
Css Style: Dress up, dress down 
addClass(names), removeClass(names) and toggleClass(name)
addClass dresses up all of the elements in a selected set with one css class or multiple css classes; conversely, removeClass strips off the elements one or more css classes specified by the name paramter, as in:
$('p.notes').addClass('notes', 'highlight');
$('p.notes').removeClass('highlight');
Do not we all love to toggle, add and remove, switch and off? Well, toggleClass command does just this, add the specified css class to element(s) if it is not there, remove it if it is.
$('p.notes').toggleClass('highlight');
css(name, value)
What if we want to change css style of elements without using any css class names? There, css command affords us to do so.
$('p.note').css('background-color', 'yellow'); changes the background color of all <p> elements whose class name is note.
There are more css related commands such as width(value), height(value) to allow us to directly change elements' apparence, for example:
$('p.note').width(500).height(100); changes the width then height of all <p> elements whose class name is note.
Read more