hide - Understanding jQuery

Let’s say that we have a form residing in an element whose class name is .clockwork. And we
want to select all input elements that happen to be using class .orange within that form.
Using the .orange handle is just another way of referring to an input box. Let’s take a look at
how we would do this without using context first. This selector will select all visible input elements
anywhere in the DOM.
And with context?
$(‘.orange:visible’)
$(‘.orange:visible’, $(‘.clockwork form’))
But this would be a step backward. We just doubled the amount of work for jQuery by using
two complex selectors, not just one.
Remember our first rule of Javascript performance? Since we already know that using $(‘#id_
name’) is the absolute fastest way to perform a DOM selection, we will use that knowledge to
our advantage. You should always aim to simplify your selectors in such a way if you’re looking
for a performance advantage.
Instead, let’s rewrite the example from above to make it fast:
$(‘.orange:visible’, $(‘#my_form’))
Now this will cut the performance bottleneck of your jQuery selectors. The more expensive
selector .orange:visible now works within the confines of a less expensive selector #my_form.
In fact, this is the fastest selector you can possibly get with jQuery.
Remember the general rule when speeding up the performance of your jQuery selectors:
Confine a complex selector to a less complex context.
102