Custom DOM selections

This tutorial has various instances where DOM is manipulated with JQuery. To access a DOM element with JQuery, the selector is often the first part of the process. For example, let’s look at

$(’.myName').show(). The selected element is actually any element with the myName class. In some cases, that could be exactly what you want to select. Now, to reinforce this, look at

$('img.specialImage'). The item selected here is

any image on the page with the class called ‘specialImage’. Thus, the HTML for this item would look like <img class="specialImage" src="myImage” />.

As you can see, the second example was a little more specific. Although that may seem as specific as you might need, you may end up with a situation when you must be much more specific because you have 20 thumbnails on the pages all with the same element and class name. To make custom selection a simple process, here is a very big tip. You can use Firebug or Inspector to get the precise selection of an element. Using Chrome or Chromium, you can type CTRL+Shift+i to open the Inspector. Then, rightclick on the element inside the inspector and select ‘Copy CSS path’. That can help you obtain an accurate path for your JQuery selector.