JQuery DOM tree

The following is an example of retrieving the "value" of the second image:

HTML markup:


<div>
  <ul>
    <li><a href="joy.html"><img src="image1.jpg"/></a></li>
    <li><a href="owl.html"><img src="image2.jpg"/></a></li>
  </ul>
</div>

jQuery:


var nextImage=$('img[src"bar.jpg"]') //define the starting point
                         .closest('li') //travel up to the closest list item
                         .next( ) //move to the next list item
                         .find('img') //find the image tag in that line
                         .attr('src'); //grab the source attribute found in the image tag

So now variable nextImage contains image2.jpg.
Note that // are comments that will not be seen by the user.

JQuery's mantra

jQuery's mantra is " Write less, do more".
I fully support this good idea so I would be exploring more jQuery techniques.

For example, to select an element using its "id" attribute in JavaScript:

document.getElementByID('joy');

there is a high change that I might make a spelling mistake which would cause an error to my programme.

However for jQuery:

 $('#joy');

short and simple:)

CSS3 Rounded Radius

CSS3 Colour gradients

Currently, these gradients are only supported in Safari and Chrome. 

This is expected to change with time.

CSS3 positioning

CSS3 Columns

CSS3 Font Attributes